Vue d'ensemble des formes et dessins de base dans WPF

Article
08/22/2008

Mise à jour : novembre 2007

Cette rubrique donne une vue d'ensemble de la façon de dessiner avec les objets Shape. Un Shape est un type de UIElement qui vous permet de dessiner une forme à l'écran. Du fait qu'il s'agit d'éléments d'interface graphique, les objets Shape peuvent être utilisés à l'intérieur d'éléments Panel et de la plupart des contrôles.

Windows Presentation Foundation (WPF) offre plusieurs couches d'accès aux services graphiques et de rendu. À la couche supérieure, les objets Shape sont faciles à utiliser et fournissent de nombreuses fonctionnalités utiles, telles que la disposition et la participation dans le système d'événement Windows Presentation Foundation (WPF).

Cette rubrique comprend les sections suivantes.

Objets de forme
Utilisation des chemins d'accès et des géométries
Peindre des formes
Formes étirables
Transformation de formes
Rubriques connexes

Objets de forme

WPF fournit plusieurs objets Shape prêt à l'emploi. Tous les objets de forme héritent de la classe Shape. Les objets de forme disponibles incluent Ellipse, Line, Path, Polygon, Polyline, et Rectangle. Les objets Shape partagent les propriétés communes suivantes.

Stroke : décrit comment le plan de la forme est peint.
StrokeThickness : décrit l'épaisseur du plan de la forme.
Fill : décrit la manière dont l'intérieur de la forme est peint.
Propriétés de données pour spécifier des coordonnées et des sommets, mesurés en pixels indépendants du périphérique.

Du fait qu'ils dérivent de UIElement, les objets de forme peuvent être utilisés à l'intérieur de panneaux et de la plupart des contrôles. Le panneau Canvas est un choix particulièrement judicieux pour créer des dessins complexes, car il prend en charge le positionnement absolu de ses objets enfants.

La classe Line vous permet de dessiner une ligne entre deux points. L'exemple suivant affiche plusieurs méthodes pour spécifier des coordonnées de ligne et des propriétés de trait.

<Canvas Height="300" Width="300">

  <!-- Draws a diagonal line from (10,10) to (50,50). -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    Stroke="Black"
    StrokeThickness="4" />

  <!-- Draws a diagonal line from (10,10) to (50,50)
       and moves it 100 pixels to the right. -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    StrokeThickness="4"
    Canvas.Left="100">
    <Line.Stroke>
      <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
        <RadialGradientBrush.GradientStops>
          <GradientStop Color="Red" Offset="0" />
          <GradientStop Color="Blue" Offset="0.25" />
        </RadialGradientBrush.GradientStops>
      </RadialGradientBrush>
    </Line.Stroke>
  </Line>

  <!-- Draws a horizontal line from (10,60) to (150,60). -->
  <Line
     X1="10" Y1="60"
     X2="150" Y2="60"
     Stroke="Black"
     StrokeThickness="4"/>

</Canvas>

' Add a Line Element
Dim myLine As New Line()
myLine.Stroke = Brushes.LightSteelBlue
myLine.X1 = 1
myLine.X2 = 50
myLine.Y1 = 1
myLine.Y2 = 50
myLine.HorizontalAlignment = HorizontalAlignment.Left
myLine.VerticalAlignment = VerticalAlignment.Center
myLine.StrokeThickness = 2
myGrid.Children.Add(myLine)

// Add a Line Element
myLine = new Line();
myLine.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
myLine.X1 = 1;
myLine.X2 = 50;
myLine.Y1 = 1;
myLine.Y2 = 50;
myLine.HorizontalAlignment = HorizontalAlignment.Left;
myLine.VerticalAlignment = VerticalAlignment.Center;
myLine.StrokeThickness = 2;
myGrid.Children.Add(myLine);

L'image suivante affiche le rendu de Line.

Illustration d'une ligne

Bien que la classe Line fournisse une propriété Fill, sa définition n'a aucun effet car un Line n'a aucune zone.

Une autre forme commune est l'Ellipse. Créez une Ellipse en définissant les propriétés Width et Height de la forme. Pour dessiner un cercle, spécifiez une Ellipse dont les valeurs Width et Height sont identiques.

<Ellipse
Fill="Yellow"
Height="100"
Width="200"
StrokeThickness="2"
Stroke="Black"/>

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

namespace SDKSample
{
    public partial class SetBackgroundColorOfShapeExample : Page
    {
        public SetBackgroundColorOfShapeExample()
        {
            // Create a StackPanel to contain the shape.
            StackPanel myStackPanel = new StackPanel();

            // Create a red Ellipse.
            Ellipse myEllipse = new Ellipse();

            // Create a SolidColorBrush with a red color to fill the 
            // Ellipse with.
            SolidColorBrush mySolidColorBrush = new SolidColorBrush();

            // Describes the brush's color using RGB values. 
            // Each value has a range of 0-255.
            mySolidColorBrush.Color = Color.FromArgb(255, 255, 0, 0);
            myEllipse.Fill = mySolidColorBrush; 

            // Set the width and height of the Ellipse.
            myEllipse.Width = 100;
            myEllipse.Height = 100;

            // Add the Ellipse to the StackPanel.
            myStackPanel.Children.Add(myEllipse);

            this.Content = myStackPanel;
        }

    }
}

