TileBrush 概述

项目
08/12/2011

使用 TileBrush 对象，您可以非常自如地控制如何使用图像、Drawing 或 Visual 来绘制区域。本主题介绍如何使用 TileBrush 功能来更自如地控制 ImageBrush、DrawingBrush 或 VisualBrush 绘制区域的方式。

本主题包括下列各节。

先决条件
使用图块绘制区域
画笔内容
基本图块
相关主题

先决条件

了解如何使用 ImageBrush、DrawingBrush 或 VisualBrush 类的基本功能对于了解本主题是很有帮助的。有关这些类型的简介，请参见使用图像、绘图和 Visual 进行绘制。

使用图块绘制区域

ImageBrush、DrawingBrush 和 VisualBrush 是 TileBrush 对象的类型。使用图块画笔，您可以非常自如地控制如何使用图像、绘图或可视元素来绘制区域。例如，在绘制一个区域时，您可以使用一系列的图像图块创建图案，而不是仅使用拉伸的图像。

使用图块画笔绘制区域涉及以下三个组成部分：内容、基本图块和输出区域。

具有单个图块的 TileBrush 的各组成部分

TileBrush 组件

指定了图块的 TileMode 的 TileBrush 的各组成部分

平铺 TileBrush 的组成部分

输出区域指绘制的区域，如 Ellipse 的 Fill 或 Button 的 Background。下面各节介绍了 TileBrush 的另外两个组成部分。

画笔内容

有三种类型的 TileBrush，它们分别使用一种不同类型的内容进行绘制。

如果画笔为 ImageBrush，则此内容为图像。ImageSource 属性指定 ImageBrush 的内容。
如果画笔为 DrawingBrush，则此内容为绘图。 Drawing 属性指定 DrawingBrush 的内容。
如果画笔为 VisualBrush，则此内容为可视元素。 Visual 属性指定 VisualBrush 的内容。

尽管通常情况下将 Viewbox 的设置保留为默认值，但您也可以使用 Viewbox 属性来指定 TileBrush 内容的位置和尺寸。默认情况下，Viewbox 配置为完全包含画笔的内容。有关配置 Viewbox 的更多信息，请参见 Viewbox 属性页。

基本图块

TileBrush 将其内容投射到基本图块中。 Stretch 属性控制如何拉伸 TileBrush 内容来填充基本图块。 Stretch 属性接受 Stretch 枚举定义的以下值：

None：不拉伸画笔的内容来填充图块。
Fill：缩放画笔的内容以适合图块。由于内容的高度和宽度是独立缩放的，因此内容的原始长宽比可能不会保留。也就是说，为了完全填充输出图块，画笔的内容可能会扭曲。
Uniform：缩放画笔的内容使其完全放置于图块内。内容的长宽比保留。
UniformToFill：缩放画笔的内容，使它完全填充输出区域，同时保留内容的原始长宽比。

下图举例说明了不同的 Stretch 设置。

不同的 TileBrush 拉伸设置

在下面的示例中，将 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;

图块平铺行为

当基本图块未完全填充输出区域并且指定了 None 以外的平铺模式时，TileBrush 将生成一种图块图案。当图块画笔的图块未完全填充输出区域时，其 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;

请参见

通过