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

Mise à jour : novembre 2007

Cette rubrique décrit comment utiliser les objets SolidColorBrush, LinearGradientBrush et RadialGradientBrush pour peindre avec des couleurs unies, des dégradés linéaires et des dégradés radiaux.

Cette rubrique comprend les sections suivantes.

• Peinture d'une zone avec une couleur unie
• Peinture d'une zone avec un dégradé
• Dégradés linéaires
• Dégradés radiaux
• Spécification de points de dégradé transparents ou partiellement transparents
• Peinture avec des objets d'image, de dessin, de modèle et visuels
• Rubriques connexes

Peinture d'une zone avec une couleur unie

Une des opérations les plus courantes, sur n'importe quelle plateforme, est de peindre une zone de Color unie. Pour effectuer cette tâche, Windows Presentation Foundation (WPF) fournit la classe SolidColorBrush. Les sections suivantes décrivent les différentes manières de peindre avec SolidColorBrush.

Utilisation de SolidColorBrush en "XAML"

Pour peindre une zone d'une couleur unie en XAML, utilisez une des options suivantes.

• Sélectionnez un pinceau de couleur unie prédéfinie par son nom. Par exemple, vous pouvez affecter au Background d'un bouton la valeur "Red" ou "MediumBlue". Pour obtenir la liste des autres pinceaux de couleur unie prédéfinie, consultez les propriétés statiques de la classe Brushes. Voici un exemple :

  <!-- This button's background is painted with a red SolidColorBrush,
       described using a named color. -->
  <Button Background="Red">A Button</Button>
  

• Choisissez une couleur dans la palette de couleurs 32 bits en spécifiant les quantités de rouge, de vert et de bleu à combiner pour obtenir une seule couleur unie. Le format utilisé pour définir une couleur de la palette 32 bits est "#rrvvbb", où rr est un nombre hexadécimal à deux chiffres spécifiant la quantité relative de rouge, vv la quantité de vert et bb la quantité de bleu. De plus, la couleur peut être spécifiée par "#aarrvvbb" où aa spécifie la valeur alpha, ou transparence, de la couleur. Cette approche vous permet de créer des couleurs qui sont partiellement transparentes. Dans l'exemple suivant, Background d'un Button est défini à la valeur rouge entièrement opaque à l'aide de la notation hexadécimale.

  <!-- This button's background is painted with a red SolidColorBrush,
       described using hexadecimal notation. -->
  <Button Background="#FFFF0000">A Button</Button>
  

• Utilisez la syntaxe de balise de propriété pour décrire SolidColorBrush. Cette syntaxe est plus documentée, mais elle vous permet de spécifier des paramètres supplémentaires, tel que l'opacité du pinceau. Dans l'exemple suivant, les propriétés Background de deux éléments Button ont la valeur rouge entièrement opaque. La première couleur du pinceau est décrite à l'aide d'un nom de couleur prédéfinie. La deuxième couleur du pinceau est décrite à l'aide de la notation hexadécimale.

  <!-- Both of these buttons' backgrounds are painted with red 
       SolidColorBrush objects, described using object element
       syntax. -->
  <Button>A Button
  
    <Button.Background>
      <SolidColorBrush Color="Red" />
    </Button.Background>
  </Button>
  
  <Button>A Button
  
    <Button.Background>
      <SolidColorBrush Color="#FFFF0000" />
    </Button.Background>
  </Button>  
  

Peinture avec SolidColorBrush dans du code

Pour peindre une zone d'une couleur unie dans du code, utilisez l'une des options suivantes.

• Utilisez un des pinceaux prédéfinis fournis par la classe Brushes. Dans l'exemple suivant, le Background du Button a la valeur Red.

  Button myButton = new Button();
  myButton.Content = "A Button";
  myButton.Background = Brushes.Red;  
  

• Créez un SolidColorBrush et affectez sa propriété Color à l'aide d'une structure Color. Vous pouvez utiliser une couleur prédéfinie de la classe Colors ou vous pouvez créer une Color à l'aide de la méthode statique FromArgb.

  L'exemple suivant montre comment affecter la propriété Color d'un SolidColorBrush à l'aide d'une couleur prédéfinie.

  Button myButton = new Button();
  myButton.Content = "A Button";
  
  SolidColorBrush mySolidColorBrush = new SolidColorBrush();
  mySolidColorBrush.Color = Colors.Red;
  myButton.Background = mySolidColorBrush;
  

