Partager via


Vue d'ensemble des pinceaux WPF

Les éléments sont visibles sur votre écran car ils ont été peints avec un pinceau. Par exemple, un pinceau est utilisé pour définir l'arrière-plan d'un bouton, le premier plan du texte et le remplissage d'une forme. Cette rubrique présente les concepts relatifs à la peinture avec les pinceaux Windows Presentation Foundation (WPF) et contient des exemples. Les pinceaux vous permettent de peindre des objets user interface (UI) avec n'importe quoi, des couleurs simples et unies aux ensembles complexes de modèles et d'images.

Peinture avec un pinceau

Un Brush « peint » une zone avec sa sortie. Les différents pinceaux ont différents types de sortie. Certains peignent une zone avec une couleur unie, d'autres avec un dégradé, un modèle, une image ou un dessin. L'illustration suivante montre des exemples de chaque type de Brush.

Exemples de pinceaux

Types de pinceau

La plupart des objets visuels vous permettent de spécifier la façon dont ils sont peints. Le tableau ci-dessous répertorie quelques propriétés et objets courants avec lesquels vous pouvez utiliser un Brush.

Classe

Propriétés de pinceaux

Border

BorderBrush, Background

Control

Background, Foreground

Panel

Background

Pen

Brush

Shape

Fill, Stroke

TextBlock

Background

Les sections suivantes décrivent les différents types de Brush et fournissent un exemple de chaque type.

Peinture avec une couleur unie

SolidColorBrush peint une zone avec un Color uni. Il existe plusieurs moyens de spécifier le Color d'un SolidColorBrush : par exemple, vous pouvez spécifier ses canaux alpha, rouge, bleu et vert ou utiliser l'une des couleurs prédéfinies comprises dans la classe Colors.

L'exemple suivant utilise SolidColorBrush pour peindre l'objet Fill d'un Rectangle. L'illustration suivante montre le rectangle peint.

Rectangle peint à l'aide de SolidColorBrush

Rectangle peint avec un SolidColorBrush

            Dim exampleRectangle As New Rectangle()
            exampleRectangle.Width = 75
            exampleRectangle.Height = 75

            ' Create a SolidColorBrush and use it to
            ' paint the rectangle.
            Dim myBrush As New SolidColorBrush(Colors.Red)
            exampleRectangle.Fill = myBrush
Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a SolidColorBrush and use it to
// paint the rectangle.
SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
exampleRectangle.Fill = myBrush;
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
</Rectangle>

Pour plus d'informations sur la classe SolidColorBrush, consultez Vue d'ensemble de la peinture avec des couleurs unies ou des dégradés.

Peinture avec un dégradé linéaire

LinearGradientBrush peint une zone avec un dégradé linéaire. Un dégradé linéaire mélange deux couleurs, ou plus, sur une ligne, l'axe de dégradé. Vous utilisez les objets GradientStop pour spécifier les couleurs du dégradé et leurs positions.

L'exemple suivant utilise LinearGradientBrush pour peindre l'objet Fill d'un Rectangle. L'illustration suivante montre le rectangle peint.

Rectangle peint à l'aide de LinearGradientBrush

Rectangle peint avec un LinearGradientBrush

            Dim exampleRectangle As New Rectangle()
            exampleRectangle.Width = 75
            exampleRectangle.Height = 75

            ' Create a LinearGradientBrush and use it to
            ' paint the rectangle.
            Dim myBrush As New LinearGradientBrush()
            myBrush.GradientStops.Add(New GradientStop(Colors.Yellow, 0.0))
            myBrush.GradientStops.Add(New GradientStop(Colors.Orange, 0.5))
            myBrush.GradientStops.Add(New GradientStop(Colors.Red, 1.0))

            exampleRectangle.Fill = myBrush
Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a LinearGradientBrush and use it to
// paint the rectangle.
LinearGradientBrush myBrush = new LinearGradientBrush();
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));

exampleRectangle.Fill = myBrush;
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <LinearGradientBrush>
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.5" />
      <GradientStop Color="Red" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Pour plus d'informations sur la classe LinearGradientBrush, consultez Vue d'ensemble de la peinture avec des couleurs unies ou des dégradés.

Peinture avec un dégradé radial

RadialGradientBrush peint une zone avec un dégradé radial. Un dégradé radial mélange deux couleurs, ou plus, sur un cercle. Comme avec la classe LinearGradientBrush, vous utilisez les objets GradientStop pour spécifier les couleurs du dégradé et leurs positions.

