TileBrush 개요

아티클
08/10/2011

TileBrush 개체를 사용하면 이미지, Drawing 또는 Visual로 영역을 그리는 방법을 다양하게 제어할 수 있습니다. 이 항목에서는 TileBrush 기능을 사용하여 ImageBrush, DrawingBrush 또는 VisualBrush로 영역을 그리는 방법을 보다 잘 제어할 수 있는 방법에 대해 설명합니다.

이 항목에는 다음 단원이 포함되어 있습니다.

사전 요구 사항
바둑판으로 영역 그리기
브러시 내용
기본 바둑판
관련 항목

사전 요구 사항

이 항목의 내용을 이해하려면 ImageBrush, DrawingBrush 또는 VisualBrush 클래스의 기본 기능을 사용하는 방법에 대해 이해하는 것이 좋습니다. 이러한 형식에 대한 소개는 이미지, 그림 및 시각적 표시로 그리기를 참조하십시오.

바둑판으로 영역 그리기

ImageBrush, DrawingBrush 및 VisualBrush는 TileBrush 개체의 형식입니다. 바둑판 브러시를 사용하면 이미지, 그림 또는 시각적 표시로 영역을 그리는 방법을 다양하게 제어할 수 있습니다. 예를 들어 하나의 늘어난 이미지를 사용하여 영역을 그리는 대신 패턴을 만드는 일련의 이미지 바둑판을 사용하여 영역을 그릴 수 있습니다.

바둑판으로 영역을 그리는 데에는 내용, 기본 바둑판 및 출력 영역이라는 세 가지 구성 요소가 필요합니다.

하나의 바둑판을 포함하는 TileBrush의 구성 요소

TileBrush 구성 요소

TileMode가 Tile인 TileBrush의 구성 요소

바둑판식으로 배열된 TileBrush의 구성 요소

출력 영역은 그리고 있는 영역을 의미하며 Ellipse의 Fill 또는 Button의 Background를 예로 들 수 있습니다. 다음 단원에서는 TileBrush의 다른 두 가지 구성 요소에 대해 설명합니다.

브러시 내용

세 가지 다른 형식의 TileBrush가 있으며 각각 다른 형식의 내용을 그립니다.

브러시가 ImageBrush인 경우 이 내용은 이미지입니다. ImageSource 속성은 ImageBrush의 내용을 지정합니다.
브러시가 DrawingBrush이면 이 내용은 그리기입니다. Drawing 속성은 DrawingBrush의 내용을 지정합니다.
브러시가 VisualBrush이면 이 내용은 표시입니다. Visual 속성은 VisualBrush의 내용을 지정합니다.

Viewbox 속성을 사용하여 TileBrush 내용의 위치와 크기를 지정할 수도 있지만 일반적으로 Viewbox는 기본값으로 그대로 둡니다. 기본적으로 Viewbox는 브러시의 내용을 완전히 포함하도록 구성됩니다. Viewbox를 구성하는 방법에 대한 자세한 내용은 Viewbox 속성 페이지를 참조하십시오.

기본 바둑판

TileBrush는 자체의 내용을 기본 바둑판에 투영합니다. Stretch 속성은 TileBrush 내용이 기본 바둑판을 채우도록 해당 내용을 늘리는 방법을 제어합니다. Stretch 속성에는 Stretch 열거형으로 정의하는 다음과 같은 값을 사용할 수 있습니다.

None: 브러시의 내용이 바둑판을 채우도록 늘어나지 않습니다.
Fill: 브러시의 내용이 바둑판에 맞게 배율 조정됩니다. 내용의 높이와 너비의 배율이 독립적으로 조정되기 때문에 내용의 원래 가로 세로 비율이 유지되지 않을 수 있습니다. 즉, 브러시의 내용이 출력 바둑판을 완전히 채우기 위해 휠 수 있습니다.
Uniform: 브러시의 내용이 모두 바둑판 내에 포함되도록 배율 조정됩니다. 내용의 가로 세로 비율은 유지됩니다.
UniformToFill: 브러시 내용이 출력 영역을 완벽하게 채우도록 배율 조정되며 내용의 원래 가로 세로 비율은 유지됩니다.

다음 이미지에서는 여러 가지 Stretch 설정을 보여 줍니다.

여러 TileBrush Stretch 설정

다음 예제에서는 ImageBrush의 내용이 출력 영역을 채우기 위해 늘어나지 않도록 설정합니다.

<Rectangle
  Width="125" Height="175"
  Stroke="Black"
  StrokeThickness="1"
  Margin="0,0,5,0">
  <Rectangle.Fill>
    <ImageBrush 
      Stretch="None"
      ImageSource="sampleImages\testImage.gif"/>
  </Rectangle.Fill>
