Dessiner des formesDraw shapes

Découvrez comment dessiner des formes, telles que des ellipses, des rectangles, des polygones et des tracés.Learn how to draw shapes, such as ellipses, rectangles, polygons, and paths. La classe Path permet de visualiser un langage de dessin vectoriel complexe dans une interface utilisateur XAML. Vous pouvez, par exemple, dessiner des courbes de Bézier.The Path class is the way to visualize a fairly complex vector-based drawing language in a XAML UI; for example, you can draw Bezier curves.

API importantes : classe Path, espace de noms Windows.UI.Xaml.Shapes, espace de noms Windows.UI.Xaml.MediaImportant APIs: Path class, Windows.UI.Xaml.Shapes namespace, Windows.UI.Xaml.Media namespace

Deux jeux de classes définissent une région d’espace dans l’interface utilisateur XAML : les classes Shape les classes Geometry.Two sets of classes define a region of space in XAML UI: Shape classes and Geometry classes. Leur principale différence réside dans le fait qu’un pinceau est associé à la classe Shape et que son rendu peut s’effectuer à l’écran. La classe Geometry, quant à elle, définit simplement une région d’espace sans rendu, sauf si elle concourt à donner des informations sur une autre propriété de l’interface utilisateur.The main difference between these classes is that a Shape has a brush associated with it and can be rendered to the screen, and a Geometry simply defines a region of space and is not rendered unless it helps contribute information to another UI property. Imaginez le jeu Shape comme un élément UIElement dont la limite est définie par un jeu Geometry.You can think of a Shape as a UIElement with its boundary defined by a Geometry. Cette rubrique traite principalement des classes Shape.This topic covers mainly the Shape classes.

Les classes Shape sont les suivantes : Line, Ellipse, Rectangle, Polygon, Polyline et Path.The Shape classes are Line, Ellipse, Rectangle, Polygon, Polyline, and Path. La classe Path est intéressante, car elle peut définir une géométrie arbitraire, et la classe Geometry est impliquée ici, car elle constitue un moyen de définir les parties d’une classe Path.Path is interesting because it can define an arbitrary geometry, and the Geometry class is involved here because that's one way to define the parts of a Path.

Remplissage et trait pour les formesFill and Stroke for shapes

Pour qu’un objet Shape soit restitué dans la zone de dessin de l’application, vous devez lui associer un objet Brush.For a Shape to render to the app canvas, you must associate a Brush with it. Définissez la propriété Fill de la classe Shape sur l’élément Brush souhaité.Set the Fill property of the Shape to the Brush you want. Pour plus d’informations sur les pinceaux, voir Utilisation des pinceaux.For more info about brushes, see Using brushes.

Un objet Shape peut également posséder une propriété Stroke, qui représente une ligne tracée autour du périmètre de la forme.A Shape can also have a Stroke, which is a line that is drawn around the shape's perimeter. En outre, une propriété Stroke requiert un objet Brush qui définit son apparence, et doit posséder une valeur différente de zéro pour StrokeThickness.A Stroke also requires a Brush that defines its appearance, and should have a non-zero value for StrokeThickness. StrokeThickness est une propriété qui définit l’épaisseur du périmètre autour du bord de la forme.StrokeThickness is a property that defines the perimeter's thickness around the shape edge. Si vous n’indiquez aucune valeur Brush pour la propriété Stroke ou que vous définissez StrokeThickness sur 0, la bordure autour de la forme n’est pas dessinée.If you don't specify a Brush value for Stroke, or if you set StrokeThickness to 0, then the border around the shape is not drawn.

EllipseEllipse

La classe Ellipse désigne une forme au périmètre courbe.An Ellipse is a shape with a curved perimeter. Pour créer une forme Ellipse basique, spécifiez un élément Width et Height, ainsi qu’un élément Brush pour la propriété Fill.To create a basic Ellipse, specify a Width, Height, and a Brush for the Fill.