L'exemple suivant utilise RadialGradientBrush pour peindre l'objet Fill d'un Rectangle. L'illustration suivante montre le rectangle peint.

Rectangle peint à l'aide de RadialGradientBrush

Rectangle peint avec un RadialGradientBrush

            Dim exampleRectangle As New Rectangle()
            exampleRectangle.Width = 75
            exampleRectangle.Height = 75

            ' Create a RadialGradientBrush and use it to
            ' paint the rectangle.
            Dim myBrush As New RadialGradientBrush()
            myBrush.GradientOrigin = New Point(0.75, 0.25)
            myBrush.GradientStops.Add(New GradientStop(Colors.Yellow, 0.0))
            myBrush.GradientStops.Add(New GradientStop(Colors.Orange, 0.5))
            myBrush.GradientStops.Add(New GradientStop(Colors.Red, 1.0))

            exampleRectangle.Fill = myBrush
Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a RadialGradientBrush and use it to
// paint the rectangle.
RadialGradientBrush myBrush = new RadialGradientBrush();
myBrush.GradientOrigin = new Point(0.75, 0.25);
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));

exampleRectangle.Fill = myBrush;
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <RadialGradientBrush GradientOrigin="0.75,0.25">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.5" />
      <GradientStop Color="Red" Offset="1.0" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Pour plus d'informations sur la classe RadialGradientBrush, consultez Vue d'ensemble de la peinture avec des couleurs unies ou des dégradés.

Peinture avec une image

ImageBrush peint une zone avec ImageSource.

L'exemple suivant utilise ImageBrush pour peindre l'objet Fill d'un Rectangle. L'illustration suivante montre le rectangle peint.

Rectangle peint à l'aide d'une image

Rectangle peint avec un ImageBrush

            Dim exampleRectangle As New Rectangle()
            exampleRectangle.Width = 75
            exampleRectangle.Height = 75

            ' Create an ImageBrush and use it to
            ' paint the rectangle.
            Dim myBrush As New ImageBrush()
            myBrush.ImageSource = New BitmapImage(New Uri("sampleImages\pinkcherries.jpg", UriKind.Relative))

            exampleRectangle.Fill = myBrush
Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create an ImageBrush and use it to
// paint the rectangle.
ImageBrush myBrush = new ImageBrush();
myBrush.ImageSource = 
    new BitmapImage(new Uri(@"sampleImages\pinkcherries.jpg", UriKind.Relative));

exampleRectangle.Fill = myBrush;
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\pinkcherries.jpg"  />
  </Rectangle.Fill>
</Rectangle>

Pour plus d'informations sur la classe ImageBrush, consultez Peinture avec des objets d'image, de dessin et visuels.

Peinture avec un dessin

DrawingBrush peint une zone avec un Drawing. Un Drawing peut contenir des formes, des images, du texte et des médias.

L'exemple suivant utilise DrawingBrush pour peindre l'objet Fill d'un Rectangle. L'illustration suivante montre le rectangle peint.

Rectangle peint à l'aide de DrawingBrush

Rectangle peint avec un DrawingBrush

            Dim exampleRectangle As New Rectangle()
            exampleRectangle.Width = 75
            exampleRectangle.Height = 75

            ' Create a DrawingBrush and use it to
            ' paint the rectangle.
            Dim myBrush As New DrawingBrush()

            Dim backgroundSquare As New GeometryDrawing(Brushes.White, Nothing, New RectangleGeometry(New Rect(0, 0, 100, 100)))

            Dim aGeometryGroup As New GeometryGroup()
            aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(0, 0, 50, 50)))
            aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(50, 50, 50, 50)))

            Dim checkerBrush As New LinearGradientBrush()
            checkerBrush.GradientStops.Add(New GradientStop(Colors.Black, 0.0))
            checkerBrush.GradientStops.Add(New GradientStop(Colors.Gray, 1.0))

            Dim checkers As New GeometryDrawing(checkerBrush, Nothing, aGeometryGroup)

            Dim checkersDrawingGroup As New DrawingGroup()
            checkersDrawingGroup.Children.Add(backgroundSquare)
            checkersDrawingGroup.Children.Add(checkers)

            myBrush.Drawing = checkersDrawingGroup
            myBrush.Viewport = New Rect(0, 0, 0.25, 0.25)
            myBrush.TileMode = TileMode.Tile

            exampleRectangle.Fill = myBrush
Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a DrawingBrush and use it to
// paint the rectangle.
DrawingBrush myBrush = new DrawingBrush();

GeometryDrawing backgroundSquare =
    new GeometryDrawing(
        Brushes.White,
        null,
        new RectangleGeometry(new Rect(0, 0, 100, 100)));

GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));

LinearGradientBrush checkerBrush = new LinearGradientBrush();
checkerBrush.GradientStops.Add(new GradientStop(Colors.Black, 0.0));
checkerBrush.GradientStops.Add(new GradientStop(Colors.Gray, 1.0));

GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);

DrawingGroup checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(backgroundSquare);
checkersDrawingGroup.Children.Add(checkers);

myBrush.Drawing = checkersDrawingGroup;
myBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
myBrush.TileMode = TileMode.Tile;

exampleRectangle.Fill = myBrush;
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="White">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,100,100" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

          <GeometryDrawing>
            <GeometryDrawing.Geometry>
              <GeometryGroup>
                <RectangleGeometry Rect="0,0,50,50" />
                <RectangleGeometry Rect="50,50,50,50" />
              </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Brush>
              <LinearGradientBrush>
                <GradientStop Offset="0.0" Color="Black" />
                <GradientStop Offset="1.0" Color="Gray" />
              </LinearGradientBrush>
            </GeometryDrawing.Brush>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Rectangle.Fill>
</Rectangle>

Pour plus d'informations sur la classe DrawingBrush, consultez Peinture avec des objets d'image, de dessin et visuels.

Peinture avec un visuel

VisualBrush peint une zone avec un objet Visual. Voici quelques exemples d'objets visuels : Button, Page et MediaElement. VisualBrush vous permet également de projeter du contenu d'une partie de votre application vers une autre zone, ce qui est très utile pour créer des effets de reflet et agrandir des zones de l'écran.

L'exemple suivant utilise VisualBrush pour peindre l'objet Fill d'un Rectangle. L'illustration suivante montre le rectangle peint.

Rectangle peint à l'aide de VisualBrush

Rectangle peint avec un VisualBrush

            Dim exampleRectangle As New Rectangle()
            exampleRectangle.Width = 75
            exampleRectangle.Height = 75

            ' Create a VisualBrush and use it
            ' to paint the rectangle.
            Dim myBrush As New VisualBrush()

            '
            ' Create the brush's contents.
            '
            Dim aPanel As New StackPanel()

            ' Create a DrawingBrush and use it to
            ' paint the panel.
            Dim myDrawingBrushBrush As New DrawingBrush()
            Dim aGeometryGroup As New GeometryGroup()
            aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(0, 0, 50, 50)))
            aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(50, 50, 50, 50)))
            Dim checkerBrush As New RadialGradientBrush()
            checkerBrush.GradientStops.Add(New GradientStop(Colors.MediumBlue, 0.0))
            checkerBrush.GradientStops.Add(New GradientStop(Colors.White, 1.0))
            Dim checkers As New GeometryDrawing(checkerBrush, Nothing, aGeometryGroup)
            myDrawingBrushBrush.Drawing = checkers
            aPanel.Background = myDrawingBrushBrush

            ' Create some text.
            Dim someText As New TextBlock()
            someText.Text = "Hello, World"
            Dim fSizeConverter As New FontSizeConverter()
            someText.FontSize = CDbl(fSizeConverter.ConvertFromString("10pt"))
            someText.Margin = New Thickness(10)

            aPanel.Children.Add(someText)

            myBrush.Visual = aPanel
            exampleRectangle.Fill = myBrush

            Rectangle exampleRectangle = new Rectangle();
            exampleRectangle.Width = 75;
            exampleRectangle.Height = 75;

            // Create a VisualBrush and use it
            // to paint the rectangle.
            VisualBrush myBrush = new VisualBrush();

            //
            // Create the brush's contents.
            //
            StackPanel aPanel = new StackPanel();

            // Create a DrawingBrush and use it to
            // paint the panel.
            DrawingBrush myDrawingBrushBrush = new DrawingBrush();
            GeometryGroup aGeometryGroup = new GeometryGroup();
            aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
            aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));
            RadialGradientBrush checkerBrush = new RadialGradientBrush();
            checkerBrush.GradientStops.Add(new GradientStop(Colors.MediumBlue, 0.0));
            checkerBrush.GradientStops.Add(new GradientStop(Colors.White, 1.0));
            GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);
            myDrawingBrushBrush.Drawing = checkers;
            aPanel.Background = myDrawingBrushBrush;

            // Create some text.
            TextBlock someText = new TextBlock();
            someText.Text = "Hello, World";
            FontSizeConverter fSizeConverter = new FontSizeConverter();
            someText.FontSize = (double)fSizeConverter.ConvertFromString("10pt");
            someText.Margin = new Thickness(10);

            aPanel.Children.Add(someText);

            myBrush.Visual = aPanel;
            exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <VisualBrush TileMode="Tile">
      <VisualBrush.Visual>
        <StackPanel>
          <StackPanel.Background>
            <DrawingBrush>
              <DrawingBrush.Drawing>
                <GeometryDrawing>
                  <GeometryDrawing.Brush>
                    <RadialGradientBrush>
                      <GradientStop Color="MediumBlue" Offset="0.0" />
                      <GradientStop Color="White" Offset="1.0" />
                    </RadialGradientBrush>
                  </GeometryDrawing.Brush>
                  <GeometryDrawing.Geometry>
                    <GeometryGroup>
                      <RectangleGeometry Rect="0,0,50,50" />
                      <RectangleGeometry Rect="50,50,50,50" />
                    </GeometryGroup>
                  </GeometryDrawing.Geometry>
                </GeometryDrawing>
              </DrawingBrush.Drawing>
            </DrawingBrush>
          </StackPanel.Background>
          <TextBlock FontSize="10pt" Margin="10">Hello, World!</TextBlock>
        </StackPanel>
      </VisualBrush.Visual>
    </VisualBrush>
  </Rectangle.Fill>