</Rectangle>

            ' Create a rectangle.
            Dim myRectangle As New Rectangle()
            With myRectangle
                .Width = 125
                .Height = 175
                .Stroke = Brushes.Black
                .StrokeThickness = 1
                .Margin = New Thickness(0, 5, 0, 0)
            End With

            ' Load the image.
            Dim theImage As New BitmapImage(New Uri("sampleImages\testImage.gif", UriKind.Relative))
            Dim myImageBrush As New ImageBrush(theImage)

            ' Configure the brush so that it
            ' doesn't stretch its image to fill
            ' the rectangle.
            myImageBrush.Stretch = Stretch.None

            ' Use the ImageBrush to paint the rectangle's background.
            myRectangle.Fill = myImageBrush

// Create a rectangle.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 125;
myRectangle.Height = 175;
myRectangle.Stroke = Brushes.Black;
myRectangle.StrokeThickness = 1;
myRectangle.Margin = new Thickness(0,5,0,0);

// Load the image.
BitmapImage theImage = 
    new BitmapImage(
        new Uri("sampleImages\\testImage.gif", UriKind.Relative));   
ImageBrush myImageBrush = new ImageBrush(theImage);

// Configure the brush so that it
// doesn't stretch its image to fill
// the rectangle.
myImageBrush.Stretch = Stretch.None;

// Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush;

기본적으로 TileBrush는 하나의 바둑판(기본 바둑판)을 생성하고 해당 바둑판을 늘려 출력 영역을 완전히 채웁니다. Viewport 및 ViewportUnits 속성을 설정하여 기본 바둑판의 크기와 위치를 변경할 수 있습니다.

기본 바둑판 크기

Viewport 속성은 기본 바둑판의 크기와 위치를 결정하고 ViewportUnits 속성은 Viewport를 절대 좌표 또는 상대 좌표 중 무엇을 사용하여 지정하는지를 결정합니다. 좌표가 상대적이면 출력 영역의 크기가 기준입니다. (0, 0) 지점은 출력 영역의 왼쪽 위 모퉁이를 나타내고 (1, 1)은 출력 영역의 오른쪽 아래 모퉁이를 나타냅니다. Viewport 속성에서 절대 좌표를 사용하도록 지정하려면 ViewportUnits 속성을 Absolute로 설정합니다.

다음 그림에서는 상대 및 절대 ViewportUnits를 사용한 TileBrush 간의 출력 차이를 보여 줍니다. 각 그림은 바둑판식 배열 패턴을 보여 줍니다. 다음 단원에서는 바둑판 패턴을 지정하는 방법을 설명합니다.

절대적 및 상대적 뷰포트 단위

다음 예제에서는 이미지를 사용하여 너비와 높이가 50%인 바둑판을 만듭니다. 기본 바둑판은 출력 영역의 (0,0)에 있습니다.

<Rectangle
 Width="50" Height="100">
  <Rectangle.Fill>

    <!-- Paints an area with 4 tiles. -->
    <ImageBrush ImageSource="sampleImages\cherries_larger.jpg"
      Viewport="0,0,0.5,0.5"
      ViewportUnits="RelativeToBoundingBox" 
      TileMode="Tile" />
  </Rectangle.Fill>
</Rectangle>

' Create a rectangle.
Dim myRectangle As New Rectangle()
myRectangle.Width = 50
myRectangle.Height = 100

' Load the image.
Dim theImage As New BitmapImage(New Uri("sampleImages\cherries_larger.jpg", UriKind.Relative))
Dim myImageBrush As New ImageBrush(theImage)

' Create tiles that are 1/4 the size of 
' the output area.
myImageBrush.Viewport = New Rect(0, 0, 0.25, 0.25)
myImageBrush.ViewportUnits = BrushMappingMode.RelativeToBoundingBox

' Set the tile mode to Tile.
myImageBrush.TileMode = TileMode.Tile

' Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush

// Create a rectangle.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 50;
myRectangle.Height = 100;

// Load the image.
BitmapImage theImage = 
    new BitmapImage(
        new Uri("sampleImages\\cherries_larger.jpg", UriKind.Relative));   
ImageBrush myImageBrush = new ImageBrush(theImage);

// Create tiles that are 1/4 the size of 
// the output area.
myImageBrush.Viewport = new Rect(0,0,0.25,0.25);
myImageBrush.ViewportUnits = BrushMappingMode.RelativeToBoundingBox;

// Set the tile mode to Tile.
myImageBrush.TileMode = TileMode.Tile;

// Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush;

다음 예제에서는 ImageBrush의 바둑판을 25 x 25 장치 독립적 픽셀을 설정합니다. ViewportUnits가 절대적이므로 ImageBrush 바둑판은 그리고 있는 영역의 크기에 관계없이 항상 25 x 25픽셀입니다.

