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 des Shape objets. Il Shape s’agit d’un type qui vous permet de UIElement dessiner une forme à l’écran. Comme il s’agit d’éléments d’interface utilisateur, Shape les objets peuvent être utilisés à l’intérieur Panel d’éléments et 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).
Objets Shape
WPF fournit un certain nombre d’objets prêts à l’emploi Shape . Tous les objets de forme héritent de la Shape classe. Les objets de forme disponibles incluent Ellipse, , LinePolygonPath, , Polyline, et .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.
Des propriétés de données pour spécifier des coordonnées et des sommets, mesurés en dip (device independent pixel).
É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 propriétés du trait et les coordonnées de la ligne.
<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 suivante montre le rendu Line.
Bien que la classe fournisse une Fill propriété, sa Line définition n’a aucun effet, car elle Line n’a pas de zone.
Une autre forme courante est le Ellipse. Créez un Ellipse en définissant les propriétés et Height les propriétés de Width la forme. Pour dessiner un cercle, spécifiez une Ellipse valeur dont Width les valeurs sont Height é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 d’un rendu Ellipse.
Utilisation des tracés et des 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 élément et l’utilisez pour définir la propriété de l’objet PathData .
Il existe une variété d’objets Geometry parmi lesquels choisir. Les LineGeometryclasses et EllipseGeometry les RectangleGeometryclasses décrivent des formes relativement simples. Pour créer des formes plus complexes ou créer des courbes, utilisez un PathGeometry.
Éléments PathGeometry et PathSegments
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’illustration suivante montre le rendu de la forme.
Pour plus d’informations sur et les PathGeometry autres Geometry classes, consultez la vue d’ensemble de geometry.
Syntaxe XAML abrégée
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 M, qui établit un point de départ pour le chemin d’accès dans le système de coordonnées du Canvas. Path les paramètres de données 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 commençant à (100,200) et se terminant à (400,175), tracée en utilisant les 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, le C majuscule indique un tracé absolu ; le c minuscule indiquerait un tracé relatif.
Le deuxième segment commence par une commande H « lineto » horizontale absolue, qui indique une ligne tracée à partir du point de fin du sous-tracé précédent (400,175) vers un nouveau point de fin (280,175). Puisqu’il s’agit d’une commande « lineto » horizontale, la valeur spécifiée est une coordonnéex.
Pour obtenir la syntaxe complète du chemin d’accès, consultez la Data référence et créez une forme à l’aide d’un PathGeometry.
Peindre des formes
Brush les objets sont utilisés pour peindre les objets d’une Stroke forme et Fill. Dans l’exemple suivant, le trait et le remplissage d’un Ellipse sont spécifiés. Notez que les entrées valides pour les propriétés de pinceau peuvent être une valeur de couleur hexadécimale ou un mot clé de couleur. Pour plus d’informations sur les mot clé 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 suivante 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 le rendu de la forme.
Vous pouvez également peindre le trait ou le remplissage d’une forme avec des dégradés, des images, des motifs, etc. Pour plus d’informations, consultez Vue d’ensemble de la peinture avec des couleurs unies ou des dégradés.
Formes étirables
Les Lineclasses , , PolylineRectanglePathPolygonet les classes ont toutes une Stretch propriété. 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 Shape objet est la quantité d’espace Shape allouée par le système de disposition, en raison d’un Width paramètre explicite ou Height de ses HorizontalAlignmentVerticalAlignment paramètres. Pour des informations supplémentaires sur les dispositions dans Windows Presentation Foundation, consultez Disposition.
La propriété Stretch peut prendre les valeurs suivantes :
Fill: le Shape contenu de l’objet est étiré pour remplir son espace de disposition. Les proportions ne sont pas conservées.
Uniform: le Shape contenu de l’objet est étiré autant que possible pour remplir son espace de disposition tout en conservant son rapport d’aspect d’origine.
UniformToFill: le Shape contenu de l’objet 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, il Polygon est utilisé pour dessiner un très petit triangle de (0,0) à (0,1) à (1,1). L’objet PolygonWidth est Height défini sur 100 et sa propriété stretch est définie sur Fill. 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;
Transformer des 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 la rotation. Pour faire pivoter une forme, créez une RotateTransform forme et spécifiez-la 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 et CenterY les CenterX propriétés si vous souhaitez contrôler le point sur lequel l’élément est pivoté. Ces valeurs de propriété sont exprimées dans l’espace de coordonnées de l’élément que vous êtes en train de transformer. CenterX et CenterY ont des valeurs par défaut de zéro. Enfin, appliquez l’élément RotateTransform . Si vous ne souhaitez pas que la transformation affecte la disposition, définissez la propriété de RenderTransform la forme.
Dans l’exemple suivant, il RotateTransform est utilisé pour faire pivoter une forme de 45 degrés sur le 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 effectue une rotation de 45 degrés, mais cette fois-ci par rapport au 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 Shape. Pour appliquer plusieurs transformations à une forme (ou tout autre élément d’interface utilisateur), utilisez un TransformGroup.
Voir aussi
.NET Desktop feedback
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour