Disegnare formeDraw shapes

Scopri come disegnare forme, ad esempio ellissi, rettangoli, poligoni e percorsi.Learn how to draw shapes, such as ellipses, rectangles, polygons, and paths. La classe Path ti consente di visualizzare in un'interfaccia utente XAML un linguaggio di disegno basato su vettori abbastanza complesso, ad esempio per disegnare curve di 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 importanti: Classe Path, Spazio dei nomi Windows.UI.Xaml.Shapes, Spazio dei nomi Windows.UI.Xaml.MediaImportant APIs: Path class, Windows.UI.Xaml.Shapes namespace, Windows.UI.Xaml.Media namespace

Le aree di spazio dell'interfaccia utente XAML vengono definite da due set di classi: le classi Shape e Geometry.Two sets of classes define a region of space in XAML UI: Shape classes and Geometry classes. La principale differenza tra queste classi è che una classe Shape è associata a un pennello e può essere sottoposta rendering sullo schermo, mentre una classe Geometry definisce semplicemente un'area di spazio e non ne viene eseguito il rendering, a meno che non contribuisca a fornire informazioni a un'altra proprietà dell'interfaccia utente.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. Un oggetto Shape può essere considerato come un oggetto UIElement il cui limite è definito da un oggetto Geometry.You can think of a Shape as a UIElement with its boundary defined by a Geometry. Questo argomento tratta prevalentemente le classi Shape.This topic covers mainly the Shape classes.

Le classi Shape sono Line, Ellipse, Rectangle, Polygon, Polyline e Path.The Shape classes are Line, Ellipse, Rectangle, Polygon, Polyline, and Path. Path è interessante perché consente di definire una geometria arbitraria, mentre la classe Geometry viene coinvolta perché si tratta di un altro modo per definire le parti di un oggetto 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.

Riempimento e tratto per le formeFill and Stroke for shapes

Per il rendering di un oggetto Shape nell'area di disegno dell'app, devi associare a esso un elemento Brush.For a Shape to render to the app canvas, you must associate a Brush with it. Imposta la proprietà Fill di Shape sull'elemento Brush che preferisci.Set the Fill property of the Shape to the Brush you want. Per altre informazioni sui pennelli, vedi Uso di pennelli.For more info about brushes, see Using brushes.

Un oggetto Shape può anche avere un elemento Stroke, ovvero una linea disegnata intorno al perimetro della forma.A Shape can also have a Stroke, which is a line that is drawn around the shape's perimeter. Un oggetto Stroke richiede anche un elemento Brush che ne definisce l'aspetto e deve avere un valore diverso da zero per StrokeThickness.A Stroke also requires a Brush that defines its appearance, and should have a non-zero value for StrokeThickness. StrokeThickness è una proprietà che definisce lo spessore del perimetro intorno al bordo di una forma.StrokeThickness is a property that defines the perimeter's thickness around the shape edge. Se non specifichi un valore Brush per la proprietà Stroke o se imposti StrokeThickness su 0, il bordo attorno alla forma non viene disegnato.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

Un oggetto Ellipse è una forma con perimetro curvo.An Ellipse is a shape with a curved perimeter. Per creare un oggetto Ellipse di base, specifica un valore per Width e Height e un elemento Brush per la proprietà Fill.To create a basic Ellipse, specify a Width, Height, and a Brush for the Fill.

L'esempio seguente crea un oggetto Ellipse con il valore 200 per Width e il valore 200 per Height e usa il valore SteelBlue per il colore di SolidColorBrush come 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);

Ed ecco il rendering dell'elemento Ellipse.Here's the rendered Ellipse.

Rendering di un'ellisse.

In questo caso l'oggetto Ellipse corrisponde a ciò che la maggior parte delle persone identifica con un cerchio, ma è proprio così che si dichiara una forma cerchio in XAML: usando un oggetto Ellipse con lo stesso valore per Width e Height.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.

Quando un oggetto Ellipse viene posizionato nel layout di un'interfaccia utente, si presuppone che le dimensioni siano uguali a un rettangolo con valori uguali di Width e Height; non viene eseguito il rendering dell'area all'esterno del perimetro che tuttavia fa parte delle dimensioni dello slot del layout.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 insieme di sei elementi Ellipse fa parte del modello di controllo per il controllo ProgressRing e due elementi Ellipse fanno parte di un controllo 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

