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 定義的下列值:
下列影像說明不同的並排顯示模式。
在下列範例中,會使用影像繪製 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