TileBrush Overview

Objetos TileBrush oferecem-lhe uma grande capacidade de controlar como uma área é pintada com uma imagem, Drawing, ou Visual. Este tópico descreve como usar recursos de em TileBrush para obter mais controle sobre como um ImageBrush, DrawingBrush, ou VisualBrush pinta uma área.

Este tópico contém as seguintes seções.

• Pré-requisitos
• Pintando uma área com ladrilhos
• Conteúdo do pincel
• O ladrilho-base
• Tópicos relacionados

Pré-requisitos

Para compreender esse tópico, é útil entender como usar os recursos básicos da classe ImageBrush, DrawingBrush, ou VisualBrush. Para ver uma introdução a esses tipos, consulte Pintura com Imagens, Desenhos e Visuais.

Pintando uma área com ladrilhos

ImageBrush, DrawingBrush, e VisualBrush são tipos de objetos TileBrush. Pincéis de ladrilho oferecem uma grande quantidade de controle sobre como uma área é pintada com uma imagem, desenho, ou visual. Por exemplo, em vez apenas pintar uma área com uma única imagem alongada, você pode pintar uma área com uma série de imagens lado a lado que criam um padrão.

Pintar uma área com um pincel organizar organizar lado a lado a organizar lado a lado envolve três componentes: conteúdo, o bloco gráfico de base e a área de saída.

Componentes de uma TileBrush com uma única peça

Componentes de uma TileBrush com o TileMode definido como Tile

A área de saída é a área que está sendo pintada (p.ex., o Fill de um Ellipse ou o Background de um Button). As seções a seguir descrevem os outros dois componentes de um TileBrush.

Conteúdo do pincel

Há três tipos diferentes de TileBrush e cada um pinta com um tipo diferente de conteúdo.

• Se o pincel for um ImageBrush, esse conteúdo é uma imagem. A propriedade ImageSource especifica o conteúdo do ImageBrush.

• Se o Pincel for um DrawingBrush, esse conteúdo é um desenho. A propriedade Drawing especifica o conteúdo do DrawingBrush.

• Se o pincel for um VisualBrush, esse conteúdo é um visual. A propriedade Visual especifica o conteúdo do VisualBrush.

Você pode especificar a posição e dimensões do conteúdo do TileBrush usando a propriedade Viewbox, embora seja comum deixar a Viewbox com seu valor padrão. Por padrão, a Viewbox está configurada para conter completamente o conteúdo do pincel. Para obter mais informações sobre como configurar a Viewbox, consulte a página de propriedades da Viewbox.

O ladrilho-base

Um TileBrush projeta seu conteúdo em um ladrilho-base. A propriedade Stretch controla como o conteúdo de um TileBrush é esticado para preencher o ladrilho-base. A propriedade Stretch aceita os valores a seguir, definidos pela enumeração Stretch:

• None: O conteúdo do pincel não é esticado para preencher o ladrilho.

• Fill: O conteúdo é dimensionado para encaixar-se no ladrilho. Como a altura e a largura do conteúdo são dimensionadas de forma independente, pode ser que a taxa de proporção original do conteúdo não seja preservada. Ou seja, o conteúdo do pincel pode ser distorcido para preencher completamente o ladrilho de saída.

• Uniform: O conteúdo do pincel é dimensionado para que ele caiba totalmente no ladrilho. O a taxa de proporção do conteúdo é preservada.

• UniformToFill: O conteúdo é dimensionado para que ela preencha completamente a área de saída enquanto preserva da taxa de proporção original do conteúdo.

A imagem a seguir ilustra as diferentes configurações de Stretch.

No exemplo o seguir, o conteúdo de um ImageBrush é definido para que ele não se estique para preencher a área de saída.

<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;

Por padrão, um TileBrush gera um único ladrilho (o ladrilho-base) e estica esse ladrilho para preencher completamente a área de saída. Você pode alterar o tamanho e posição do ladrilho-base definindo as propriedades Viewport e ViewportUnits.

Tamanho do ladrilho-base

A propriedade Viewport determina o tamanho e posição do ladrilho-base, e a propriedade ViewportUnits determina se a Viewport é especificada usando coordenadas absolutas ou relativas. Se as coordenadas forem relativas, eles serão relativas ao tamanho da área de saída. O ponto (0,0) representa o canto superior esquerdo da área de saída e (1,1) representa o canto inferior direito da área de saída. Para especificar que a propriedade Viewport usa coordenadas absolutas, defina a propriedade ViewportUnits como Absolute.

A ilustração a seguir mostra a diferença na saída entre um TileBrush com ViewportUnits relativas versus absolutas. Observe que cada a ilustração mostra um padrão lado-a-lado; a próxima seção descreve como especificar o padrão lado-a-lado.

No exemplo o seguir, uma imagem é usada para criar um ladrilho que tenha uma largura e altura de 50%. O ladrilho-base está localizado em (0,0) da área de saída.

<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;

O exemplo a seguir define os ladrilhos de um ImageBrush como 25 por 25 pixels independentes de dispositivo. Como as ViewportUnits são absolutas, os ladrilhos do ImageBrush sempre são 25 por 25 pixels, independentemente do tamanho da área que está sendo pintada.

<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;

Comportamento dos ladrilhos

Um TileBrush produz um padrão lado-a-lado quando seu ladrilho-base não preencher a área de saída completamente e um modo de preenchimento diferente de None for especificado. Quando o ladirlho de um pincel em ladrilhos não preencher completamente a área de saída, sua propriedade TileMode especifica se o ladrilho-base deve ser duplicado para preencher a área de saída e, em caso afirmativo, como o ladrilho-base deve ser duplicado. A propriedade TileMode aceita os valores a seguir, definidos pela enumeração TileMode:

• None: Somente o ladrilho-base é desenhado.

• Tile: O ladrilho-base é desenhado e a área restante é preenchida por repetição do ladriho-base de forma que a borda direita de um ladrilho seja adjacente à borda esquerda do próximo, e da mesma forma para as bordas inferior e superior.

• FlipX: O mesmo que Tile, mas colunas alternadas de ladrilhos são invertidas horizontalmente.

• FlipY: O mesmo que Tile, mas linhas alternadas de ladrilhos são invertidas verticalmente.

• FlipXY: Uma combinação de FlipX e FlipY.

A imagem a seguir ilustra os modos diferentes de preenchimento.

No exemplo a seguir, uma imagem é usada para pintar um retângulo que tem 100 pixels de altura e 100 pixels de largura. Ao configurar a Viewport do pincel como 0,0,0.25,0.25, o ladrilho-base do pincel ocupa 1/4 da área de saída. TileMode é definido como FlipXY. para que ela preencha o retângulo com linhas de lado a lado.

<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;

Consulte também

Tarefas

Exemplo de ImageBrush

Exemplo de DrawingBrush

Exemplo de VisualBrush

Conceitos

Pintura com Imagens, Desenhos e Visuais

Visão geral sobre objetos Freezable

Referência

ImageBrush

DrawingBrush

VisualBrush

TileBrush

Outros recursos

Brushes How-to Topics