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.