L’exemple suivant permet de créer une forme Ellipse de largeur Width égale à 200 et de hauteur Height égale à 200, avec une couleur SteelBlue de pinceau SolidColorBrush comme propriété Fill.The next example creates an Ellipse with a Width of 200 and a Height of 200, and uses a SteelBlue colored SolidColorBrush as its Fill.

<Ellipse Fill="SteelBlue" Height="200" Width="200" />
var ellipse1 = new Ellipse();
ellipse1.Fill = new SolidColorBrush(Windows.UI.Colors.SteelBlue);
ellipse1.Width = 200;
ellipse1.Height = 200;

// When you create a XAML element in code, you have to add
// it to the XAML visual tree. This example assumes you have
// a panel named 'layoutRoot' in your XAML file, like this:
// <Grid x:Name="layoutRoot>
layoutRoot.Children.Add(ellipse1);

Rendu de la forme Ellipse :Here's the rendered Ellipse.

Rendu de l’ellipse

Dans ce cas, la forme Ellipse s’apparente à ce que la plupart d’entre nous appelons un cercle. Il s’agit là, en effet, de la façon dont vous déclarez une forme circulaire en langage XAML : en utilisant une classe Ellipse avec des valeurs Width et Height égales.In this case the Ellipse is what most people would consider a circle, but that's how you declare a circle shape in XAML: use an Ellipse with equal Width and Height.

Lorsqu’un objet Ellipse est positionné dans une disposition de l’interface utilisateur, sa taille est supposée similaire à celle d’un rectangle avec ces valeurs Width et Height ; la zone à l’extérieur du périmètre n’est pas restituée, mais participe néanmoins à la taille de son emplacement dans la disposition.When an Ellipse is positioned in a UI layout, its size is assumed to be the same as a rectangle with that Width and Height; the area outside the perimeter does not have rendering but still is part of its layout slot size.

Un ensemble de 6 éléments Ellipse font partie du modèle du contrôle ProgressRing, et 2 éléments Ellipse concentriques font partie d’une classe RadioButton.A set of 6 Ellipse elements are part of the control template for the ProgressRing control, and 2 concentric Ellipse elements are part of a RadioButton.

RectangleRectangle

Une forme Rectangle a quatre côtés dont les côtés opposés sont de mesure égale.A Rectangle is a four-sided shape with its opposite sides being equal. Pour créer une forme Rectangle basique, spécifiez une largeur Width, une hauteur Height et un remplissage Fill.To create a basic Rectangle, specify a Width, a Height, and a Fill.

Vous pouvez arrondir les angles d’une forme Rectangle.You can round the corners of a Rectangle. Pour ce faire, indiquez une valeur pour les propriétés RadiusX et RadiusY.To create rounded corners, specify a value for the RadiusX and RadiusY properties. Ces propriétés spécifient les axes x et y d’une ellipse définissant la courbe des angles.These properties specify the x-axis and y-axis of an ellipse that defines the curve of the corners. La valeur maximale de RadiusX correspond à la valeur Width divisée par deux, et la valeur maximale de RadiusY à celle de Height divisée par deux.The maximum allowed value of RadiusX is the Width divided by two and the maximum allowed value of RadiusY is the Height divided by two.

L’exemple suivant permet de créer une forme Rectangle de largeur Width égale à 200 et de hauteur Height égale à 100.The next example creates a Rectangle with a Width of 200 and a Height of 100. La valeur Blue est utilisée pour le pinceau SolidColorBrush comme propriété Fill, et la valeur Black est utilisée pour le pinceau SolidColorBrush comme propriété Stroke.It uses a Blue value of SolidColorBrush for its Fill and a Black value of SolidColorBrush for its Stroke. Nous avons défini la propriété StrokeThickness sur 3.We set the StrokeThickness to 3. Nous avons défini la propriété RadiusX sur 50 et la propriété RadiusY sur 10 afin d’obtenir une forme Rectangle aux angles arrondis.We set the RadiusX property to 50 and the RadiusY property to 10, which gives the Rectangle rounded corners.

<Rectangle Fill="Blue"
           Width="200"
           Height="100"
           Stroke="Black"
           StrokeThickness="3"
           RadiusX="50"
           RadiusY="10" />