La méthode statique FromArgb vous permet de spécifier les valeurs alpha, rouge, vert et bleu de la couleur. La plage de ces valeurs s'étend en général de 0 à 255. Par exemple, une valeur alpha de 0 indique que la couleur est complètement transparente, tandis qu'une valeur de 255 indique que la couleur est complètement opaque. De même, une valeur de rouge de 0 indique que cette couleur ne contient pas de rouge, tandis qu'une valeur de 255 indique que cette couleur contient la quantité maximum de rouge possible. Dans l'exemple suivant, la couleur d'un pinceau est décrite en spécifiant les valeurs alpha, rouge, vert et bleu.

Pour obtenir des informations sur d'autres manières de spécifier la couleur, consultez la rubrique de référence Color.

Peinture d'une zone avec un dégradé

Les pinceaux à dégradé permettent de peindre une zone avec plusieurs couleurs qui fusionnent le long d'un axe. Vous pouvez les utiliser pour créer des impressions d'ombre et de lumière, afin de donner à vos contrôles une apparence 3D. Vous pouvez aussi les utiliser pour simuler du verre, du chrome, de l'eau et d'autres surfaces lisses. WPF fournit deux types de pinceaux à dégradé : LinearGradientBrush et RadialGradientBrush.

Dégradés linéaires

LinearGradientBrush peint une zone avec un dégradé défini le long d'une ligne, l'axe de dégradé. Vous pouvez spécifier les couleurs du dégradé et leur emplacement le long de l'axe de dégradé à l'aide des objets GradientStop. Vous pouvez également modifier l'axe de dégradé, ce qui vous permet de créer des dégradés horizontaux et verticaux et d'inverser le sens du dégradé. L'axe de dégradé est décrit dans la section suivante. Par défaut, un dégradé est créé en diagonale.

L'exemple suivant affiche le code qui crée un dégradé linéaire de quatre couleurs.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle diagonalFillRectangle = new Rectangle();
diagonalFillRectangle.Width = 200;
diagonalFillRectangle.Height = 100;

// Create a diagonal linear gradient with four stops.   
LinearGradientBrush myLinearGradientBrush =
    new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0,0);
myLinearGradientBrush.EndPoint = new Point(1,1);
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
diagonalFillRectangle.Fill = myLinearGradientBrush;

Ce code génère le dégradé suivant :

Remarque : les exemples de dégradés de cette rubrique utilisent le système de coordonnées par défaut pour définir les points de départ et d'arrivée. Le système de coordonnées par défaut est relatif par rapport à une zone englobante : 0 indique 0 % de la zone englobante, et 1 indique 100 % de la zone englobante. Vous pouvez modifier ce système de coordonnées en affectant à la propriété MappingMode la valeur Absolute. Un système de coordonnées absolues n'est pas relatif par rapport à une zone englobante. Les valeurs sont interprétées directement dans l'espace local.

GradientStop est le bloc de construction de base d'un pinceau à dégradé. Un point de dégradé spécifie une Color à un Offset le long de l'axe de dégradé.

• La propriété Color du point de dégradé spécifie la couleur du point de dégradé. Vous pouvez définir la couleur en utilisant une couleur prédéfinie (fournie par la classe Colors) ou en spécifiant les valeurs ScRVB ou ARVB. En XAML, vous pouvez aussi utiliser une notation hexadécimale pour décrire une couleur. Pour plus d'informations, consultez la structure Color.

• La propriété Offset du point de dégradé définit la position de la couleur du point de dégradé sur l'axe de dégradé. L'offset est un Double dont les valeurs s'étendent de 0 à 1. Plus la valeur de l'offset d'un point de dégradé est proche de 0, plus la couleur est proche de celle du début du dégradé. Plus la valeur de l'offset du dégradé est proche de 1, plus la couleur est proche de la fin du dégradé.

La couleur de chaque point entre deux points de dégradé est interpolée de façon linéaire sous la forme d'une combinaison des couleurs des deux points de dégradé englobants. L'illustration suivante met en évidence les points de dégradé de l'exemple précédent. Les cercles indiquent l'emplacement des points de dégradé et une ligne en pointillés montre l'axe de dégradé.