</Rectangle>

Pour plus d'informations sur la classe VisualBrush, consultez Peinture avec des objets d'image, de dessin et visuels.

Peinture à l'aide des pinceaux système et prédéfinis

Pour des raisons pratiques, Windows Presentation Foundation (WPF) possède un ensemble de pinceaux système et pinceaux prédéfinis que vous pouvez utiliser pour peindre des objets.

Fonctions communes des pinceaux

Les objets Brush ont une propriété Opacity qui peut être utilisée pour rendre un pinceau totalement ou partiellement transparent. Une valeur Opacity de 0 rend le pinceau complètement transparent, tandis qu'une valeur Opacity de 1 indique que le pinceau est complètement opaque. L'exemple suivant utilise la propriété Opacity pour rendre SolidColorBrush opaque à 25 %.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <SolidColorBrush Color="Blue" Opacity="0.25" />
  </Rectangle.Fill>
</Rectangle>
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
SolidColorBrush partiallyTransparentSolidColorBrush
    = new SolidColorBrush(Colors.Blue);
partiallyTransparentSolidColorBrush.Opacity = 0.25;
myRectangle.Fill = partiallyTransparentSolidColorBrush;

Si le pinceau contient des couleurs qui sont partiellement transparentes, la valeur d'opacité de la couleur est multipliée par la valeur d'opacité du pinceau. Par exemple, si un pinceau a une valeur d'opacité de 0,5 et que la couleur utilisée dans le pinceau a également une valeur d'opacité de 0,5, la couleur de sortie a une valeur d'opacité de 0,25.

RemarqueRemarque

Il est plus facile de changer la valeur d'opacité d'un pinceau que celle d'un élément complet par l'intermédiaire de sa propriété UIElement.Opacity.

Vous pouvez faire pivoter, incliner, mettre à l'échelle et traduire le contenu d'un pinceau en utilisant ses propriétés Transform ou RelativeTransform. Pour plus d'informations, consultez Vue d'ensemble des transformations du pinceau.

Puisqu'ils sont des objets Animatable, les objets Brush peuvent être animés. Pour plus d'informations, consultez Vue d'ensemble de l'animation.

Fonctionnalités Freezable

Comme elle hérite de la classe Freezable, la classe Brush fournit plusieurs fonctionnalités spéciales : les objets Brush peuvent être déclarés comme ressources, partagés entre plusieurs objets et clonés. En outre, tous les types Brush, à l'exception de VisualBrush, peuvent être mis en lecture seule pour améliorer les performances et rendus thread-safe.

Pour plus d'informations sur les différentes fonctionnalités fournies par les objets Freezable, consultez Vue d'ensemble des objets Freezable.

Pour plus d'informations sur la raison pour laquelle les objets VisualBrush ne peuvent pas être figés, consultez la page VisualBrush.

Voir aussi

Référence

Brush

Brushes

Concepts

Vue d'ensemble de la peinture avec des couleurs unies ou des dégradés

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

Vue d'ensemble des objets Freezable

Optimisation des performances : autres recommandations

Autres ressources

Brushes, exemple (page éventuellement en anglais)

ImageBrush, exemple (page éventuellement en anglais)

VisualBrush, exemple (page éventuellement en anglais)

Rubriques "Comment" relatives aux pinceaux