Vue d'ensemble des formes et dessins de base dans WPF
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);
// Add a Line Element
myLine = gcnew 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);
L'image suivante affiche le rendu de Line.
.gif "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"/>
Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Namespace SDKSample
Partial Public Class SetBackgroundColorOfShapeExample
Inherits Page
Public Sub New()
' Create a StackPanel to contain the shape.
Dim myStackPanel As New StackPanel()
' Create a red Ellipse.
Dim myEllipse As New Ellipse()
' Create a SolidColorBrush with a red color to fill the
' Ellipse with.
Dim mySolidColorBrush As New SolidColorBrush()
' Describes the brush's color using RGB values.
' Each value has a range of 0-255.
mySolidColorBrush.Color = Color.FromArgb(255, 255, 255, 0)
myEllipse.Fill = mySolidColorBrush
myEllipse.StrokeThickness = 2
myEllipse.Stroke = Brushes.Black
' Set the width and height of the Ellipse.
myEllipse.Width = 200
myEllipse.Height = 100
' Add the Ellipse to the StackPanel.
myStackPanel.Children.Add(myEllipse)
Me.Content = myStackPanel
End Sub
End Class
End Namespace
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, 255, 0);
myEllipse.Fill = mySolidColorBrush;
myEllipse.StrokeThickness = 2;
myEllipse.Stroke = Brushes.Black;
// Set the width and height of the Ellipse.
myEllipse.Width = 200;
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.
.png "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.
.gif "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 Extensible Application Markup Language (XAML), 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.
.png "Illustration d'un chemin d'accès")
La chaîne d'attribut Data commence par la commande « move to », indiquée par M, qui définit le point de départ du tracé dans le système de coordonnées du Canvas. Les paramètres de données Path respectent la casse. Le M majuscule indique un emplacement absolu pour le nouveau point actuel. Un m minuscule indiquerait des coordonnées relatives. Le premier segment est une courbe de Bézier cubique qui commence à (100,200) et se termine à (400,175). Elle est représentée à l'aide des deux points de contrôle (100,25) et (400,350). Ce segment est indiqué par la commande C dans la chaîne d'attribut Data. Encore une fois, le C majuscule indique un chemin d'accès absolu ; le c minuscule indiquerait un chemin d'accès relatif.
Le deuxième segment commence par une commande « lineto » horizontale absolue indiquée par H, qui spécifie une ligne dessinée entre le point de terminaison du sous-tracé précédent (400,175) et un nouveau point de terminaison (280,175). Étant donné qu'il s'agit d'une commande « lineto » horizontale, la valeur spécifiée est une coordonnée d'abscisse.
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.
.png "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.
.png "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 :
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.
Dans l'exemple suivant, un Polygon est utilisé pour dessiner un très petit triangle de (0,0) à (0,1) à (1,1). Les valeurs de l'objet Polygon (Width et Height) sont définies sur 100, et sa propriété d'étirement a la valeur Remplissage. 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 en cours de transformation. CenterX et CenterY possèdent la valeur par défaut 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.
.gif "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.
Voir aussi
Concepts
Optimisation des performances : graphiques 2D et acquisition d'images
Vue d'ensemble de la peinture avec des couleurs unies ou des dégradés