L'image suivant montre un exemple de rendu de Ellipse.

Illustration d'une ellipse

Utilisation des chemins d'accès et des géométries

La classe Path vous permet de dessiner des courbes et des formes complexes. Ces courbes et formes sont décrites en utilisant des objets Geometry. Pour utiliser un Path, vous créez une Geometry et l'utilisez pour définir la propriété Data de l'objet Path.

Le choix d'objets Geometry est varié. Les classes LineGeometry, RectangleGeometryet EllipseGeometry décrivent des formes relativement simples. Pour créer plus de formes complexes ou créer des courbes, utilisez une PathGeometry.

PathGeometry et PathSegments

Les objets PathGeometry sont composés d'un ou plusieurs objets PathFigure; chaque PathFigure représentant une "illustration" ou forme différente. Chaque PathFigure est elle-même composée d'un ou plusieurs objets PathSegment, chacun représentant une partie connectée de l'illustration ou forme. Les types de segment sont les suivants : LineSegment, BezierSegmentet ArcSegment.

Dans l'exemple suivant, un Path est utilisé pour dessiner une courbe de Bézier quadratique.

<Path Stroke="Black" StrokeThickness="1">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure StartPoint="10,100">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <QuadraticBezierSegment Point1="200,200" Point2="300,100" />
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>
        </PathFigureCollection>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

L'image suivant affiche la forme rendue.

Illustration d'un chemin d'accès

Pour plus d'informations sur PathGeometry et les autres classes Geometry, consultez Vue d'ensemble de Geometry.

Syntaxe XAML abrégée

En XAML (Extensible Application Markup Language), vous pouvez utiliser également une syntaxe abrégée spéciale pour décrire un Path. Dans l'exemple suivant, la syntaxe abrégée est utilisée pour dessiner une forme complexe.

<Path Stroke="DarkGoldenRod" StrokeThickness="3" 
Data="M 100,200 C 100,25 400,350 400,175 H 280" />

L'image suivante affiche le rendu de Path.

Illustration d'un chemin d'accès

La chaîne d'attribut Data commence par la commande "moveto", indiquée par M, qui établit un point de départ pour le chemin d'accès dans le système de coordonnées du Canvas. Les paramètres de données Path sont sensibles à la casse. Le M majuscule indique un emplacement absolu pour le nouveau point actuel. Un m minuscule indiquerait des coordonnées relatives. The first segment is a cubic Bezier curve beginning at (100,200) and ending at (400,175), drawn using the two control points (100,25) and (400,350). This segment is indicated by the C command in the Data attribute string. Encore une fois, le C majuscule indique un chemin d'accès absolu ; le c minuscule indiquerait un chemin d'accès relatif.

The second segment begins with an absolute horizontal "lineto" command H, which specifies a line drawn from the preceding subpath's endpoint (400,175) to a new endpoint (280,175). Because it is a horizontal "lineto" command, the value specified is an x-coordinate.

Pour la syntaxe de chemin d'accès complet, consultez la référence Data et Comment : créer une forme à l'aide d'un PathGeometry.

Peindre des formes

Les objets Brush sont utilisés pour peindre les Stroke et Fill d'une forme. Dans l'exemple suivant, le trait et le remplissage d'une Ellipse sont indiqués. Notez que l'entrée valide pour les propriétés de pinceau peuvent être un mot clé ou une valeur de couleur hexadécimale. Pour plus d'informations sur les mots clés de couleur disponibles, consultez les propriétés de la classe Colors dans l'espace de noms System.Windows.Media.

<Canvas Background="LightGray"> 
   <Ellipse
      Canvas.Top="50"
      Canvas.Left="50"
      Fill="#FFFFFF00"
      Height="75"
      Width="75"
      StrokeThickness="5"
      Stroke="#FF0000FF"/>
</Canvas>

L'image suivante affiche le rendu de Ellipse.

Ellipse

Vous pouvez également utiliser la syntaxe d'élément de propriété pour créer explicitement un objet SolidColorBrush pour peindre la forme avec une couleur unie.

<!-- This polygon shape uses pre-defined color values for its Stroke and
     Fill properties. 
     The SolidColorBrush's Opacity property affects the fill color in 
     this case by making it slightly transparent (opacity of 0.4) so 
     that it blends with any underlying color. -->
   
<Polygon
    Points="300,200 400,125 400,275 300,200"
    Stroke="Purple" 
    StrokeThickness="2">
    <Polygon.Fill>
       <SolidColorBrush Color="Blue" Opacity="0.4"/>
    </Polygon.Fill>
</Polygon>