var rectangle1 = new Rectangle();
rectangle1.Fill = new SolidColorBrush(Windows.UI.Colors.Blue);
rectangle1.Width = 200;
rectangle1.Height = 100;
rectangle1.Stroke = new SolidColorBrush(Windows.UI.Colors.Black);
rectangle1.StrokeThickness = 3;
rectangle1.RadiusX = 50;
rectangle1.RadiusY = 10;

// When you create a XAML element in code, you have to add
// it to the XAML visual tree. This example assumes you have
// a panel named 'layoutRoot' in your XAML file, like this:
// <Grid x:Name="layoutRoot>
layoutRoot.Children.Add(rectangle1);

Rendu de la forme Rectangle :Here's the rendered Rectangle.

Rendu du rectangle

Conseil  Dans certains scénarios de définition de l’interface utilisateur, l’utilisation d’un objet Border peut être plus appropriée que celle d’un objet Rectangle.Tip  There are some scenarios for UI definitions where instead of using a Rectangle, a Border might be more appropriate. Si vous envisagez de créer une forme rectangulaire autour d’un autre contenu, il peut être préférable d’utiliser l’objet Border, car il peut posséder du contenu enfant et sa taille s’adaptera automatiquement autour de ce contenu, plutôt que d’utiliser les dimensions fixes pour la hauteur et la largeur, à l’image de l’objet Rectangle.If your intention is to create a rectangle shape around other content, it might be better to use Border because it can have child content and will automatically size around that content, rather than using the fixed dimensions for height and width like Rectangle does. En outre, un objet Border peut posséder des coins arrondis si vous définissez la propriété CornerRadius.A Border also has the option of having rounded corners if you set the CornerRadius property.

D’un autre côté, une classe Rectangle s’avère probablement un meilleur choix pour une composition de contrôle.On the other hand, a Rectangle is probably a better choice for control composition. Une forme Rectangle est présente dans de nombreux modèles de contrôle car elle est utilisée en tant que partie « FocusVisual » pour les contrôles pouvant être actifs.A Rectangle shape is seen in many control templates because it's used as a "FocusVisual" part for focusable controls. Dès lors que le contrôle est dans un état visuel « Actif », ce rectangle est rendu visible ; dans les autres états, il est masqué.Whenever the control is in a "Focused" visual state, this rectangle is made visible, in other states it's hidden.

PolygonePolygon

La classe Polygon correspond à une forme dont la limite est définie par un nombre de points arbitraire.A Polygon is a shape with a boundary defined by an arbitrary number of points. Cette limite est créée en reliant un point à un autre par une ligne, le dernier étant lui aussi relié au premier.The boundary is created by connecting a line from one point to the next, with the last point connected to the first point. La propriété Points définit l’ensemble des points constituant la limite.The Points property defines the collection of points that make up the boundary. En langage XAML, vous devez définir les points à l’aide d’une liste séparée par des virgules.In XAML, you define the points with a comma-separated list. En code-behind, vous devez utiliser un élément PointCollection pour définir les points et ajouter chaque point à l’ensemble sous la forme d’une valeur Point.In code-behind you use a PointCollection to define the points and you add each individual point as a Point value to the collection.

Vous n’avez pas besoin de déclarer les points explicitement de telle sorte que le point de départ et le point final soient spécifiés par la même valeur Point.You don't need to explicitly declare the points such that the start point and end point are both specified as the same Point value. La logique du rendu d’un objet Polygon suppose que vous définissez une forme fermée et que vous reliez implicitement le point final au point de départ.The rendering logic for a Polygon assumes that you are defining a closed shape and will connect the end point to the start point implicitly.

L’exemple suivant crée une forme Polygon à 4 points définis sur (10,200), (60,140), (130,140) et (180,200).The next example creates a Polygon with 4 points set to (10,200), (60,140), (130,140), and (180,200). Il utilise une valeur LightBlue égale à SolidColorBrush pour la propriété Fill, et ne possède aucune valeur pour la propriété Stroke, ce qui se traduit par l’absence de contour de périmètre.It uses a LightBlue value of SolidColorBrush for its Fill, and has no value for Stroke so it has no perimeter outline.

