Обзор TileBrush
TileBrush объекты обеспечивают широкий контроль над тем, как область окрашена изображением, Drawingили Visual. В этом разделе описывается, как использовать функции TileBrush для получения большего контроля над тем, как ImageBrush, DrawingBrushили VisualBrush красит область.
Необходимые условия
Чтобы понять эту тему, полезно понять, как использовать основные функции класса ImageBrush, DrawingBrushили VisualBrush. Для ознакомления с этими типами см. творчество с изображениями, рисунками и визуальными элементами.
Рисование области с плитками
ImageBrush, DrawingBrush, являются VisualBrush типами объектов TileBrush. Кисти для плиток обеспечивают значительный контроль над тем, как область оформляется изображением, рисунком или визуальным элементом. Например, вместо простой рисования области с одним растянутым изображением можно нарисовать область с рядом плиток изображений, создающих шаблон.
Окрашивание области с помощью плиточной кисти включает три компонента: содержимое, базовую плитку и выходную область.
Компоненты кисти с одной плиткой
Компоненты плитки TileBrush с элементом TileMode
Область вывода — это область, нарисованная, например FillEllipse или BackgroundButton. В следующих разделах описываются два других компонента системы TileBrush.
Содержимое кисти
Существуют три различных типа TileBrush, и каждый из них работает с разным типом содержимого.
Если кисть является ImageBrush, это содержание представлено в виде изображения. Свойство ImageSource указывает содержимое ImageBrush.
Если кисть - DrawingBrush, это содержимое - рисунок. Свойство Drawing указывает содержимое DrawingBrush.
Если кисть имеет код VisualBrush, это содержимое визуализировано. Свойство Visual указывает содержимое VisualBrush.
Вы можете указать позицию и размеры содержимого TileBrush с помощью свойства Viewbox, хотя обычно 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.
На следующем рисунке показана разница в выходных данных между TileBrush с относительным и абсолютным ViewportUnits. Обратите внимание, что на иллюстрациях показан плиточный узор; в следующем разделе описывается, как указать шаблон плитки.
В следующем примере изображение используется для создания плитки с шириной и высотой 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 на 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;
' 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, но альтернативные строки плиток перевернуты по вертикали.
На следующем изображении иллюстрируются различные режимы плитки.
В следующем примере изображение используется для рисования прямоугольника с шириной 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
См. также
.NET Desktop feedback