TileBrush 概觀

TileBrush 物件可讓您充分掌控使用影像、 Drawing 或 Visual 繪製區域的方式。 本主題描述如何使用 TileBrush 功能，以進一步控制 、 DrawingBrush 或 VisualBrush 繪製區域的方式 ImageBrush 。

必要條件

若要瞭解本主題，瞭解如何使用 、 DrawingBrush 或 VisualBrush 類別的基本功能 ImageBrush 會很有説明。 如需這些類型的簡介，請參閱 使用影像、繪圖和視覺效果繪製。

以並排顯示繪製區域

ImageBrush、 DrawingBrush 是 VisualBrush 物件的類型 TileBrush 。 拼貼筆刷讓您對使用影像、繪圖或視覺效果繪製區域的方式擁有更多的控制。 例如，您可以用構成圖樣的一系列影像並排顯示來繪製區域，而不是只以單一自動縮放的影像來繪製區域。

使用拼貼筆刷繪製區域會牽涉到三個元件：內容、基底並排顯示及輸出區域。

具有單一並排顯示之 TileBrush 的元件

TileMode 為 Tile 之 TileBrush 的元件

輸出區域是繪製的區域，例如 Fill 的 Ellipse 或 Background 的 Button 。 下一節將說明 的其他兩個 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 設定。

在下列範例中，會設定 的內容 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.
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;

' 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

根據預設，會產生 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.
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;

' 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

下一個範例會將 的磚 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.
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;

' 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

並排顯示行為

TileBrush當基底圖格未完全填滿輸出區域，然後 None 指定其他並排模式時，會產生並排模式。 當磚筆刷的磚未完全填滿輸出區域時，其 TileMode 屬性會指定基底磚是否應該複製以填滿輸出區域，如果是的話，應該如何複製基底磚。 屬性 TileMode 接受列舉所 TileMode 定義的下列值：

• None：只繪製基底磚。

• Tile：繪製基底圖並填入其餘區域，方法是重複基底圖，使一個磚的右邊緣與下一個圖格的左邊緣相鄰，類似于下一個底端和頂端。

• FlipX：與 Tile 相同，但磚的替代資料行會水準翻轉。

• FlipY：與 Tile 相同，但磚的替代資料列會垂直翻轉。

• FlipXY：和 FlipY 的組合 FlipX 。

下列影像說明不同的並排顯示模式。

在下列範例中，會使用影像繪製 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.
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;

' 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

另請參閱

• ImageBrush
• DrawingBrush
• VisualBrush
• TileBrush
• 使用影像、繪圖和視覺效果繪製
• 操作說明主題
• Freezable 物件概觀
• ImageBrush 範例
• VisualBrush 範例