<Polygon Fill="LightBlue"
         Points="10,200,60,140,130,140,180,200" />
var polygon1 = new Polygon();
polygon1.Fill = new SolidColorBrush(Windows.UI.Colors.LightBlue);

var points = new PointCollection();
points.Add(new Windows.Foundation.Point(10, 200));
points.Add(new Windows.Foundation.Point(60, 140));
points.Add(new Windows.Foundation.Point(130, 140));
points.Add(new Windows.Foundation.Point(180, 200));
polygon1.Points = points;

// When you create a XAML element in code, you have to add
// it to the XAML visual tree. This example assumes you have
// a panel named 'layoutRoot' in your XAML file, like this:
// <Grid x:Name="layoutRoot>
layoutRoot.Children.Add(polygon1);

Rendu de la forme Polygon :Here's the rendered Polygon.

Rendu du polygone

Conseil  Une valeur Point est souvent utilisée en tant que type en XAML pour les situations autres que la déclaration des sommets des formes.Tip  A Point value is often used as a type in XAML for scenarios other than declaring the vertices of shapes. Par exemple, un objet Point fait partie des données d’événement pour les événements tactiles, si bien que vous pouvez déterminer exactement l’endroit auquel s’est produit une action tactile dans un espace de coordonnées.For example, a Point is part of the event data for touch events, so you can know exactly where in a coordinate space the touch action occurred. Pour plus d’informations sur Point et sur la façon de l’utiliser en XAML ou dans du code, voir la rubrique de référence d’API pour Point.For more info about Point and how to use it in XAML or code, see the API reference topic for Point.

LigneLine

Un objet Line représente simplement une ligne tracée entre deux points dans un espace de coordonnées.A Line is simply a line drawn between two points in coordinate space. Un objet Line ignore toute valeur fournie pour Fill, car il est dépourvu d’espace intérieur.A Line ignores any value provided for Fill, because it has no interior space. Dans le cas d’un objet Line, veillez à spécifier des valeurs pour les propriétés Stroke et StrokeThickness, sinon l’objet Line ne sera pas restitué.For a Line, make sure to specify values for the Stroke and StrokeThickness properties, because otherwise the Line won't render.

Vous n’utilisez pas de valeurs Point pour spécifier une forme Line ; à la place, vous utilisez des valeurs Double discrète pour X1, Y1, X2 et Y2.You don't use Point values to specify a Line shape, instead you use discrete Double values for X1, Y1, X2 and Y2. Cela permet un balisage minimal pour les lignes horizontales ou verticales.This enables minimal markup for horizontal or vertical lines. Par exemple, <Line Stroke="Red" X2="400"/> définit une ligne horizontale de 400 pixels de long.For example, <Line Stroke="Red" X2="400"/> defines a horizontal line that is 400 pixels long. Les autres propriétés X,Y étant par défaut définies sur 0, ce code XAML trace une ligne entre les points (0,0) et (400,0).The other X,Y properties are 0 by default, so in terms of points this XAML would draw a line from (0,0) to (400,0). Vous pouvez ensuite utiliser une classe TranslateTransform pour déplacer toute la classe Line, si vous voulez qu’elle commence à un point autre que (0,0).You could then use a TranslateTransform to move the entire Line, if you wanted it to start at a point other than (0,0).

<Line Stroke="Red" X2="400"/>
var line1 = new Line();
line1.Stroke = new SolidColorBrush(Windows.UI.Colors.Red);
line1.X2 = 400;

// When you create a XAML element in code, you have to add
// it to the XAML visual tree. This example assumes you have
// a panel named 'layoutRoot' in your XAML file, like this:
// <Grid x:Name="layoutRoot>
layoutRoot.Children.Add(line1);

Polyline Polyline