Un oggetto Rectangle è una forma a quattro lati con i lati opposti uguali.A Rectangle is a four-sided shape with its opposite sides being equal. Per creare un oggetto Rectangle di base, specifica un valore per Width e Height e una proprietà Fill.To create a basic Rectangle, specify a Width, a Height, and a Fill.

Puoi arrotondare gli angoli di un oggetto Rectangle.You can round the corners of a Rectangle. Per creare angoli arrotondati, specifica un valore per le proprietà RadiusX e RadiusY.To create rounded corners, specify a value for the RadiusX and RadiusY properties. Queste proprietà specificano gli assi X e Y di un'ellisse che definisce la curvatura degli angoli.These properties specify the x-axis and y-axis of an ellipse that defines the curve of the corners. Il valore massimo consentito di RadiusX è il valore di Width diviso due e il valore massimo consentito di RadiusY è il valore di Height diviso due.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'esempio seguente crea un oggetto Rectangle con un valore per Width pari a 200 e un valore per Height pari a 100.The next example creates a Rectangle with a Width of 200 and a Height of 100. Usa il valore Blue di SolidColorBrush per la proprietà Fill e il valore Black di SolidColorBrush per la proprietà Stroke.It uses a Blue value of SolidColorBrush for its Fill and a Black value of SolidColorBrush for its Stroke. Impostiamo quindi StrokeThickness su 3.We set the StrokeThickness to 3. Impostiamo la proprietà RadiusX su 50 e la proprietà RadiusY su 10 per ottenere gli angoli arrotondati per l'oggetto Rectangle.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);

Ed ecco il rendering dell'elemento Rectangle.Here's the rendered Rectangle.

Rendering di un rettangolo.

Suggerimento  In alcuni scenari di definizioni dell'interfaccia utente, invece di usare un oggetto Rectangle, può essere più adeguato usare Border.Tip  There are some scenarios for UI definitions where instead of using a Rectangle, a Border might be more appropriate. Se intendi creare una forma rettangolare intorno ad altro contenuto, ti consigliamo di usare Border perché può avere contenuto figlio e si ridimensionerà automaticamente in base a tale contenuto, invece di usare le dimensioni fisse per altezza e larghezza come accade con 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. Un oggetto Border può anche avere angoli arrotondati se imposti la proprietà CornerRadius.A Border also has the option of having rounded corners if you set the CornerRadius property.

D'altro canto, Rectangle rappresenta forse una scelta più efficace per la composizione dei controlli.On the other hand, a Rectangle is probably a better choice for control composition. Una forma Rectangle viene vista in molti modelli di controllo perché viene usata come parte "FocusVisual" per i controlli che possono avere lo stato attivo.A Rectangle shape is seen in many control templates because it's used as a "FocusVisual" part for focusable controls. Ogni volta che il controllo si trova in uno stato di visualizzazione "Focused", il rettangolo viene reso visibile, mentre negli altri stati è nascosto.Whenever the control is in a "Focused" visual state, this rectangle is made visible, in other states it's hidden.

PoligonoPolygon

Un Polygon è una forma il cui limite è definito da un numero arbitrario di punti.A Polygon is a shape with a boundary defined by an arbitrary number of points. Il limite viene creato unendo un punto al punto successivo tramite una linea e terminando con l'unione dell'ultimo punto al primo punto.The boundary is created by connecting a line from one point to the next, with the last point connected to the first point. La proprietà Points definisce l'insieme di punti che compongono il limite.The Points property defines the collection of points that make up the boundary. In XAML i punti vengono definiti con un elenco delimitato da virgole.In XAML, you define the points with a comma-separated list. Nel code-behind devi usare un PointCollection per definire i punti e aggiungere ogni singolo punto come valore Point all'insieme.In code-behind you use a PointCollection to define the points and you add each individual point as a Point value to the collection.

Non è necessario dichiarare in modo esplicito i punti, in modo che il punto di partenza e quello finale siano entrambi specificati con lo stesso valore 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 logica di rendering per un oggetto Polygon presuppone che tu definisca una forma chiusa e connetterà il punto di fine a quello di partenza in modo implicito.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.

Nell'esempio seguente viene creato un Polygon con quattro punti impostati su (10,200), (60,140), (130,140) e (180,200).The next example creates a Polygon with 4 points set to (10,200), (60,140), (130,140), and (180,200). Nell'esempio viene usato un valore LightBlue di SolidColorBrush per Fill e nessun valore per Stroke pertanto non è presente un contorno del perimetro.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);

Ed ecco il rendering dell'oggetto Polygon.Here's the rendered Polygon.

Rendering di un poligono.

Suggerimento  Un valore Point viene spesso usato come tipo in XAML per scenari diversi dalla dichiarazione dei vertici delle forme.Tip  A Point value is often used as a type in XAML for scenarios other than declaring the vertices of shapes. Ad esempio, un oggetto Point fa parte dei dati degli eventi di tocco, per cui puoi sapere esattamente in quale punto dello spazio di coordinate si è verificata l'azione di tocco.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. Per altre informazioni su Point e su come usarlo in XAML o nel codice, vedi l'argomento di riferimento alle API per Point.For more info about Point and how to use it in XAML or code, see the API reference topic for Point.

RigaLine

Un oggetto Line è semplicemente una linea disegnata tra due punti in uno spazio di coordinate.A Line is simply a line drawn between two points in coordinate space. Un oggetto Line ignora qualsiasi valore fornito per Fill perché non dispone di uno spazio interno.A Line ignores any value provided for Fill, because it has no interior space. Per un oggetto Line, assicurati di specificare valori per le proprietà Stroke e StrokeThickness altrimenti non verrà eseguito il rendering di Line.For a Line, make sure to specify values for the Stroke and StrokeThickness properties, because otherwise the Line won't render.

Non si usano valori Point per specificare una forma Line, ma devi usare valori Double discreti per X1, Y1, X2 e Y2.You don't use Point values to specify a Line shape, instead you use discrete Double values for X1, Y1, X2 and Y2. Ciò consente un markup minimo per le linee orizzontali o verticali.This enables minimal markup for horizontal or vertical lines. Ad esempio, <Line Stroke="Red" X2="400"/> definisce una linea orizzontale lunga 400 pixel.For example, <Line Stroke="Red" X2="400"/> defines a horizontal line that is 400 pixels long. Le altre proprietà X,Y sono 0 per impostazione predefinita, pertanto in termini di punti questo XAML disegnerebbe una linea da (0,0) a (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). Puoi quindi usare TranslateTransform per spostare l'intero oggetto Line, se vuoi iniziare da un punto diverso da (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

Un oggetto Polyline è simile a un oggetto Polygon per il fatto che il limite della forma è definito da un insieme di punti, ma con la differenza che l'ultimo punto di un oggetto Polyline non è collegato al primo punto.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.

Nota   Puoi impostare esplicitamente un punto di partenza e un punto finale identici in Points per l'oggetto Polyline, ma in questo caso avresti potuto usare un oggetto Polygon.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.

Se specifichi Fill di Polyline, Fill disegna lo spazio interno della forma, anche se il punto di partenza e finale dell'oggetto Points impostati per Polyline non si intersecano.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. Se non specifichi una proprietà Fill, l'oggetto Polyline sarà simile a ciò che si otterrebbe specificando più elementi Line singoli in cui i punti di partenza e finali di linee consecutive si intersecano.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.

Come avviene per Polygon, la proprietà Points definisce l'insieme di punti che compongono il limite.As with a Polygon, the Points property defines the collection of points that make up the boundary. In XAML i punti vengono definiti con un elenco delimitato da virgole.In XAML, you define the points with a comma-separated list. Nel code-behind devi usare un PointCollection per definire i punti e aggiungere ogni singolo punto come struttura Point alla raccolta.In code-behind, you use a PointCollection to define the points and you add each individual point as a Point structure to the collection.

In questo esempio viene creato un oggetto Polyline con quattro punti impostati su (10,200), (60,140), (130,140) e (180,200).This example creates a Polyline with four points set to (10,200), (60,140), (130,140), and (180,200). Viene definita una proprietà Stroke, ma non una proprietà 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);

Ed ecco il rendering dell'oggetto Polyline. Nota bene che il primo e l'ultimo punto non sono uniti dal contorno Stroke poiché fanno parte di un elemento Polygon.Notice that the first and last points are not connected by the Stroke outline as they are in a Polygon.

Rendering di una polilinea.

