Vue d'ensemble de TileBrush

Les objets TileBrush vous offrent de nombreux outils pour contrôler la peinture d'une zone à l'aide d'une image, d'un Drawing ou d'un Visual. Cette rubrique décrit comment utiliser les fonctionnalités de TileBrush pour mieux contrôler la façon de peindre une zone avec ImageBrush, DrawingBrush ou VisualBrush.

Cette rubrique comprend les sections suivantes.

• Composants requis
• Peinture d'une zone avec des mosaïques
• Contenu d'un pinceau
• La mosaïque de base
• Rubriques connexes

Composants requis

Pour aborder cette rubrique, il est important de comprendre comment utiliser les fonctionnalités de base de la classe ImageBrush, DrawingBrush ou VisualBrush. Pour une introduction à ces types, consultez Peinture avec des objets d'image, de dessin et visuels.

Peinture d'une zone avec des mosaïques

ImageBrush, DrawingBrush ou VisualBrush sont des types d'objets TileBrush. Les pinceaux mosaïque vous permettent de bien contrôler la peinture d'une zone à l'aide d'une image, d'un dessin ou d'un visuel. Par exemple, au lieu de simplement peindre une zone à l'aide d'une seule image étendue, vous pouvez utiliser une série de mosaïques d'images qui créent un motif.

La peinture d'une zone à l'aide d'un pinceau mosaïque fait appel à trois composants : le contenu, la mosaïque de base et la zone de sortie.

Composants d'un TileBrush avec une seule mosaïque

Composants d'un TileBrush avec un TileMode de Tile

La zone de sortie correspond à la zone en cours de peinture, telle que le Fill d'une Ellipse ou l' Background d'un Button. Les sections suivantes décrivent les deux autres composants d'un TileBrush.

Contenu d'un pinceau

Il existe trois différents types de TileBrush, qui peignent chacun avec un type de contenu différent.

• Si le pinceau est un ImageBrush, ce contenu est une image. La propriété ImageSource spécifie le contenu de l'ImageBrush.

• Si le pinceau est un DrawingBrush, ce contenu est un dessin. La propriété Drawing spécifie le contenu du DrawingBrush.

• Si le pinceau est un VisualBrush, ce contenu est un visuel. La propriété Visual spécifie le contenu du VisualBrush.

Vous pouvez spécifier la position et les dimensions du contenu de TileBrush à l'aide de la propriété Viewbox, bien qu'il soit courant de conserver la valeur par défaut de Viewbox. Par défaut, Viewbox est configuré de manière à englober intégralement le contenu du pinceau. Pour plus d'informations sur la configuration de Viewbox, consultez la page de propriétés de Viewbox.

La mosaïque de base

Un TileBrush projette son contenu sur une mosaïque de base. La propriété Stretch contrôle la manière dont le contenu de TileBrush est étiré pour remplir la mosaïque de base. La propriété Stretch accepte les valeurs suivantes, qui sont définies par l'énumération Stretch :

• None: Le contenu du pinceau n'est pas étiré pour remplir la mosaïque.

• Fill : le contenu du pinceau est mis à l'échelle pour s'ajuster à la mosaïque. Comme la hauteur et la largeur du contenu sont mises à l'échelle indépendamment, les proportions d'origine du contenu ne sont pas nécessairement conservées. Autrement dit, le contenu du pinceau peut être retracé pour remplir complètement la mosaïque de sortie.

• Uniform : le contenu du pinceau est mis à l'échelle de manière à s'ajuster complètement à la mosaïque. Les proportions du contenu sont conservées.

• UniformToFill : le contenu du pinceau est mis à l'échelle de manière à remplir complètement la zone de sortie mais conserve ses proportions d'origine.

L'illustration suivante montre les différents paramètres Stretch.

Dans l'exemple suivant, le contenu d'un ImageBrush est défini afin qu'il ne soit pas étiré de manière à remplir la zone de sortie.

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

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

Par défaut, un TileBrush génère une seule mosaïque (la mosaïque de base) et étire cette mosaïque afin qu'elle remplisse entièrement la zone de sortie. Vous pouvez modifier la taille et la position de la mosaïque de base en définissant les propriétés Viewport et ViewportUnits.

Taille de la mosaïque de base

La propriété Viewport détermine si la taille et la position de la mosaïque de base, et la propriété ViewportUnits détermine si Viewport est spécifié à l'aide de coordonnées absolues ou relatives. Si les coordonnées sont relatives, elles le sont par rapport à la taille de la zone de sortie. Le point (0,0) représente l'angle supérieur gauche de la zone de sortie, et (1,1) en représente l'angle inférieur droit. Pour spécifier que la propriété Viewport utilise des coordonnées absolues, attribuez la valeur Absolute à la propriété ViewportUnits.

L'illustration suivante montre la différence de résultat selon que vous définissez la propriété ViewportUnits d'un TileBrush comme étant relative ou absolue. Remarquez que chaque illustration représente un modèle en mosaïque ; la section suivante explique comment spécifier un tel modèle.

Dans l'exemple suivant, une image est utilisée pour créer une mosaïque qui a une largeur et une hauteur de 50 %. La mosaïque de base se trouve à (0,0) de la zone de sortie.

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

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

Dans l'exemple suivant, la valeur définie pour les mosaïques ImageBrush est de 25 par 25 pixels indépendants du périphérique. Comme les ViewportUnits sont définies comme absolues, les mosaïques ImageBrush sont toujours de 25 sur 25 pixels, quelle que soit la taille de la zone peinte.

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

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

Comportement des mosaïques

TileBrush produit un modèle en mosaïque lorsque sa mosaïque de base ne remplit pas entièrement la zone de sortie et qu'un mode de mosaïque autre que None est spécifié. Lorsque le résultat d'un pinceau mosaïque ne remplit pas complètement la zone de sortie, sa propriété TileMode spécifie si la mosaïque de base doit être reproduite pour effectuer ce remplissage et, si tel est le cas, comment effectuer la reproduction. La propriété TileMode accepte les valeurs suivantes, qui sont définies par l'énumération TileMode :

• None : seule la mosaïque de base est dessinée.

• Tile : la mosaïque de base est dessinée et la zone restante est remplie par reproduction de la mosaïque de base de telle sorte que le bord droit d'une mosaïque soit adjacent au bord gauche de la suivante, le même principe étant appliqué aux bords du haut et du bas.

• FlipX : identique à Tile, à cette différence près que les autres colonnes de mosaïques sont retournées horizontalement.

• FlipY : identique à Tile à cette différence près que les autres rangées de mosaïques sont retournées verticalement.

• FlipXY : combinaison de FlipX et FlipY.

L'illustration suivante montre les différents modes de mosaïque.

Dans l'exemple suivant, une image est utilisée pour peindre un rectangle de 100 pixels de large sur 100 pixels de haut. Les valeurs définies pour Viewport étant 0,0,0.25,0.25, la mosaïque de base du pinceau est égale à 1/4 de la zone de sortie. La propriété TileMode du pinceau a la valeur FlipXY. afin qu'il remplisse le rectangle de lignes de mosaïques.

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

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

Voir aussi

Référence

ImageBrush

DrawingBrush

VisualBrush

TileBrush

Concepts

Peinture avec des objets d'image, de dessin et visuels

Vue d'ensemble des objets Freezable

Autres ressources

Rubriques "Comment" relatives aux pinceaux

ImageBrush, exemple (page éventuellement en anglais)

VisualBrush, exemple (page éventuellement en anglais)