Les formes Polyline sont semblables aux formes Polygon en ce que leur limite est définie par un ensemble de points, à la différence que le dernier point d’une forme Polyline n’est pas relié au premier.A Polyline is similar to a Polygon in that the boundary of the shape is defined by a set of points, except the last point in a Polyline is not connected to the first point.

Remarque   Vous pouvez paramétrer explicitement des points de départ et de fin identiques dans la propriété Points définie pour l’objet Polyline, mais dans ce cas l’utilisation d’un objet Polygon est probablement mieux appropriée.Note   You could explicitly have an identical start point and end point in the Points set for the Polyline, but in that case you probably could have used a Polygon instead.

Si vous spécifiez une propriété Fill d’un objet Polyline, la propriété Fill peint l’espace intérieur de la forme, même si les points de départ et de fin de la propriété Points définie pour l’objet Polyline ne se recoupent pas.If you specify a Fill of a Polyline, the Fill paints the interior space of the shape, even if the start point and end point of the Points set for the Polyline do not intersect. Si vous ne spécifiez pas de propriété Fill, l’objet Polyline est similaire à celui qui serait restitué si vous indiquiez plusieurs éléments Line avec intersection des points de départ et de fin de lignes consécutives.If you do not specify a Fill, then the Polyline is similar to what would have rendered if you had specified several individual Line elements where the start points and end points of consecutive lines intersected.

Comme dans le cas d’une forme Polygon, la propriété Points définit l’ensemble des points constituant la limite.As with a Polygon, the Points property defines the collection of points that make up the boundary. En langage XAML, vous devez définir les points à l’aide d’une liste séparée par des virgules.In XAML, you define the points with a comma-separated list. En code-behind, vous devez utiliser un élément PointCollection pour définir les points et ajouter chaque point à l’ensemble sous la forme d’une structure Point.In code-behind, you use a PointCollection to define the points and you add each individual point as a Point structure to the collection.

Cet exemple crée une forme Polyline à quatre points définis sur (10,200), (60,140), (130,140) et (180,200).This example creates a Polyline with four points set to (10,200), (60,140), (130,140), and (180,200). Une propriété Stroke est définie, contrairement à une propriété Fill.A Stroke is defined but not a Fill.

<Polyline Stroke="Black"
        StrokeThickness="4"
        Points="10,200,60,140,130,140,180,200" />
var polyline1 = new Polyline();
polyline1.Stroke = new SolidColorBrush(Windows.UI.Colors.Black);
polyline1.StrokeThickness = 4;

var points = new PointCollection();
points.Add(new Windows.Foundation.Point(10, 200));
points.Add(new Windows.Foundation.Point(60, 140));
points.Add(new Windows.Foundation.Point(130, 140));
points.Add(new Windows.Foundation.Point(180, 200));
polyline1.Points = points;

// When you create a XAML element in code, you have to add
// it to the XAML visual tree. This example assumes you have
// a panel named 'layoutRoot' in your XAML file, like this:
// <Grid x:Name="layoutRoot>
layoutRoot.Children.Add(polyline1);

Voici le rendu de la forme Polyline. Remarquez que les premier et dernier points ne sont pas reliés par le contour Stroke comme ils le sont dans le cas d’une forme Polygon.Notice that the first and last points are not connected by the Stroke outline as they are in a Polygon.

Rendu de la polyligne

PathPath

La forme Path est la classe Shape la plus souple, car vous pouvez l’utiliser pour définir une géométrie arbitraire.A Path is the most versatile Shape because you can use it to define an arbitrary geometry. Cette souplesse est toutefois synonyme de complexité.But with this versatility comes complexity. Observons comment créer une forme Path basique en langage XAML.Let's now look at how to create a basic Path in XAML.

