Cenni preliminari sugli oggetti TileBrushTileBrush Overview

TileBrush gli oggetti forniscono un elevato livello di controllo sulla modalità di disegno di un'area con un'immagine Drawing, o Visual.TileBrush objects provide you with a great deal of control over how an area is painted with an image, Drawing, or Visual. In questo argomento viene descritto come utilizzare TileBrush funzionalità per ottenere un maggiore controllo sul modo in un ImageBrush, DrawingBrush, o VisualBrush disegna un'area.This topic describes how to use TileBrush features to gain more control over how an ImageBrush, DrawingBrush, or VisualBrush paints an area.

PrerequisitiPrerequisites

Per comprendere questo argomento, è utile comprendere come utilizzare le funzionalità di base di ImageBrush, DrawingBrush, o VisualBrush classe.To understand this topic, it's helpful to understand how to use the basic features of the ImageBrush, DrawingBrush, or VisualBrush class. Per un'introduzione a questi tipi, vedere il il disegno di immagini, disegni e oggetti visivi.For an introduction to these types, see the Painting with Images, Drawings, and Visuals.

Disegno di un'area mediante tesserePainting an Area with Tiles

ImageBrush, DrawingBrush, vengono VisualBrush sono tipi di TileBrush oggetti.ImageBrush, DrawingBrush, are VisualBrush are types of TileBrush objects. I pennelli tessera forniscono un elevato livello di controllo sulla modalità di disegno di un'area con un'immagine, un disegno o un oggetto visivo.Tile brushes provide you with a great deal of control over how an area is painted with an image, drawing, or visual. Anziché ad esempio disegnare un'area con una sola immagine estesa, è possibile usare una serie di immagini affiancate che creano un modello.For example, instead of just painting an area with a single stretched image, you can paint an area with a series of image tiles that create a pattern.

Il disegno di un'area con un pennello tessera include tre componenti: il contenuto, la tessera di base e l'area di output.Painting an area with a tile brush involves three components: content, the base tile, and the output area.

Componenti di TileBrushTileBrush components
Componenti di un oggetto TileBrush con una sola tesseraComponents of a TileBrush with a single tile

Componenti di TileBrush affiancatoComponents of a tiled TileBrush
Componenti di un oggetto TileBrush con TileMode impostata su TileComponents of a TileBrush with a TileMode of Tile

L'area di output è l'area da disegnare, ad esempio il Fill di un Ellipse o Background di un Button.The output area is the area being painted, such as the Fill of an Ellipse or the Background of a Button. Nelle sezioni successive vengono descritti i due componenti di un TileBrush.The next sections describe the other two components of a TileBrush.

Contenuto del pennelloBrush Content

Esistono tre tipi diversi di TileBrush , ciascuno con un diverso tipo di contenuto.There are three different types of TileBrush and each paints with a different type of content.

È possibile specificare la posizione e dimensioni di TileBrush contenuto utilizzando il Viewbox proprietà, anche se in genere di lasciare il Viewbox impostato sul valore predefinito.You can specify the position and dimensions of TileBrush content by using the Viewbox property, although it is common to leave the Viewbox set to its default value. Per impostazione predefinita, il Viewbox è configurato per contenere completamente il contenuto del pennello.By default, the Viewbox is configured to completely contain the brush's contents. Per ulteriori informazioni sulla configurazione di Viewbox, vedere il Viewbox pagina delle proprietà.For more information about configuring the Viewbox, see the Viewbox property page.

Tessera di baseThe Base Tile

Oggetto TileBrush proietta il relativo contenuto nella tessera di base.A TileBrush projects its content onto a base tile. Il Stretch proprietà controlla la modalità TileBrush contenuto viene estesa per riempire la tessera di base.The Stretch property controls how TileBrush content is stretched to fill the base tile. Il Stretch proprietà accetta i valori seguenti, definiti per il Stretch enumerazione:The Stretch property accepts the following values, defined by the Stretch enumeration:

  • None: Il contenuto del pennello non viene estesa per riempire il riquadro.None: The brush's content is not stretched to fill the tile.

  • Fill: Il contenuto del pennello viene adattato il riquadro.Fill: The brush's content is scaled to fit the tile. Poiché l'altezza e la larghezza del contenuto vengono ridimensionate in modo indipendente, è possibile che non vengano mantenute le proporzioni originali del contenuto.Because the content's height and width are scaled independently, the original aspect ratio of the content might not be preserved. In altre parole, il contenuto del pennello potrebbe essere distorto per adattarsi completamente alla tessera di output.That is, the brush's content might be warped in order to completely fill the output tile.

  • Uniform: Il contenuto del pennello è ridimensionato in modo da adattarlo completamente il riquadro.Uniform: The brush's content is scaled so that it fits completely within the tile. Vengono mantenute le proporzioni del contenuto.The content's aspect ratio is preserved.

  • UniformToFill: Il contenuto del pennello viene ridimensionato in modo da riempire l'area di output completamente mantenendo le proporzioni originali del contenuto.UniformToFill: The brush's content is scaled so that it completely fills the output area while preserving the content's original aspect ratio.

L'immagine seguente illustra i diversi Stretch impostazioni.The following image illustrates the different Stretch settings.

Different TileBrush Stretch settingsDifferent TileBrush Stretch settings

Nell'esempio seguente, il contenuto di un ImageBrush è impostato in modo che non si adatta per riempire l'area di output.In the following example, the content of an ImageBrush is set so that it does not stretch to fill the output area.

<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