L'illustration suivante montre la forme rendue.

Illustration de SolidColorBrush

Vous pouvez également peindre le trait d'une forme ou la remplir avec des dégradés, des images, des modèles, etc. Pour plus d'informations, consultez Vue d'ensemble de la peinture avec des couleurs unies ou des dégradés.

Formes étirables

Les classes Line, Path, Polygon, Polyline et Rectangle ont toutes une propriété Stretch. Cette propriété détermine comment le contenu d'un objet Shape (la forme à dessiner) est étiré pour remplir l'espace de disposition de l'objet Shape. L'espace de disposition d'un objet Shape est la quantité d'espace alloué à la Shape par le système de disposition, à cause d'un paramètre explicite Width et Height, ou à cause de ses paramètres HorizontalAlignment et VerticalAlignment. Pour plus d'informations sur la disposition dans Windows Presentation Foundation, consultez la vue d'ensemble Système de disposition.

La propriété Stretch peut prendre l'une des valeurs suivantes :

None : le contenu de l'objet Shape n'est pas étiré.
Fill : le contenu de l'objet Shape est étiré pour remplir son espace de disposition. Les proportions ne sont pas conservées.
Uniform : le contenu de l'objet Shape est étiré autant que possible pour remplir son espace de disposition tout en conservant ses proportions d'origine.
UniformToFill : le contenu de l'objet Shape est étiré pour remplir complètement son espace de disposition tout en conservant ses proportions d'origine.

Notez que lorsque le contenu d'un objet Shape est étiré, le plan de l'objet Shape est peint après l'étirement.

In the following example, a Polygon is used to draw a very small triangle from (0,0) to (0,1) to (1,1). The Polygon object's Width and Height are set to 100, and its stretch property is set to Fill. En conséquence, le contenu de l'objet Polygon (le triangle) est étiré pour remplir le plus grand espace.

...
<Polygon
  Points="0,0 0,1 1,1"
  Fill="Blue"
  Width="100"
  Height="100"
  Stretch="Fill"
  Stroke="Black"
  StrokeThickness="2" />
...

...
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(new Point(0,0));
myPointCollection.Add(new Point(0,1));
myPointCollection.Add(new Point(1,1));

Polygon myPolygon = new Polygon();
myPolygon.Points = myPointCollection;
myPolygon.Fill = Brushes.Blue;
myPolygon.Width = 100;
myPolygon.Height = 100;
myPolygon.Stretch = Stretch.Fill;
myPolygon.Stroke = Brushes.Black;
myPolygon.StrokeThickness = 2;
...

Transformation de formes

La classe Transform fournit le moyen de transformer des formes en plans à deux dimensions. Les différents types de transformations incluent la rotation (RotateTransform), l'échelle (ScaleTransform), l'inclinaison (SkewTransform) et la translation (TranslateTransform).

Une transformation commune à s'appliquer à une forme est une rotation. Pour faire pivoter une forme, créez une RotateTransform et spécifiez son Angle. Un Angle de 45 fait pivoter l'élément de 45 degrés dans le sens des aiguilles d'une montre; un angle de 90 fait pivoter l'élément de 90 degrés dans le sens des aiguilles d'une montre; et ainsi de suite. Définissez les propriétés CenterX et CenterY si vous souhaitez contrôler le point à partir duquel l'élément est pivoté. Ces valeurs de propriété sont exprimées dans l'espace de coordonnées de l'élément qui est transformé. CenterX et CenterY ont des valeurs par défaut de zéro. Enfin, appliquez la RotateTransform à l'élément. Si vous ne souhaitez pas que la transformation affecte la disposition, définissez la propriété RenderTransform de la forme.

Dans l'exemple suivant, une RotateTransform est utilisée pour faire pivoter une forme de 45 degrés à partir du coin supérieur gauche de la forme (0,0).

<!-- Rotates the Polyline 45 degrees about the point (0,0). -->
<Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" 
  Stroke="Blue" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50">
  <Polyline.RenderTransform>
    <RotateTransform CenterX="0" CenterY="0" Angle="45" />
  </Polyline.RenderTransform>
</Polyline>

Dans l'exemple suivant, une autre forme est pivotée de 45 degrés, mais cette fois-ci, elle est pivotée à partir du point (25,50).

<!-- Rotates the Polyline 45 degrees about its center. -->
<Polyline 
  Points="25,25 0,50 25,75 50,50 25,25 25,0" 
  Stroke="Blue" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50"
  RenderTransformOrigin="0.5,0.5">
  <Polyline.RenderTransform>
    <RotateTransform Angle="45" />
  </Polyline.RenderTransform>
</Polyline>

L'illustration suivante montre les résultats de l'application des deux transformations.

Rotations de 45 degrés avec différents points centraux

Dans les exemples précédents, une transformation unique a été appliquée à chaque objet de forme. Pour appliquer plusieurs transformations à une forme (ou tout autre élément d'interface), utilisez un TransformGroup.