Pour spécifier la géométrie d’un tracé, utilisez la propriété Data.You define the geometry of a path with the Data property. Deux techniques permettent de définir la propriété Data :There are two techniques for setting Data:

  • Vous pouvez définir une valeur de chaîne pour Data en XAML.You can set a string value for Data in XAML. Ainsi, la valeur Path.Data utilise un format de sérialisation pour les graphismes.In this form, the Path.Data value is consuming a serialization format for graphics. En règle générale, vous ne modifiez pas le texte de cette valeur sous la forme d’une chaîne une fois qu’elle a été établie.You typically don't text-edit this value in string form after it is first established. À la place, vous utilisez des outils de conception qui vous permettent de travailler dans une métaphore de conception ou de dessin sur une surface.Instead, you use design tools that enable you to work in a design or drawing metaphor on a surface. Ensuite, vous enregistrez ou exportez la sortie, ce qui vous permet d’obtenir un fichier XAML ou un fragment de chaîne XAML comportant les informations de la propriété Path.Data.Then you save or export the output, and this gives you a XAML file or XAML string fragment with Path.Data information.
  • Vous pouvez définir la propriété Data sur un objet Geometry unique.You can set the Data property to a single Geometry object. Cette opération peut être réalisée dans du code ou en XAML.This can be done in code or in XAML. Cet objet Geometry unique est généralement un objet GeometryGroup, qui fait office de conteneur pouvant, à partir de plusieurs définitions de géométrie, composer un objet destiné au modèle objet.That single Geometry is typically a GeometryGroup, which acts as a container that can composite multiple geometry definitions into a single object for purposes of the object model. Cette approche permet notamment de définir une ou plusieurs des courbes et des formes complexes en tant que valeurs Segments d’un objet PathFigure, par exemple BezierSegment.The most common reason for doing this is because you want to use one or more of the curves and complex shapes that can be defined as Segments values for a PathFigure, for example BezierSegment.

L’exemple ci-dessous montre un objet Path qui aurait pu être obtenu en utilisant Blend pour Visual Studio pour produire une série limitée de formes vectorielles, puis en enregistrant le résultat au format XAML.This example shows a Path that might have resulted from using Blend for Visual Studio to produce just a few vector shapes and then saving the result as XAML. L’objet Path global se compose d’une courbe de Bézier et d’une ligne.The total Path consists of a Bezier curve segment and a line segment. L’exemple vise essentiellement à illustrer une partie des éléments du format de sérialisation Path.Data et de ce que les nombres représentent.The example is mainly intended to give you some examples of what elements exist in the Path.Data serialization format and what the numbers represent.

Cette propriété Data commence avec une commande de mouvement, indiquée par la mention « M », qui établit un point de départ absolu du tracé.This Data begins with the move command, indicated by "M", which establishes an absolute start point for the path.

Le premier segment est une courbe de Bézier cubique commençant à (100,200) et se terminant à (400,175). Elle est dessinée à l’aide des deux points de contrôle (100,25) et (400,350).The first segment is a cubic Bezier curve that begins at (100,200) and ends at (400,175), which is drawn by using the two control points (100,25) and (400,350). Ce segment est indiqué par la commande « C » dans la chaîne de l’attribut Data.This segment is indicated by the "C" command in the Data attribute string.

Le deuxième segment commence par une commande de ligne horizontale absolue « H », indiquant le dessin d’une ligne à partir du point final du sous-tracé précédent (400,175) jusqu’au nouveau point final (280,175).The second segment begins with an absolute horizontal line command "H", which specifies a line drawn from the preceding subpath endpoint (400,175) to a new endpoint (280,175). Comme il s’agit d’une commande de ligne horizontale, la valeur spécifiée correspond à une coordonnée x.Because it's a horizontal line command, the value specified is an x-coordinate.

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

Rendu de la forme Path :Here's the rendered Path.

Capture d’écran d’un chemin simple.

L’exemple suivant montre l’utilisation de l’autre technique mentionnée : une classe GeometryGroup avec une classe PathGeometry.The next example shows a usage of the other technique we discussed: a GeometryGroup with a PathGeometry. Cet exemple utilise certains des types de géométrie contributeurs qui peuvent être utilisées en tant que partie d’une PathGeometry : PathFigure et les différents éléments qui peuvent être un segment dans PathFigure.Segments.This example exercises some of the contributing geometry types that can be used as part of a PathGeometry: PathFigure and the various elements that can be a segment in PathFigure.Segments.

