Visão geral de TileBrush
TileBrush Os objetos fornecem um grande controle sobre como uma área é pintada com uma imagem, Drawingou Visual. Este tópico descreve como usar TileBrush recursos para obter mais controle sobre como um ImageBrush, DrawingBrushou VisualBrush pinta uma área.
Pré-requisitos
Para entender esse tópico, é útil entender como usar os recursos básicos da ImageBrushclasse , DrawingBrushou VisualBrush . Para obter uma introdução a esses tipos, consulte Pintando com imagens, desenhos e visuais.
Pintando uma área com blocos
ImageBrush, , DrawingBrushsão VisualBrush tipos de TileBrush objetos. Pincéis de bloco oferecem um alto nível de controle sobre como uma área é pintada com uma imagem, desenho ou visual. Por exemplo, em vez de apenas pintar uma área com uma única imagem alongada, você pode pintá-la com uma série de blocos de imagens que criam um padrão.
Pintar uma área com um pincel de bloco envolve três componentes: o conteúdo, o bloco de base e a área de saída.
Componentes de um TileBrush com um único bloco
Componentes de um TileBrush com um TileMode de bloco
A área de saída é a área que está sendo pintada, como a de um ou a Fill de um EllipseButton.Background As próximas seções descrevem os outros dois componentes de um TileBrusharquivo .
Conteúdo do pincel
Existem três tipos diferentes de e cada tinta com um tipo diferente de TileBrush conteúdo.
Se o pincel for um ImageBrush, este conteúdo é uma imagem A ImageSource propriedade especifica o conteúdo do ImageBrush.
Se o pincel for um , este conteúdo é um DrawingBrushdesenho. A Drawing propriedade especifica o conteúdo do DrawingBrusharquivo .
Se o pincel for um , esse conteúdo é um VisualBrushvisual. A Visual propriedade especifica o conteúdo do VisualBrusharquivo .
Você pode especificar a posição e as dimensões do TileBrush conteúdo usando a Viewbox propriedade, embora seja comum deixar o Viewbox conjunto com seu valor padrão. Por padrão, o é configurado para conter completamente o Viewbox conteúdo do pincel. Para obter mais informações sobre como configurar o Viewbox, consulte a página de Viewbox propriedades.
O bloco de base
Um TileBrush projeta seu conteúdo em um bloco base. A Stretch propriedade controla como TileBrush o conteúdo é estendido para preencher o bloco base. A Stretch propriedade aceita os seguintes valores, definidos pela Stretch enumeração:
None: O conteúdo do pincel não é esticado para preencher a telha.
Fill: O conteúdo do pincel é dimensionado para se ajustar ao bloco. Como a altura e a largura do conteúdo são dimensionadas de forma independente, a taxa de proporção original do conteúdo pode não ser preservada. Ou seja, o conteúdo do pincel pode ser distorcido para preencher completamente o bloco de saída.
Uniform: O conteúdo do pincel é dimensionado para que caiba completamente dentro do bloco. A taxa de proporção do conteúdo é preservada.
UniformToFill: O conteúdo do pincel é dimensionado para que ele preencha completamente a área de saída, preservando a proporção original do conteúdo.
A imagem a seguir ilustra as diferentes Stretch configurações.
No exemplo a 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;
' 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
Por padrão, um gera um TileBrush único bloco (o bloco base) e estende esse bloco para preencher completamente a área de saída. Você pode alterar o tamanho e a posição do bloco base definindo as Viewport propriedades e ViewportUnits .
Tamanho do bloco de base
A Viewport propriedade determina o tamanho e a posição do bloco base, e a ViewportUnits propriedade determina se o Viewport é especificado usando coordenadas absolutas ou relativas. Se forem relativas, as coordenadas 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 seu canto inferior direito. Para especificar que a propriedade usa coordenadas absolutas, defina a ViewportViewportUnits propriedade como Absolute.
A ilustração a seguir mostra a diferença na saída entre a TileBrush com relativo versus absoluto ViewportUnits. Observe que cada ilustração mostra um padrão lado a lado. A seção a seguir descreve como especificar o padrão de bloco.
No exemplo a seguir, uma imagem é usada para criar um bloco que tem largura e altura de 50%. O bloco de 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;
' 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
O próximo exemplo define os blocos de um ImageBrush como 25 por 25 pixels independentes de dispositivo. ViewportUnits Por serem absolutos, os ImageBrush azulejos são sempre de 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;
' 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
Comportamento de agrupamento lado a lado
A TileBrush produz um padrão lado a lado quando seu bloco base não preenche completamente a área de saída e um modo lado a lado é None especificado. Quando o bloco de um pincel de bloco não preenche completamente a área de saída, sua TileMode propriedade especifica se o bloco base deve ser duplicado para preencher a área de saída e, em caso afirmativo, como o bloco base deve ser duplicado. A TileMode propriedade aceita os seguintes valores, definidos pela TileMode enumeração:
None: Apenas o bloco de base é desenhado.
Tile: O bloco de base é desenhado e a área restante é preenchida repetindo o bloco de base de tal forma que a borda direita de um bloco seja adjacente à borda esquerda do próximo e, da mesma forma, para inferior e superior.
FlipX: O mesmo que Tile, mas colunas alternativas de blocos são invertidas horizontalmente.
FlipY: O mesmo que Tile, mas linhas alternativas de blocos são invertidas verticalmente.
A imagem a seguir ilustra os modos diferentes de preenchimento lado a lado.
No exemplo a seguir, uma imagem é usada para pintar um retângulo que tem 100 pixels de largura e 100 pixels de altura. Ao definir o pincel foi Viewport definido como 0,0,0.25,0.25, a telha de base do pincel é feita para ser 1/4 da área de saída. O pincel está TileMode definido como FlipXY. de modo que ele preenche o retângulo com linhas de blocos.
<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
Confira também
.NET Desktop feedback
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de