방법: 배경으로 사용된 이미지의 가로 세로 비율 유지

업데이트: 2007년 11월

이 예제에서는 ImageBrush의 Stretch 속성을 사용하여 이미지의 가로 세로 비율을 유지하는 방법을 보여 줍니다.

기본적으로 ImageBrush를 사용하여 영역을 그리는 경우 출력 영역을 완전히 채우도록 영역의 내용이 늘어납니다. 출력 영역과 이미지의 가로 세로 비율이 다르면 이러한 늘이기로 인해 이미지가 왜곡됩니다.

ImageBrush가 이미지의 가로 세로 비율을 유지하도록 하려면 Stretch 속성을 Uniform 또는 UniformToFill로 설정합니다.

예제

다음 예제에서는 두 개의 ImageBrush 개체를 사용하여 두 개의 사각형을 그립니다. 각 사각형의 너비와 높이는 300 x 150픽셀이고 각 사각형 안에는 300 x 300픽셀의 이미지가 포함됩니다. 첫 번째 브러시의 Stretch 속성은 Uniform으로 설정되어 있고 두 번째 브러시의 Stretch 속성은 UniformToFill로 설정되어 있습니다.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using System.Windows.Media;
using System.Windows.Shapes;

namespace Microsoft.Samples.Graphics.UsingImageBrush
{
    /// <summary>
    /// Demonstrates different ImageBrush Stretch settings.
    /// </summary>
    public class StretchModes : Page
    {
        public StretchModes()
        {

            // Create an ImageBrush with its Stretch
            // property set to Uniform. The image it
            // contains will be expanded as much as possible
            // to fill the output area while still
            // preserving its aspect ratio.
            ImageBrush uniformBrush = new ImageBrush();
            uniformBrush.ImageSource = 
                new BitmapImage(new Uri("sampleImages\\square.jpg", UriKind.Relative));
            uniformBrush.Stretch = Stretch.Uniform;

            // Freeze the brush (make it unmodifiable) for performance benefits.
            uniformBrush.Freeze();

            // Create a rectangle and paint it with the ImageBrush.
            Rectangle rectangle1 = new Rectangle();
            rectangle1.Width = 300;
            rectangle1.Height = 150;
            rectangle1.Stroke = Brushes.MediumBlue;
            rectangle1.StrokeThickness = 1.0;
            rectangle1.Fill = uniformBrush;

            // Create an ImageBrush with its Stretch
            // property set to UniformToFill. The image it
            // contains will be expanded to completely fill
            // the rectangle, but its aspect ratio is preserved.
            ImageBrush uniformToFillBrush = new ImageBrush();
            uniformToFillBrush.ImageSource =
                new BitmapImage(new Uri("sampleImages\\square.jpg", UriKind.Relative));
            uniformToFillBrush.Stretch = Stretch.UniformToFill;

            // Freeze the brush (make it unmodifiable) for performance benefits.
            uniformToFillBrush.Freeze();

            // Create a rectangle and paint it with the ImageBrush.
            Rectangle rectangle2 = new Rectangle();
            rectangle2.Width = 300;
            rectangle2.Height = 150;
            rectangle2.Stroke = Brushes.MediumBlue;
            rectangle2.StrokeThickness = 1.0;
            rectangle2.Margin = new Thickness(0, 10, 0, 0);
            rectangle2.Fill = uniformToFillBrush;

            StackPanel mainPanel = new StackPanel();
            mainPanel.Children.Add(rectangle1);
            mainPanel.Children.Add(rectangle2);

            Content = mainPanel;
            Background = Brushes.White;
            Margin = new Thickness(20);
            Title = "ImageBrush Stretch Modes";


        }
    }
}

<!-- Demonstrates different ImageBrush Stretch settings.-->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions"
  Background="White" Margin="20"
  Title="ImageBrush Stretch Modes">
  <StackPanel>

    <!-- The ImageBrush in this example has its
         Stretch property set to Uniform. As a result,
         the image it contains is expanded as much as possible
         to fill the rectangle while
         still preserving its aspect ratio.-->
    <Rectangle
      Width="300" Height="150" 
      Stroke="MediumBlue" StrokeThickness="1">
      <Rectangle.Fill>
        <ImageBrush
          Stretch="Uniform" ImageSource="sampleImages\square.jpg"
          PresentationOptions:Freeze="True" />
      </Rectangle.Fill>
    </Rectangle>

    <!-- The ImageBrush in this example has its
         Stretch property set to UniformToFill. As a result,
         the image is expanded to completely fill
         the rectangle, but its aspect ratio is preserved.-->
    <Rectangle
      Width="300" Height="150"
      Stroke="MediumBlue" StrokeThickness="1"
      Margin="0,10,0,0">
      <Rectangle.Fill>
        <ImageBrush 
          Stretch="UniformToFill" ImageSource="sampleImages\square.jpg" 
          PresentationOptions:Freeze="True" />
      </Rectangle.Fill>
    </Rectangle>
  </StackPanel>
</Page>

다음 그림에서는 Stretch 설정이 Uniform인 첫 번째 브러시의 출력을 보여 줍니다.

다음 그림에서는 Stretch 설정이 UniformToFill인 두 번째 브러시의 출력을 보여 줍니다.

Stretch 속성은 DrawingBrush 및 VisualBrush 등 다른 TileBrush 개체에 대해서도 동일하게 작동합니다. ImageBrush 및 다른 TileBrush 개체에 대한 자세한 내용은 이미지, 그림 및 시각적 표시로 그리기를 참조하십시오.

또한 Stretch 속성이 TileBrush의 내용을 해당 출력 영역에 맞게 늘리는 방법을 지정하는 것처럼 보이지만 실제로는 TileBrush가 해당 기본 바둑판식 배열에 맞게 내용을 늘리는 방법을 지정합니다. 자세한 내용은 TileBrush를 참조하십시오.

이 코드 예제는 ImageBrush 클래스에 대해 제공되는 보다 큰 예제의 일부입니다. 전체 샘플을 보려면 ImageBrush 샘플을 참조하십시오.

참고 항목

개념

이미지, 그림 및 시각적 표시로 그리기

참조

TileBrush