<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
    <Path.Data>
        <GeometryGroup>
            <RectangleGeometry Rect="50,5 100,10" />
            <RectangleGeometry Rect="5,5 95,180" />
            <EllipseGeometry Center="100, 100" RadiusX="20" RadiusY="30"/>
            <RectangleGeometry Rect="50,175 100,10" />
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigureCollection>
                        <PathFigure IsClosed="true" StartPoint="50,50">
                            <PathFigure.Segments>
                                <PathSegmentCollection>
                                    <BezierSegment Point1="75,300" Point2="125,100" Point3="150,50"/>
                                    <BezierSegment Point1="125,300" Point2="75,100"  Point3="50,50"/>
                                </PathSegmentCollection>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathFigureCollection>
                </PathGeometry.Figures>
            </PathGeometry>
        </GeometryGroup>
    </Path.Data>
</Path>
var path1 = new Windows.UI.Xaml.Shapes.Path();
path1.Fill = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 204, 204, 255));
path1.Stroke = new SolidColorBrush(Windows.UI.Colors.Black);
path1.StrokeThickness = 1;

var geometryGroup1 = new GeometryGroup();
var rectangleGeometry1 = new RectangleGeometry();
rectangleGeometry1.Rect = new Rect(50, 5, 100, 10);
var rectangleGeometry2 = new RectangleGeometry();
rectangleGeometry2.Rect = new Rect(5, 5, 95, 180);
geometryGroup1.Children.Add(rectangleGeometry1);
geometryGroup1.Children.Add(rectangleGeometry2);

var ellipseGeometry1 = new EllipseGeometry();
ellipseGeometry1.Center = new Point(100, 100);
ellipseGeometry1.RadiusX = 20;
ellipseGeometry1.RadiusY = 30;
geometryGroup1.Children.Add(ellipseGeometry1);

var pathGeometry1 = new PathGeometry();
var pathFigureCollection1 = new PathFigureCollection();
var pathFigure1 = new PathFigure();
pathFigure1.IsClosed = true;
pathFigure1.StartPoint = new Windows.Foundation.Point(50, 50);
pathFigureCollection1.Add(pathFigure1);
pathGeometry1.Figures = pathFigureCollection1;

var pathSegmentCollection1 = new PathSegmentCollection();
var pathSegment1 = new BezierSegment();
pathSegment1.Point1 = new Point(75, 300);
pathSegment1.Point2 = new Point(125, 100);
pathSegment1.Point3 = new Point(150, 50);
pathSegmentCollection1.Add(pathSegment1);

var pathSegment2 = new BezierSegment();
pathSegment2.Point1 = new Point(125, 300);
pathSegment2.Point2 = new Point(75, 100);
pathSegment2.Point3 = new Point(50, 50);
pathSegmentCollection1.Add(pathSegment2);
pathFigure1.Segments = pathSegmentCollection1;

geometryGroup1.Children.Add(pathGeometry1);
path1.Data = geometryGroup1;

// When you create a XAML element in code, you have to add
// it to the XAML visual tree. This example assumes you have
// a panel named 'layoutRoot' in your XAML file, like this:
// <Grid x:Name="layoutRoot>
layoutRoot.Children.Add(path1);

Rendu de la forme Path :Here's the rendered Path.

Capture d’écran d’un chemin complexe.

L’utilisation de PathGeometry peut être plus lisible que le remplissage d’une chaîne Path.Data.Using PathGeometry may be more readable than populating a Path.Data string. En revanche, Path.Data utilise une syntaxe compatible avec les définitions de chemin d’accès d’une image Scalable Vector Graphics (SVG) ; il peut donc être utile pour le portage des graphiques à partir de SVG, ou en tant que sortie à partir d’un outil comme Blend.On the other hand, Path.Data uses a syntax compatible with Scalable Vector Graphics (SVG) image path definitions so it may be useful for porting graphics from SVG, or as output from a tool like Blend.