Общие сведения о TileBrush

Статья
11/05/2008

Обновлен: Ноябрь 2007

Объекты TileBrush предоставляют разработчику практически полный контроль над тем, как область закрашивается изображением, Drawing или Visual. В этом разделе описано, как использовать возможности TileBrush для большего контроля над тем, как методы ImageBrush, DrawingBrush или VisualBrush закрашивают область.

В этом разделе содержатся следующие подразделы.

Необходимые компоненты
Закрашивание области с помощью мозаики
Содержимое кисти
Базовая мозаика
Связанные разделы

Необходимые компоненты

Для понимания этого раздела, полезно разобраться с использованием основных возможностей класса ImageBrush, DrawingBrush или VisualBrush. Введение в эти типы см. в разделе Рисование с помощью объектов Image, Drawing и Visual.

Закрашивание области с помощью мозаики

Объекты ImageBrush, DrawingBrush и VisualBrush являются типами объектов TileBrush. Мозаичная кисть предоставляет практически полный контроль над закрашиванием области с помощью изображения, рисунка или визуального объекта. Например, вместо простой закраски области одним растянутым изображением, можно закрасить область с помощью множества фрагментов изображения, создающих узор.

Закрашивание области с помощью мозаичной кисти включает три компонента: содержимое, базовую мозаику и выходную область.

Компоненты TileBrush с одним фрагментом
Компоненты TileBrush с TileMode фрагмента
Компоненты мозаичного TileBrush

Область вывода — это закрашиваемая область, например, Fill для Ellipse или Background для Button. В следующих разделах описаны другие два компонента 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.

Различные параметры растяжения 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.
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.

На следующем рисунке показана разница между выводом 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;

В следующем примере размер мозаик 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;

Поведение заполнения

TileBrush создает шаблон заполнения, когда его базовая мозаика не полностью заполняет область вывода и задан режим заполнения, отличный от None. Когда фрагмент мозаичной кисти не полностью заполняет область вывода, свойство TileMode указывает, должен ли базовый фрагмент дублироваться для заполнения области вывода, и если да, то как. Свойство TileMode принимает следующие значения, определенные перечислением TileMode:

None: рисуется только базовая мозаика.
Tile: рисуется базовая мозаика, а оставшееся пространство заполняется ее повторением так, чтобы правый край фрагмента примыкал к левому краю следующего, аналогично для нижнего и верхнего краев.
FlipX: аналогично Tile, но разные столбцы мозаики зеркально отражаются по горизонтали.
FlipY: аналогично Tile, но разные строки мозаики зеркально отражаются по вертикали.
Комбинация FlipXY: сочетание FlipX и FlipY.

На следующем рисунке показаны другие режимы заполнения.

Различные параметры TileMode для TileBrush

В следующем примере изображение используется для закраски прямоугольника шириной в 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;

См. также

Share via

Общие сведения о TileBrush

Необходимые компоненты

Закрашивание области с помощью мозаики

Содержимое кисти

Базовая мозаика

Размер базовой мозаики

Поведение заполнения

См. также

Задачи

Основные понятия

Ссылки

Другие ресурсы

Дополнительные ресурсы