PathPath

Un Path è il più versatile degli elementi Shape poiché può essere usato per definire una geometria arbitraria.A Path is the most versatile Shape because you can use it to define an arbitrary geometry. Tuttavia questa versatilità porta con sé una certa complessità.But with this versatility comes complexity. Vediamo come si crea un oggetto Path di base in XAML.Let's now look at how to create a basic Path in XAML.

Per definire la geometria di un tracciato devi usare la proprietà Data.You define the geometry of a path with the Data property. Esistono due tecniche per impostare Data:There are two techniques for setting Data:

  • Puoi impostare un valore di stringa per Data in XAML.You can set a string value for Data in XAML. In questo formato, il valore Path.Data usa un formato di serializzazione per gli elementi grafici.In this form, the Path.Data value is consuming a serialization format for graphics. In genere, non si modifica il testo di questo valore in formato stringa dopo che è stato specificato la prima volta.You typically don't text-edit this value in string form after it is first established. Devi usare, invece, gli strumenti di progettazione che ti permettono di lavorare su una metafora di progetto o disegno su una superficie.Instead, you use design tools that enable you to work in a design or drawing metaphor on a surface. Successivamente, devi salvare o esportare l'output, ottenendo così un file XAML o un frammento di stringa XAML con informazioni su Path.Data.Then you save or export the output, and this gives you a XAML file or XAML string fragment with Path.Data information.
  • Puoi impostare la proprietà Data su un singolo oggetto Geometry.You can set the Data property to a single Geometry object. Puoi eseguire questa operazione nel codice o in XAML.This can be done in code or in XAML. Tale singolo oggetto Geometry è in genere un oggetto GeometryGroup, che funge da contenitore in grado di combinare più definizioni di geometria in un unico oggetto ai fini del modello a oggetti.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. Il motivo più comune per eseguire questa operazione è l'esigenza di usare una o più curve o forme complesse che è possibile definire come valori Segments per PathFigure, ad esempio 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.

Questo esempio mostra un oggetto Path che potrebbe derivare dall'uso di Blend per Visual Studio per ottenere alcune forme vettoriali e dal salvataggio del risultato in 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'oggetto Path totale è costituito da un segmento di curva di Bézier e un segmento di linea.The total Path consists of a Bezier curve segment and a line segment. L'esempio ha principalmente lo scopo di illustrare quali elementi esistono nel formato di serializzazione di Path.Data e cosa rappresentano i numeri.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.

La proprietà Data inizia con il comando move, indicato da "M", che stabilisce un punto di partenza per il tracciato.This Data begins with the move command, indicated by "M", which establishes an absolute start point for the path.

Il primo segmento è una curva di Bézier cubica che inizia in corrispondenza del punto (100,200) e termina al punto (400,175), disegnata mediante i due punti di controllo (100,25) e (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). Questo segmento è indicato dal comando "C" nella stringa di attributo Data.This segment is indicated by the "C" command in the Data attribute string.

Il secondo segmento inizia con un comando di linea orizzontale assoluta "H", che specifica una linea disegnata dall'endpoint del sottotracciato precedente (400,175) a un nuovo endpoint (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). Essendo un comando di linea orizzontale, il valore specificato è una coordinata dell'asse 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" />

Ed ecco il rendering dell'elemento Path.Here's the rendered Path.

Screenshot di un percorso di rendering semplice.

Nell'esempio successivo viene illustrato l'uso dell'altra tecnica menzionata, ovvero GeometryGroup con PathGeometry.The next example shows a usage of the other technique we discussed: a GeometryGroup with a PathGeometry. In questo esempio vengono provati alcuni tipi di geometria di contributo che possono essere usati come parte di PathGeometry, ovvero PathFigure e i vari elementi che possono essere inseriti in un segmento in 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);

Ed ecco il rendering dell'elemento Path.Here's the rendered Path.

Screenshot di un percorso di rendering complesso.

L'uso di PathGeometry potrebbe migliorare la leggibilità rispetto al popolamento di una stringa Path.Data.Using PathGeometry may be more readable than populating a Path.Data string. D'altro canto, Path.Data usa una sintassi compatibile con le definizioni dei percorsi delle immagini SVG (Scalable Vector Graphics), quindi può essere utile per la conversione della grafica da SVG o come output da strumenti come 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.