Gradients avec XAML

Emploi d'effets de dégradés, avec les fonctions de gradients.

Nous avons vu comment remplir une surface avec une couleur, ou avec une texture. Plus compliqué, mais avec un résultat esthétique étonnant, ces effets.

Ces fonctions sont linéaires ou radiales. Dans le premier cas, l'effet de dégradé suit une ligne. Dans le second il est circulaire.
Elle s'accompagne d'une balise de coloration:

GradientStop

dont les attributs sont la couleur et le décalage dans l'image, Offset est une valeur réelle qui indique le point de départ de coloration.

<GradientStop
  Color="Red"
  Offset="0.20" 
/>

Pour avoir un effet de dégradé, il faut au moins deux couleurs, donc deux balises GradientStop. Avec une balise on aura une couleur uniforme, et on aura autant de couleurs que de balises...
Chaque couleur commence à l'offset indiqué et va jusqu'à l'offset de couleur suivante (du GradientStop suivant), mais entre le départ et la fin d'une couleur, la coloration est dégradée en fonction de la couleur qui suit.

Gradient linéaire

Il s'applique à la surface avec la fonction:

LinearGradientBrush

Il paint une surface en dégradé du coin supérieur gauche au coin inférieur droit.
Cependant, le point de départ et le point d'arrivée peuvent être modifiés avec les propriétés:

StartPoint
Endpoint

A ces propriétés on assigne un couple de coordonnées.

Dans notre exemple, un dégradé rouge et blanc est appliqué à la surface, donc il nous faut deux GradientStops:

<Rectangle
   Width="200"
   Height="100" >
    <Rectangle.Fill>
        <LinearGradientBrush>
             <GradientStop Color="White" Offset="0.50" />
             <GradientStop Color="Red" Offset="0.50" />
        </LinearGradientBrush>
    <Rectangle.Fill>
<Rectangle>

Affichage du rectangle coloré en dégradé:

Voir le code XAML.

Gradient radial

Un dégradé circulaire s'obtient avec la balise:

RadialGradientBrush

Les propriétés sont celles de LineraGradientBrush.
Dans notre exemple, l'offset de la couleur claire sera de 1 pour partir du bord, et celui de la couleur rouge sera de 0.50 pour une épaisseur de dégradé de la moitié du rayon:

<LinearGradientBrush>
      <GradientStop Color="White" Offset="1" />
      <GradientStop Color="Red" Offset="0.50" />
</LinearGradientBrush>

Example:

Voir le code XAML complet.