Le premier point de dégradé spécifie la couleur jaune à un offset de 0.0. Le deuxième point de dégradé spécifie la couleur rouge à un offset de 0.25. Les points situés entre ces deux points de dégradé passent graduellement du jaune au rouge lorsqu'on se déplace de la gauche vers la droite le long de l'axe de dégradé. Le troisième point de dégradé spécifie la couleur bleue à un offset de 0.75. Les points situés entre le deuxième et le troisième point de dégradé passent progressivement du rouge au bleu. Le quatrième point de dégradé spécifie la couleur vert citron à un offset de 1.0. Les points situés entre le troisième et le quatrième point de dégradé passent progressivement du bleu au vert citron.

L'axe de dégradé

Comme mentionné précédemment, les points de dégradé d'un pinceau à dégradé linéaire sont positionnés le long d'une ligne, l'axe de dégradé. Vous pouvez modifier l'orientation et la taille de la ligne à l'aide des propriétés StartPoint et EndPoint du pinceau. En manipulant les propriétés StartPoint et EndPoint du pinceau, vous pouvez créer des dégradés horizontaux et verticaux, inverser le sens du dégradé, concentrer la dispersion du dégradé, etc.

Par défaut, les propriétés StartPoint et EndPoint du pinceau à dégradé linéaire sont relatives par rapport à la zone qui est peinte. Le point (0,0) représente l'angle supérieur gauche de la zone qui est peinte, et (1,1) représente l'angle inférieur droit de la zone qui est peinte. La valeur par défaut de la propriété StartPoint de LinearGradientBrush est (0,0), et la valeur par défaut de EndPoint est (1,1), ce qui crée un dégradé diagonal qui commence à l'angle supérieur gauche et qui s'étend jusqu'à l'angle inférieur droit de la zone qui est peinte. L'illustration suivante représente l'axe de dégradé d'un pinceau à dégradé linéaire avec les valeurs par défaut de StartPoint et EndPoint.

L'exemple suivant montre comment créer un dégradé horizontal en spécifiant les propriétés StartPoint et EndPoint du pinceau. Remarquez que les points de dégradé sont identiques à ceux des exemples précédents ; en modifiant simplement StartPoint et EndPoint, le dégradé est passé de diagonal en horizontal.

<!-- This rectangle is painted with a horizontal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle horizontalFillRectangle = new Rectangle();
horizontalFillRectangle.Width = 200;
horizontalFillRectangle.Height = 100;

// Create a horizontal linear gradient with four stops.   
LinearGradientBrush myHorizontalGradient =
    new LinearGradientBrush();
myHorizontalGradient.StartPoint = new Point(0,0.5);
myHorizontalGradient.EndPoint = new Point(1,0.5);
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
horizontalFillRectangle.Fill = myHorizontalGradient; 

L'illustration suivante montre le dégradé qui est créé. L'axe de dégradé est indiqué par une ligne en pointillés, et les points de dégradé sont indiqués par des cercles.

L'exemple suivant montre comment créer un dégradé vertical.

<!-- This rectangle is painted with a vertical gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle verticalFillRectangle = new Rectangle();
verticalFillRectangle.Width = 200;
verticalFillRectangle.Height = 100;

// Create a vertical linear gradient with four stops.   
LinearGradientBrush myVerticalGradient =
    new LinearGradientBrush();
myVerticalGradient.StartPoint = new Point(0.5,0);
myVerticalGradient.EndPoint = new Point(0.5,1);
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));                
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));        
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
verticalFillRectangle.Fill = myVerticalGradient;  

L'illustration suivante montre le dégradé qui est créé. L'axe de dégradé est indiqué par une ligne en pointillés, et les points de dégradé sont indiqués par des cercles.

Dégradés radiaux

De même que LinearGradientBrush, RadialGradientBrush peint une zone avec des couleurs qui fusionnent le long d'un axe. Les exemples précédents montraient que l'axe d'un pinceau à dégradé linéaire est une ligne droite. Un axe de pinceau à dégradé radial est défini par un cercle ; ses couleurs "rayonnent" de son origine vers l'extérieur.

Dans l'exemple suivant, un pinceau à dégradé radial est utilisé pour peindre l'intérieur d'un rectangle.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush 
      GradientOrigin="0.5,0.5" Center="0.5,0.5" 
      RadiusX="0.5" RadiusY="0.5">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

RadialGradientBrush myRadialGradientBrush = new RadialGradientBrush();
myRadialGradientBrush.GradientOrigin = new Point(0.5,0.5);
myRadialGradientBrush.Center = new Point(0.5,0.5);
myRadialGradientBrush.RadiusX = 0.5;
myRadialGradientBrush.RadiusY = 0.5;
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 100;
myRectangle.Fill = myRadialGradientBrush;

