TileBrush 概觀

發行項
08/21/2008

更新：2007 年 11 月

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：筆刷內容會自動縮放以符合並排顯示。因為內容的高度和寬度是分開縮放的，所以可能不會保留影像的原始外觀比例 (Aspect Ratio)。也就是說，筆刷內容可能會扭曲以完全填滿輸出並排顯示。
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.
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.
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 乘以 25 個與裝置無關的像素。因為 ViewportUnits 是絕對單位，所以不論要繪製的區域有多大，ImageBrush 並排顯示都一定是 25 乘以 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;

並排顯示行為

當基底並排顯示不完全填滿輸出區域，而且指定的並排顯示模式不是 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.
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;

請參閱

共用方式為