<Rectangle
 Width="50" Height="100">
  <Rectangle.Fill>

    <!-- Paints an area with 25 x 25 tiles. -->
    <ImageBrush ImageSource="sampleImages\cherries_larger.jpg"
      Viewport="0,0,25,25"
      ViewportUnits="Absolute" 
      TileMode="Tile" />
  </Rectangle.Fill>
</Rectangle>

' Create a rectangle.
Dim myRectangle As New Rectangle()
myRectangle.Width = 50
myRectangle.Height = 100

' Load the image.       
Dim theImage As New BitmapImage(New Uri("sampleImages\cherries_larger.jpg", UriKind.Relative))
Dim myImageBrush As New ImageBrush(theImage)

' Create tiles that are 25 x 25, regardless of the size
' of the output area.
myImageBrush.Viewport = New Rect(0, 0, 25, 25)
myImageBrush.ViewportUnits = BrushMappingMode.Absolute

' Set the tile mode to Tile.
myImageBrush.TileMode = TileMode.Tile

' Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush

// Create a rectangle.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 50;
myRectangle.Height = 100;

// Load the image.       
BitmapImage theImage =
    new BitmapImage(
        new Uri("sampleImages\\cherries_larger.jpg", UriKind.Relative));
ImageBrush myImageBrush = new ImageBrush(theImage);

// Create tiles that are 25 x 25, regardless of the size
// of the output area.
myImageBrush.Viewport = new Rect(0, 0, 25, 25);
myImageBrush.ViewportUnits = BrushMappingMode.Absolute;

// Set the tile mode to Tile.
myImageBrush.TileMode = TileMode.Tile;

// Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush;

바둑판식 배열 동작

TileBrush에서는 기본 바둑판이 출력 영역을 완전히 채우지 않고 None 외의 바둑판식 배열 모드가 지정된 경우 바둑판식 배열 패턴을 생성합니다. 브러시의 바둑판이 출력 영역을 완전히 채우지 않고 해당 TileMode 속성에서 기본 바둑판을 복제하여 출력 영역을 채워야 하는지 여부를 지정하고, 그럴 경우 기본 바둑판을 복제하는 방법을 지정합니다. TileMode 속성에는 TileMode 열거형으로 정의하는 다음과 같은 값을 사용할 수 있습니다.

None: 기본 바둑판만 그립니다.
Tile: 기본 바둑판을 그리고 나머지 영역은 기본 바둑판을 반복하여 채웁니다. 이때 한 바둑판의 오른쪽 가장자리가 다음 바둑판의 왼쪽 가장자리 옆에 오고 마찬가지로 아래쪽과 위쪽 바둑판이 인접하도록 반복합니다.
FlipX: 바둑판의 대체 열이 좌우 대칭 이동한다는 점을 제외하고 Tile과 같습니다.
FlipY: 바둑판의 대체 행이 세로로 대칭 이동한다는 점을 제외하고 Tile과 같습니다.
FlipXY: FlipX 및 FlipY의 조합입니다.

다음 이미지에서는 여러 가지 바둑판식 배열 모드를 보여 줍니다.

여러 TileBrush TileMode 설정

다음 예제에서는 너비가 100픽셀이고 높이가 100픽셀인 사각형을 이미지를 사용하여 그립니다. 브러시의 Viewport를 0,0,0.25,0.25로 설정하면 브러시의 기본 바둑판이 출력 영역의 1/4이 되게 만들어집니다. 바둑판의 행으로 사각형을 채우도록 브러시의 TileMode를 FlipXY로 설정합니다.

<Rectangle
 Width="100" Height="100" >
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\triangle.jpg"
      Viewport="0,0,0.25,0.25" 
      TileMode="FlipXY"
      />
  </Rectangle.Fill>    
</Rectangle>

' Create a rectangle.
Dim myRectangle As New Rectangle()
myRectangle.Width = 100
myRectangle.Height = 100

' Load the image.
Dim theImage As New BitmapImage(New Uri("sampleImages\triangle.jpg", UriKind.Relative))
Dim myImageBrush As New ImageBrush(theImage)

' Create tiles that are 1/4 the size of 
' the output area.
myImageBrush.Viewport = New Rect(0, 0, 0.25, 0.25)

' Set the tile mode to FlipXY.
myImageBrush.TileMode = TileMode.FlipXY

' Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush

// Create a rectangle.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;

// Load the image.
BitmapImage theImage = 
    new BitmapImage(
        new Uri("sampleImages\\triangle.jpg", UriKind.Relative));   
ImageBrush myImageBrush = new ImageBrush(theImage);

// Create tiles that are 1/4 the size of 
// the output area.
myImageBrush.Viewport = new Rect(0,0,0.25,0.25);

// Set the tile mode to FlipXY.
myImageBrush.TileMode = TileMode.FlipXY;

// Use the ImageBrush to paint the rectangle's background.
myRectangle.Fill = myImageBrush;

참고 항목

다음을 통해 공유