Notes
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Cette rubrique donne une vue d’ensemble de la façon de dessiner avec des Shape objets. Un Shape est un type de UIElement qui vous permet de dessiner une forme à l'écran. Comme il s'agit d'éléments d'interface utilisateur, les objets Shape peuvent être utilisés à l'intérieur des é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. Au niveau de la couche supérieure, Shape les objets sont faciles à utiliser et fournissent de nombreuses fonctionnalités utiles, telles que la disposition et la participation au système d’événements Windows Presentation Foundation (WPF).
Les types de formes se trouvent dans l'espace de noms Windows.Shapes. Les types liés à la géométrie se trouvent dans l'espace de noms System.Windows.Media.
Objets de forme
WPF fournit un certain nombre d’objets prêts à l’emploi Shape . Tous les objets de forme héritent de la classe Shape. Les objets de forme disponibles incluent Ellipse, Line, Path, Polygon, Polylineet Rectangle. Shape les objets partagent les propriétés communes suivantes.
Stroke: décrit comment le contour de la forme est peint.
StrokeThickness: décrit l’épaisseur du contour de la forme.
Fill: Décrit comment l’intérieur de la forme est peint.
Propriétés de données pour spécifier des coordonnées et des sommets, mesurées en pixels indépendants de l’appareil.
Étant donné qu’ils dérivent de UIElement, les objets de forme peuvent être utilisés à l’intérieur de panneaux et la plupart des contrôles. Le Canvas panneau 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 Line classe vous permet de dessiner une ligne entre deux points. L’exemple suivant montre plusieurs façons de spécifier les coordonnées de ligne et les 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
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);
// 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
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)
L'image ci-dessous montre le rendu Line.
Bien que la classe Line fournisse une propriété Fill, la modifier n’a aucun effet, car un Line n’a pas de zone.
Une autre forme courante est le Ellipse. Créez un Ellipse en définissant les propriétés de Width et Height de la forme. Pour dessiner un cercle, spécifiez un Ellipse dont les valeurs de Width et Height sont égales.
<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, 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;
}
}
}
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
L’image suivante montre un exemple de rendu Ellipse.
Utilisation de chemins et de géométries
La Path classe vous permet de dessiner des courbes et des formes complexes. Ces courbes et formes sont décrites à l’aide d’objets Geometry . Pour utiliser un Path, vous créez un Geometry et l’utilisez pour définir la propriété Path de l’objet Data.
Il existe une variété d’objets Geometry parmi lesquels choisir. Les classes LineGeometry, RectangleGeometry, et EllipseGeometry décrivent des formes relativement simples. Pour créer des formes plus complexes ou créer des courbes, utilisez un PathGeometry.
Géométrie de tracé et Segments de tracé
PathGeometry les objets sont constitués d’un ou plusieurs PathFigure objets ; chacun PathFigure représente une « figure » ou une forme différente. Chacun PathFigure est lui-même composé d’un ou plusieurs PathSegment objets, chacun représentant une partie connectée de la figure ou de la forme. Les types de segments sont les suivants : LineSegment, BezierSegmentet ArcSegment.
Dans l’exemple suivant, un Path est utilisé pour dessiner une courbe de Bezier 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 suivante montre la forme rendue.
Pour plus d’informations sur PathGeometry et les autres Geometry classes, consultez la Vue d’ensemble de la Géométrie.
Syntaxe abrégée XAML
Dans XAML (Extensible Application Markup Language), vous pouvez également utiliser 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 montre un rendu Path.
La Data chaîne d’attribut commence par la commande « moveto », indiquée par la lettre M, qui établit un point de départ pour le chemin dans le système de coordonnées du Canvas. Path les paramètres de données respectent la casse. La lettre majuscule M indique un emplacement absolu pour le nouveau point de départ. Un m minuscule indiquerait des coordonnées relatives. Le premier segment est une courbe de Bezier cubique commençant à (100 200) et se terminant à (400 175), dessiné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 . Là encore, la capitale C indique un chemin absolu ; la minuscule c indiquerait un chemin relatif.
Le deuxième segment commence par une commande « lineto » horizontale absolue, qui spécifie une ligne dessinée à partir du point de terminaison du sous-chemin précédent (400 175) vers un nouveau point de terminaison (280 175). Étant donné qu’il s’agit d’une commande horizontale « lineto », la valeur spécifiée est une coordonnée x.
Pour obtenir la syntaxe complète du chemin, consultez la Data référence et Créer une forme à l’aide d’un PathGeometry.
Peinture de formes
Brush les objets sont utilisés pour peindre les objets d’une Stroke forme et Fill. Dans l’exemple suivant, le contour et le remplissage d’un Ellipse sont spécifiés. Notez que l’entrée valide pour les propriétés de pinceau peut ê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 Colors classe dans l’espace System.Windows.Media de noms.
<Canvas Background="LightGray">
<Ellipse
Canvas.Top="50"
Canvas.Left="50"
Fill="#FFFFFF00"
Height="75"
Width="75"
StrokeThickness="5"
Stroke="#FF0000FF"/>
</Canvas>
L'image ci-dessous montre le rendu Ellipse.
Vous pouvez également utiliser la syntaxe d’élément de propriété pour créer explicitement un SolidColorBrush objet 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.
Vous pouvez également peindre le contour ou le remplissage d’une forme avec des dégradés, des images, des motifs, etc. Pour plus d’informations, consultez la vue d’ensemble de la peinture avec des couleurs solides et des dégradés.
Formes extensibles
Les classes Line, Path, Polygon, Polyline et Rectangle ont toutes une propriété Stretch. Cette propriété détermine comment le contenu d’un Shape objet (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 Shape allouée par le système de disposition, en raison d’un paramètre explicite Width et d’un paramètre Height, ou à cause de ses paramètres HorizontalAlignment et VerticalAlignment. Pour plus d’informations sur la disposition dans Windows Presentation Foundation, consultez Vue d’ensemble de la disposition .
La propriété Stretch peut prendre l'une des valeurs suivantes :
Fill : le Shape contenu de l'objet est étiré pour remplir son espace de mise en page. Les proportions ne sont pas conservées.
Uniform: les contenus de l’objet Shape sont étirés autant que possible pour remplir leur espace de disposition tout en préservant leur rapport d’aspect d’origine.
UniformToFill: le contenu de l'objet Shape est étiré pour remplir complètement son espace de disposition tout en conservant son rapport d'aspect d'origine.
Notez que, lorsque le contenu d’un Shape objet est étiré, le contour 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 allant de (0,0) à (0,1) puis à (1,1). Les propriétés Polygon et Width de l'objet Height sont définies à 100, et sa propriété stretch est définie à Remplir. Par conséquent, le contenu de l’objet Polygon (le triangle) est étiré pour remplir l’espace plus grand.
<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 Transform classe fournit les moyens de transformer des formes dans un plan bidimensionnel. Les différents types de transformation incluent la rotation (RotateTransform), l’échelle (ScaleTransform), l’asymétrie (SkewTransform) et la traduction (TranslateTransform).
Une transformation courante à appliquer à une forme est une rotation. Pour faire pivoter une forme, créez une RotateTransform et spécifiez son Angle. Une Angle valeur de 45 degrés fait pivoter l’élément de 45 degrés dans le sens des aiguilles d’une montre ; un angle de 90 degrés 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 autour duquel l’élément est fait pivoter. 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 ont des valeurs par défaut de zéro. Enfin, appliquez le RotateTransform à l'élément. Si vous ne souhaitez pas que la transformation affecte la disposition, définissez la propriété de la forme RenderTransform.
Dans l’exemple suivant, un RotateTransform est utilisé 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, elle est pivotée au sujet 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.
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 utilisateur), utilisez un TransformGroup.
Voir aussi
- Graphiques et images 2D
- Vue d’ensemble de la peinture avec des couleurs unies ou des dégradés
- Vue d’ensemble de la géométrie
- Guide pratique : Ma première application de bureau WPF
- Vue d'ensemble de l’animation
Collaborer avec nous sur GitHub
La source de ce contenu se trouve sur GitHub, où vous pouvez également créer et examiner les problèmes et les demandes de tirage. Pour plus d’informations, consultez notre guide du contributeur.
.NET Desktop feedback