L'illustration suivante montre le dégradé créé dans l'exemple précédent. Les points de dégradé du pinceau sont mis en surbrillance. Notez que, même si les résultats sont différents, les points de dégradé de cet exemple sont identiques aux points de dégradé des précédents exemples de pinceau à dégradé linéaire.

GradientOrigin spécifie le point de départ de l'axe de dégradé d'un pinceau à dégradé radial. L'axe de dégradé rayonne de l'origine du dégradé vers le cercle du dégradé. Le cercle de dégradé d'un pinceau est défini par ses propriétés Center, RadiusX et RadiusY.

L'illustration suivante montre plusieurs dégradés radiaux dont les paramètres GradientOrigin, Center, RadiusX et RadiusY sont différents.

Des objets RadialGradientBrush de paramètres GradientOrigin, Center, RadiusX et RadiusY différents.

Spécification de points de dégradé transparents ou partiellement transparents

Les points de dégradé ne fournissant pas de propriété d'opacité, vous devez spécifier le canal alpha des couleurs à l'aide de la notation hexadécimale ARVB dans le balisage ou utiliser la méthode Color.FromScRgb pour créer des points de dégradé transparents ou partiellement transparents. Les sections suivantes expliquent comment créer des points de dégradé partiellement transparents en XAML et dans du code. Pour plus d'informations sur le paramétrage de l'opacité du pinceau entier, consultez la section Spécification de l'opacité d'un pinceau.

Spécification de l'opacité de la couleur en « XAML »

En XAML, vous utilisez la notation hexadécimale ARVB pour spécifier l'opacité de couleurs individuelles. La notation hexadécimale ARVB utilise la syntaxe suivante :

#aarrvvbb

Dans la ligne précédente, aa représente une valeur hexadécimale à deux chiffres utilisée pour spécifier l'opacité de la couleur. rr, vv et bb représentent chacun une valeur hexadécimale à deux chiffres utilisée pour spécifier les quantités de rouge, de vert et de bleu dans la couleur. Chaque chiffre hexadécimal peut avoir une valeur de 0 à 9 ou de A à F. 0 est la plus petite valeur et F est la plus grande. Une valeur alpha 00 spécifie une couleur qui est totalement transparente, alors qu'une valeur alpha FF crée une couleur qui est totalement opaque. Dans l'exemple suivant, la notation hexadécimale ARVB est utilisée pour spécifier deux couleurs. La première est partiellement transparente (elle a une valeur alpha de x20), tandis que la deuxième est complètement opaque.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0">

      <!-- This gradient stop is partially transparent. -->
      <GradientStop Color="#200000FF" Offset="0.0" />

      <!-- This gradient stop is fully opaque. -->
      <GradientStop Color="#FF0000FF" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Spécification de l'opacité de la couleur dans du code

Lorsque vous utilisez du code, la méthode statique FromArgb vous permet de spécifier une valeur alpha lorsque vous créez une couleur. La méthode prend quatre paramètres de type Byte. Le premier paramètre spécifie le canal alpha de la couleur ; les trois autres paramètres spécifient les valeurs du rouge, du vert et du bleu de la couleur. Chaque valeur doit être comprise entre 0 et 255 inclus. Une valeur alpha de 0 spécifie que la couleur est totalement transparente, tandis qu'une valeur de 255 spécifie que la couleur est totalement opaque. Dans l'exemple suivant, la méthode FromArgb est utilisée pour produire deux couleurs. La première couleur est partiellement transparente (sa valeur alpha est 32), tandis que la deuxième est complètement opaque.

LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();

// This gradient stop is partially transparent.
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(32, 0, 0, 255), 0.0));

// This gradient stop is fully opaque. 
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(255, 0, 0, 255), 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = myLinearGradientBrush;

Vous pouvez également utiliser la méthode FromScRgb, qui vous permet d'utiliser des valeurs ScRVB pour créer une couleur.

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

Les classes ImageBrush, DrawingBrush et VisualBrush vous permettent de peindre une zone avec des objets d'image, de dessin ou visuels. Pour plus d'informations sur la peinture avec des objets d'image, de dessin et de modèle, consultez Peinture avec des objets d'image, de dessin et visuels.

Voir aussi

Concepts

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

Vue d'ensemble des transformations du pinceau

Couches de rendu graphiques

Référence

Brush

SolidColorBrush

LinearGradientBrush

RadialGradientBrush