Como: Definir o tamanho da área lado a lado para um TileBrush

Este exemplo mostra como definir o tamanho lado a lado para um TileBrush. Por padrão, um TileBrush produz um único azulejo que preenche completamente a área que você está pintando. Você pode sobrescrever esse comportamento, definindo as propriedades Viewport e ViewportUnits.

A propriedade Viewport especifica o tamanho lado a lado para um TileBrush. Por padrão, o valor da propriedade Viewport é relativo ao tamanho da área que está sendo pintada. Para fazer a propriedade Viewport especificar um tamanho lado a lado absoluto, defina a propriedade ViewportUnits como Absolute.

Exemplo

O seguinte exemplo usa um ImageBrush, um tipo de TileBrush, para desenhar um retângulo com "azulejos" (lado a lado). O exemplo define cada "azulejo" como 50% por 50% da área de saída (o retângulo). Como resultado, o retângulo é pintado com quatro projeções da imagem.

A ilustração a seguir mostra a saída que o exemplo produz.

//
// Create an ImageBrush and set the size of each
// tile to 50% by 50% of the area being painted. 
// 
ImageBrush relativeTileSizeImageBrush = new ImageBrush();
relativeTileSizeImageBrush.ImageSource =
    new BitmapImage(new Uri(@"sampleImages\cherries_larger.jpg", UriKind.Relative));
relativeTileSizeImageBrush.TileMode = TileMode.Tile;

// Specify the size of the base tile. 
// By default, the size of the Viewport is
// relative to the area being painted,
// so a value of 0.5 indicates 50% of the output
// area.
relativeTileSizeImageBrush.Viewport = new Rect(0, 0, 0.5, 0.5);

// Create a rectangle and paint it with the ImageBrush.
Rectangle relativeTileSizeExampleRectangle = new Rectangle();
relativeTileSizeExampleRectangle.Width = 200;
relativeTileSizeExampleRectangle.Height = 150;
relativeTileSizeExampleRectangle.Stroke = Brushes.LimeGreen;
relativeTileSizeExampleRectangle.StrokeThickness = 1;
relativeTileSizeExampleRectangle.Fill = relativeTileSizeImageBrush;

<!-- The ImageBrush's tiles are set to 50% by 50% of the output area. -->
<Rectangle
  Width="200" Height="150"
  Stroke="LimeGreen" StrokeThickness="1">
  <Rectangle.Fill>
    <ImageBrush
      Viewport="0,0,0.5,0.5"
      TileMode="Tile"
      ImageSource="sampleImages\cherries_larger.jpg" />
  </Rectangle.Fill>
</Rectangle>

O próximo exemplo cria um ImageBrush, define seu Viewport como 0,0,25,25 e sua ViewportUnits para Absolute e usa-o para pintar outro retângulo. Como resultado, o pincel produz "azulejos" (desenhos lado a lado) que possuem uma largura de 25 pixels e uma altura de 25 pixels .

A ilustração a seguir mostra a saída que o exemplo produz.

//
// Create an ImageBrush and set the size of each
// tile to 25 by 25 pixels. 
// 
ImageBrush absoluteTileSizeImageBrush = new ImageBrush();
absoluteTileSizeImageBrush.ImageSource =
     new BitmapImage(new Uri(@"sampleImages\cherries_larger.jpg", UriKind.Relative));
absoluteTileSizeImageBrush.TileMode = TileMode.Tile;

// Specify that the Viewport is to be interpreted as
// an absolute value. 
absoluteTileSizeImageBrush.ViewportUnits = BrushMappingMode.Absolute;

// Set the size of the base tile. Had we left ViewportUnits set
// to RelativeToBoundingBox (the default value), 
// each tile would be 25 times the size of the area being
// painted. Because ViewportUnits is set to Absolute,
// the following line creates tiles that are 25 by 25 pixels.
absoluteTileSizeImageBrush.Viewport = new Rect(0, 0, 25, 25);

// Create a rectangle and paint it with the ImageBrush.
Rectangle absoluteTileSizeExampleRectangle = new Rectangle();
absoluteTileSizeExampleRectangle.Width = 200;
absoluteTileSizeExampleRectangle.Height = 150;
absoluteTileSizeExampleRectangle.Stroke = Brushes.LimeGreen;
absoluteTileSizeExampleRectangle.StrokeThickness = 1;
absoluteTileSizeExampleRectangle.Fill = absoluteTileSizeImageBrush;

<!-- The ImageBrush's tiles are set to 25 by 25 pixels. -->
<Rectangle
  Width="200" Height="150"
  Stroke="LimeGreen" StrokeThickness="1">
  <Rectangle.Fill>
    <ImageBrush
      Viewport="0,0,25,25"
      ViewportUnits="Absolute"
      TileMode="Tile"
      ImageSource="sampleImages\cherries_larger.jpg" />
  </Rectangle.Fill>
</Rectangle>

Os exemplos anteriores são parte de um exemplo maior. For the complete sample, see Exemplo de ImageBrush.

Embora esse exemplo use a classe ImageBrush, o Viewport e as propriedades ViewportUnits se comportam de forma idêntica para os outros objetos TileBrush, ou seja, para DrawingBrush e VisualBrush. Para obter mais informações sobre objetos ImageBrush e os outros objetos TileBrush, consulte Pintura com Imagens, Desenhos e Visuais.

Consulte também

Tarefas

Como: Criar diferentes padrões lado a lado com um TileBrush

Conceitos

Pintura com Imagens, Desenhos e Visuais

Referência

TileBrush