Per impostazione predefinita, un TileBrush genera un singolo riquadro (la tessera di base) e la estende in modo completamente riempire l'area di output.By default, a TileBrush generates a single tile (the base tile) and stretches that tile to completely fill the output area. È possibile modificare le dimensioni e la posizione della tessera di base tramite l'impostazione di Viewport e ViewportUnits proprietà.You can change the size and position of the base tile by setting the Viewport and ViewportUnits properties.

Dimensioni della tessera di baseBase Tile Size

Il Viewport proprietà determina le dimensioni e la posizione della tessera di base e ViewportUnits proprietà determina se il Viewport viene specificata utilizzando coordinate assolute o relative.The Viewport property determines the size and position of the base tile, and the ViewportUnits property determines whether the Viewport is specified using absolute or relative coordinates. Se le coordinate sono relative, sono condizionate dalle dimensioni dell'area di output.If the coordinates are relative, they are relative to the size of the output area. I punti (0,0) e (1,1) rappresentano rispettivamente l'angolo superiore sinistro e l'angolo inferiore destro dell'area di output.The point (0,0) represents the top left corner of the output area, and (1,1) represents the bottom right corner of the output area. Per specificare che il Viewport proprietà utilizza coordinate assolute, impostare il ViewportUnits proprietà Absolute.To specify that the Viewport property uses absolute coordinates, set the ViewportUnits property to Absolute.

Nella figura seguente mostra la differenza nell'output tra un TileBrush relative e absolute ViewportUnits.The following illustration shows the difference in output between a TileBrush with relative versus absolute ViewportUnits. Si noti che ogni immagine illustra un modello affiancato. Nella sezione successiva viene indicato come specificare il modello di affiancamento.Notice that the illustrations each show a tiled pattern; the next section describes how to specify tile pattern.

Absolute and Relative Viewport UnitsAbsolute and Relative Viewport Units

Nell'esempio seguente viene usata un'immagine per creare una tessera di larghezza pari al 50% dell'altezza.In the following example, an image is used to create a tile that has a width and height of 50%. La tessera di base viene posizionata nel punto (0,0) dell'area di output.The base tile is located at (0,0) of the output area.

<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

Nell'esempio seguente imposta i riquadri di un ImageBrush a 25 per 25 device independent pixel.The next example sets the tiles of an ImageBrush to 25 by 25 device independent pixels. Poiché il ViewportUnits sono assoluti, il ImageBrush riquadri sono sempre 25 per 25 pixel, indipendentemente dalle dimensioni dell'area da disegnare.Because the ViewportUnits are absolute, the ImageBrush tiles are always 25 by 25 pixels, regardless of the size of the area being painted.

<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 dell'affiancamentoTiling Behavior

Oggetto TileBrush genera un modello affiancato quando la tessera di base non viene riempita completamente l'area di output e una modalità di affiancamento quindi None specificato.A TileBrush produces a tiled pattern when its base tile does not completely fill the output area and a tiling mode other then None is specified. Se tessera un pennello non occupa completamente l'area di output, relativo TileMode proprietà specifica se la tessera di base deve essere duplicata per riempire l'area di output e, in tal caso, come la tessera di base deve essere duplicato.When a tile brush's tile does not completely fill the output area, its TileMode property specifies whether the base tile should be duplicated to fill the output area and, if so, how the base tile should be duplicated. Il TileMode proprietà accetta i valori seguenti, definiti per il TileMode enumerazione:The TileMode property accepts the following values, defined by the TileMode enumeration:

  • None: Solo la tessera di base viene disegnata.None: Only the base tile is drawn.

  • Tile: Viene disegnata la tessera di base e l'area rimanente viene riempita ripetendo la tessera di base in modo che il bordo destro di una tessera sia adiacente al bordo sinistro della successiva e che lo allo stesso modo per superiore e inferiore.Tile: The base tile is drawn and the remaining area is filled by repeating the base tile such that the right edge of one tile is adjacent to the left edge of the next, and similarly for bottom and top.

  • FlipX: Uguale Tile, ma le colonne alternate di tessere vengono capovolte orizzontalmente.FlipX: The same as Tile, but alternate columns of tiles are flipped horizontally.

  • FlipY: Uguale Tile, ma le righe alternate di tessere vengono capovolte verticalmente.FlipY: The same as Tile, but alternate rows of tiles are flipped vertically.

  • FlipXY: Una combinazione di FlipX e FlipY.FlipXY: A combination of FlipX and FlipY.

L'immagine seguente illustra le diverse modalità di affiancamento.The following image illustrates the different tiling modes.

Different TileBrush TileMode settingsDifferent TileBrush TileMode settings

Nell'esempio seguente viene usata un'immagine per disegnare un rettangolo di larghezza e altezza pari a 100 pixel.In the following example, an image is used to paint a rectangle that is 100 pixels wide and 100 pixels tall. Impostando il pennello Viewport è stata impostata per 0,0,0.25,0.25, del pennello tessera di base a 1/4 dell'area di output.By setting the brush's Viewport has been set to 0,0,0.25,0.25, the brush's base tile is made to be 1/4 of the output area. Il pennello TileMode è impostato su FlipXY.The brush's TileMode is set to FlipXY. In questo modo il rettangolo viene riempito con righe di tessere.so that it fills the rectangle with rows of tiles.

<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

Vedere ancheSee Also

ImageBrush
DrawingBrush
VisualBrush
TileBrush
Disegnare con oggetti Image, Drawing e VisualPainting with Images, Drawings, and Visuals
Procedure relative alle proprietàHow-to Topics
Cenni preliminari sugli oggetti FreezableFreezable Objects Overview
Esempio ImageBrushImageBrush Sample
Esempio VisualBrushVisualBrush Sample