Comment : peindre une zone avec un dégradé radial

Mise à jour : novembre 2007

Cet exemple indique comment utiliser la classe RadialGradientBrush pour peindre une zone avec un dégradé radial.

Exemple

L'exemple suivant utilise un RadialGradientBrush pour peindre un rectangle avec un gradient radial qui passe du jaune au rouge, au bleu, puis au vert citron.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace BrushesIntroduction
{
    public class RadialGradientBrushSnippet : Page
    {
        public RadialGradientBrushSnippet()
        {
            Title = "RadialGradientBrush Example";
            Background = Brushes.White;
            Margin = new Thickness(20);

            //
            // Create a RadialGradientBrush with four gradient stops.
            //
            RadialGradientBrush radialGradient = new RadialGradientBrush();

            // Set the GradientOrigin to the center of the area being painted.
            radialGradient.GradientOrigin = new Point(0.5, 0.5);

            // Set the gradient center to the center of the area being painted.
            radialGradient.Center = new Point(0.5, 0.5);

            // Set the radius of the gradient circle so that it extends to
            // the edges of the area being painted.
            radialGradient.RadiusX = 0.5; 
            radialGradient.RadiusY = 0.5;

            // Create four gradient stops.
            radialGradient.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
            radialGradient.GradientStops.Add(new GradientStop(Colors.Red, 0.25));
            radialGradient.GradientStops.Add(new GradientStop(Colors.Blue, 0.75));
            radialGradient.GradientStops.Add(new GradientStop(Colors.LimeGreen, 1.0));

            // Freeze the brush (make it unmodifiable) for performance benefits.
            radialGradient.Freeze();

            // Create a rectangle and paint it with the 
            // RadialGradientBrush.
            Rectangle aRectangle = new Rectangle();
            aRectangle.Width = 200;
            aRectangle.Height = 100;
            aRectangle.Fill = radialGradient;

            StackPanel mainPanel = new StackPanel();
            mainPanel.Children.Add(aRectangle);
            Content = mainPanel;

        }

    }
}

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="RadialGradientBrush Example"
  Background="White" Margin="20">
  <StackPanel>

    <!-- This rectangle is painted with a radial 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">
          <RadialGradientBrush.GradientStops>
            <GradientStop Color="Yellow" Offset="0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1" />
          </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
  </StackPanel>
</Page>

L'illustration suivante montre le gradient de l'exemple précédent. Les points du dégradé sont mis en surbrillance.

Remarque :

Les exemples fournis dans cette rubrique utilisent le système de coordonnées par défaut pour définir des points de contrôle. 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.

Pour des exemples RadialGradientBrush supplémentaires, consultez Pinceaux, exemple. Pour plus d'informations sur les dégradés et sur d'autres types de pinceaux, consultez Vue d'ensemble de la peinture avec des couleurs unies ou des dégradés.