Zeichnen von FormenDraw shapes

Erfahren Sie, wie Sie Formen wie Ellipsen, Rechtecke, Polygone und Pfade zeichnen.Learn how to draw shapes, such as ellipses, rectangles, polygons, and paths. Mithilfe der Klasse Path visualisieren Sie eine ziemlich komplexe vektorbasierte Zeichnungssprache in einer XAML-Benutzeroberfläche. Beispielsweise können Sie auf diese Weise Bézierkurven zeichnen.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.

Wichtige APIs: Path-Klasse, Windows.UI.Xaml.Shapes-Namespace, Windows.UI.Xaml.Media-NamespaceImportant APIs: Path class, Windows.UI.Xaml.Shapes namespace, Windows.UI.Xaml.Media namespace

Zwei Sätze von Klassen definieren einen Bereich in der XAML-Benutzeroberfläche: Shape-Klassen und Geometry-Klassen.Two sets of classes define a region of space in XAML UI: Shape classes and Geometry classes. Der Hauptunterschied zwischen diesen Klassen besteht darin, dass einer Shape-Klasse ein Pinsel zugeordnet ist und diese auf dem Bildschirm gerendert werden kann, während eine Geometry-Klasse einfach einen Bereich definiert und nur gerendert wird, wenn sie Informationen zu einer anderen UI-Eigenschaft beiträgt.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. Sie können sich eine Shape-Klasse als UIElement vorstellen, dessen Umrandung durch eine Geometry-Klasse definiert ist.You can think of a Shape as a UIElement with its boundary defined by a Geometry. In diesem Thema werden hauptsächlich die Shape-Klassen behandelt.This topic covers mainly the Shape classes.

Die Shape-Klassen sind Line, Ellipse, Rectangle, Polygon, Polyline und Path.The Shape classes are Line, Ellipse, Rectangle, Polygon, Polyline, and Path. Path ist interessant, da Sie mit dieser Klasse beliebige Geometrien definieren können, und die Klasse Geometry stellt eine Möglichkeit zum Definieren der Teile eines Path dar.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.

Füllungen und Striche für FormenFill and Stroke for shapes

Damit eine Shape-Klasse auf dem App-Canvas gerendert wird, müssen Sie ihr einen Brush zuweisen.For a Shape to render to the app canvas, you must associate a Brush with it. Legen Sie die Fill-Eigenschaft der Shape-Klasse auf den gewünschten Brush fest.Set the Fill property of the Shape to the Brush you want. Weitere Informationen zu Pinseln finden Sie unter Verwenden von Pinseln.For more info about brushes, see Using brushes.

Eine Shape-Klasse kann auch einen Stroke aufweisen. Dies ist eine Linie, die um den Rand der Form gezeichnet wird.A Shape can also have a Stroke, which is a line that is drawn around the shape's perimeter. Ein Stroke erfordert auch einen Brush. Dieser definiert die Darstellung und sollte einen Wert ungleich Null für StrokeThickness aufweisen.A Stroke also requires a Brush that defines its appearance, and should have a non-zero value for StrokeThickness. StrokeThickness ist eine Eigenschaft, die die Stärke des Rands um die Form definiert.StrokeThickness is a property that defines the perimeter's thickness around the shape edge. Wenn Sie keinen Brush-Wert für Stroke angeben oder StrokeThickness auf 0 festlegen, wird kein Rahmen um die Form gezeichnet.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

Eine Ellipse ist eine Form mit einem kurvenförmigen Rand.An Ellipse is a shape with a curved perimeter. Zum Erstellen einer einfachen Ellipse geben Sie Width, Height und einen Brush für Fill an.To create a basic Ellipse, specify a Width, Height, and a Brush for the Fill.

Im nächsten Beispiel wird eine Ellipse mit einer Width von 200 und einer Height von 200 erstellt, die die Farbe SteelBlue für SolidColorBrush als Fill verwendet.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);

Dies ist die gerenderte Ellipse.Here's the rendered Ellipse.

Eine gerenderte Ellipse

In diesem Fall ist die Ellipse das, was die meisten Menschen als einen Kreis bezeichnen würden. So werden Kreisformen in XAML definiert: Sie verwenden eine Ellipse mit gleicher Width und 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.

Wenn eine Ellipse in einem UI-Layout positioniert wird, wird davon ausgegangen, dass ihre Größe einem Rechteck dieser Width und Height entspricht. Der Bereich außerhalb des Rands weist kein Rendering auf, gehört jedoch weiterhin zur Größe des Layoutschlitzes.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.

Eine Gruppe von 6 Ellipse-Elementen ist Teil der Steuerelementvorlage für das ProgressRing-Steuerelement. 2 konzentrische Ellipse-Elemente sind Teil eines 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

Ein Rectangle ist eine vierseitige Form, bei der die gegenüberliegenden Seiten gleich sind.A Rectangle is a four-sided shape with its opposite sides being equal. Um ein einfaches Rectangle zu erstellen, geben Sie eine Width, eine Height und einen Wert für Fill an.To create a basic Rectangle, specify a Width, a Height, and a Fill.

Sie können die Ecken eines Rectangle abrunden.You can round the corners of a Rectangle. Um abgerundete Ecken zu erstellen, geben Sie einen Wert für die Eigenschaften RadiusX und RadiusY an.To create rounded corners, specify a value for the RadiusX and RadiusY properties. Diese Eigenschaften geben die x-Achse und die y-Achse einer Ellipse an, die die Kurven der Ecken angibt.These properties specify the x-axis and y-axis of an ellipse that defines the curve of the corners. Der zulässige Maximalwert für RadiusX ist Width geteilt durch zwei. Der zulässige Maximalwert für RadiusY ist Height geteilt durch zwei.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.

Im nächsten Beispiel wird ein Rectangle mit einer Width von 200 und einer Height von 100 erstellt.The next example creates a Rectangle with a Width of 200 and a Height of 100. Es verwendet den Wert Blue von SolidColorBrush als Fill und den Wert Black von SolidColorBrush als Stroke.It uses a Blue value of SolidColorBrush for its Fill and a Black value of SolidColorBrush for its Stroke. Die StrokeThickness wird als 3 festgelegt.We set the StrokeThickness to 3. Die RadiusX-Eigenschaft wird auf 50, und die RadiusY-Eigenschaft wird auf 10 festgelegt. Damit erhält das Rectangle abgerundete Ecken.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);

Hier die gerenderte Rectangle-Klasse.Here's the rendered Rectangle.

Ein gerendertes Rechteck

Tipp  In einigen Szenarien für UI-Definitionen ist die Verwendung eines Border-Elements anstelle eines Rectangle-Elements möglicherweise angemessener.Tip  There are some scenarios for UI definitions where instead of using a Rectangle, a Border might be more appropriate. Wenn Sie eine rechteckige Form um anderen Inhalt zeichnen möchten, ist Border u. U. besser geeignet. Rahmen können untergeordnete Elemente enthalten, und ihre Größe passt sich automatisch an den Inhalt an. Dagegen sind die Breite und Höhe von Rectangle-Elementen auf feste Werte festgelegt.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. Die Ecken von Border können durch Festlegen der CornerRadius-Eigenschaft auch abgerundet werden.A Border also has the option of having rounded corners if you set the CornerRadius property.

Andererseits ist Rectangle wahrscheinlich eine bessere Wahl für die Steuerelementkomposition.On the other hand, a Rectangle is probably a better choice for control composition. Eine Rectangle-Form wird in vielen Steuerelementvorlagen verwendet, da sie als FocusVisual-Teil für fokussierbare Steuerelemente verwendet wird.A Rectangle shape is seen in many control templates because it's used as a "FocusVisual" part for focusable controls. Befindet sich das Steuerelement in einem fokussierten Ansichtszustand, wird dieses Rechteck sichtbar gemacht; in anderen Zuständen ist es ausgeblendet.Whenever the control is in a "Focused" visual state, this rectangle is made visible, in other states it's hidden.

PolygonPolygon

Ein Polygon ist eine Form, deren Grenze durch eine beliebige Anzahl von Punkten angegeben wird.A Polygon is a shape with a boundary defined by an arbitrary number of points. Die Grenze wir erstellt, indem eine Linie von einem Punkt zum nächsten gezeichnet wird, bis der letzte Punkt wieder mit dem ersten abschließt.The boundary is created by connecting a line from one point to the next, with the last point connected to the first point. Die Points-Eigenschaft definiert die Sammlung von Punkten, die zusammen die Grenze ergeben.The Points property defines the collection of points that make up the boundary. In XAML definieren Sie die Punkte mit einer durch Trennzeichen getrennten Liste.In XAML, you define the points with a comma-separated list. Verwenden Sie im CodeBehind eine PointCollection, um die Punkte zu definieren, und fügen Sie der Sammlung jeden einzelnen Punkt als Point-Wert hinzu.In code-behind you use a PointCollection to define the points and you add each individual point as a Point value to the collection.

Die einzelnen Punkte müssen nicht explizit so deklariert werden, dass der Anfangs- und der Endpunkt als derselbe Point-Wert angegeben werden.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. Die Renderinglogik für ein Polygon geht davon aus, dass Sie eine geschlossene Form definieren, und verbindet den Anfangspunkt implizit mit dem Endpunkt.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.

Im nächsten Beispiel wird ein Polygon mit 4 Punkten bei (10,200), (60,140), (130,140)und (180,200) erstellt.The next example creates a Polygon with 4 points set to (10,200), (60,140), (130,140), and (180,200). Für Fill wird der LightBlue-Wert SolidColorBrush verwendet. Da kein Stroke-Wert vorhanden ist, wird keine Umrandung erstellt.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);

Dies ist das gerenderte Polygon.Here's the rendered Polygon.

Ein gerendertes Polygon

Tipp  Ein Point-Wert wird in XAML oft als Typ für andere Szenarien als das Deklarieren der Scheitelpunkte von Formen verwendet.Tip  A Point value is often used as a type in XAML for scenarios other than declaring the vertices of shapes. Ein Point ist beispielsweise Teil der Ereignisdaten für Fingereingabeereignisse, damit Sie ermitteln können, wo genau in Koordinatenbereich die Fingereingabeaktion stattgefunden hat.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. Weitere Informationen zu Point und dessen Verwendung in XAML oder Code finden Sie in der API-Referenz für Point.For more info about Point and how to use it in XAML or code, see the API reference topic for Point.

ZeileLine

Eine Line ist eine einfache Verbindung zweier Punkte in einem Koordinatenbereich.A Line is simply a line drawn between two points in coordinate space. Eine Line ignoriert alle Werte für Fill, da sie keinen Innenbereich hat.A Line ignores any value provided for Fill, because it has no interior space. Geben Sie bei einer Line Werte für die Eigenschaften Stroke und StrokeThickness an, da die Line andernfalls nicht gerendert werden kann.For a Line, make sure to specify values for the Stroke and StrokeThickness properties, because otherwise the Line won't render.

Sie verwenden keine Point-Werte, um eine Line-Form anzugeben, sondern diskrete Double-Werte für X1, Y1, X2 und Y2.You don't use Point values to specify a Line shape, instead you use discrete Double values for X1, Y1, X2 and Y2. Dadurch wird das Markup für horizontale oder vertikale Linien minimiert.This enables minimal markup for horizontal or vertical lines. Beispielsweise definiert <Line Stroke="Red" X2="400"/> eine horizontale Linie mit einer Länge von 400 Pixeln.For example, <Line Stroke="Red" X2="400"/> defines a horizontal line that is 400 pixels long. Die anderen X,Y-Eigenschaften sind standardmäßig 0. Mit diesem XAML wird daher bei Punkten eine Linie von (0,0) bis (400,0) gezeichnet.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). Anschließend können Sie TranslateTransform zum Verschieben der gesamten Line verwenden, wenn sie an einem anderen Punkt als (0,0) beginnen soll.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

Eine Polyline ähnelt einem Polygon, da bei beiden die Grenze der Form durch eine Reihe von Punkten definiert wird. Bei einer Polyline wird jedoch der letzte Punkt nicht mit dem ersten verbunden.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.

Hinweis  Sie könnten zwar in den Points explizit einen identischen Anfangs- und Endpunkt für Polyline festlegen. In diesem Fall sollten Sie jedoch wahrscheinlich eher ein Polygon verwenden.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.

Wenn Sie die Fill einer Polyline angeben, füllt Fill den Innenraum der Form. Dies gilt auch, wenn der Anfangs- und Endpunkt der Points, die für Polyline festgelegt wurden, keine Überschneidungen aufweisen.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. Wenn Sie keine Fill angeben, ähnelt die Polyline dem Rendering für mehrere einzelne Line-Elemente, bei denen sich die Anfangs- und Endpunkte aufeinander folgender Linien überschneiden.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.

Wie bei einem Polygon definiert die Points-Eigenschaft die Sammlung von Punkten, die zusammen die Grenze ergeben.As with a Polygon, the Points property defines the collection of points that make up the boundary. In XAML definieren Sie die Punkte mit einer durch Trennzeichen getrennten Liste.In XAML, you define the points with a comma-separated list. Im CodeBehind verwenden Sie eine PointCollection, um die Punkte zu definieren, und fügen der Sammlung jeden einzelnen Punkt als eine Point-Struktur hinzu.In code-behind, you use a PointCollection to define the points and you add each individual point as a Point structure to the collection.

Im nächsten Beispiel wird eine Polyline mit vier Punkten bei (10,200), (60,140), (130,140) und (180,200) erstellt.This example creates a Polyline with four points set to (10,200), (60,140), (130,140), and (180,200). Es ist ein Stroke definiert, jedoch keine 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);

Dies ist die gerenderte Polyline. Beachten Sie, dass der erste und letzte Punkt nicht durch die Stroke-Umrandung miteinander verbunden sind, anders als bei einem Polygon.Notice that the first and last points are not connected by the Stroke outline as they are in a Polygon.

Eine gerenderte Polylinie

PfadPath

Ein Path ist die vielseitigste Shape-Klasse, da Sie mit dieser beliebige Geometrien definieren können.A Path is the most versatile Shape because you can use it to define an arbitrary geometry. Diese Vielseitigkeit führt jedoch auch zu Komplexität.But with this versatility comes complexity. Betrachten wir nun, wie ein einfacher Path in XAML erstellt wird.Let's now look at how to create a basic Path in XAML.

Sie definieren die Geometrie des Pfads mit der Data-Eigenschaft.You define the geometry of a path with the Data property. Es gibt zwei Techniken zum Festlegen von Data:There are two techniques for setting Data:

  • Sie können einen Zeichenfolgenwert für Data in XAML festlegen.You can set a string value for Data in XAML. In diesem Format verwendet der Path.Data-Wert ein Serialisierungsformat für Grafiken.In this form, the Path.Data value is consuming a serialization format for graphics. Nachdem er einmal festgelegt wurde, wird dieser Wert normalerweise nicht mehr als Zeichenfolge bearbeitet.You typically don't text-edit this value in string form after it is first established. Stattdessen arbeiten Sie mit Entwicklungstools in einer Entwurfs- oder Zeichnungsmetapher auf einer Oberfläche.Instead, you use design tools that enable you to work in a design or drawing metaphor on a surface. Anschließend speichern oder exportieren Sie die Ausgabe und erhalten eine XAML-Datei oder ein XAML-Zeichenfolgenfragment mit Path.Data-Informationen.Then you save or export the output, and this gives you a XAML file or XAML string fragment with Path.Data information.
  • Sie können die Data-Eigenschaft für ein einzelnes Geometry-Objekt festlegen.You can set the Data property to a single Geometry object. Die kann im Code oder in XAML erfolgen.This can be done in code or in XAML. Diese einzelne Geometry ist typischerweise eine GeometryGroup, die als Container dient und mehrere Geometriedefinitionen für das Objektmodell in einem Objekt zusammenfassen kann.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. In aller Regel wird diese Vorgehensweise gewählt, um mindestens eine der Kurven und komplexen Formen, die als Segments-Werte definiert werden können, für ein PathFigure zu verwenden, beispielsweise 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.

Dieses Beispiel zeigt einen Path, der möglicherweise daraus entstanden ist, dass Blend für Visual Studio zur Erzeugung einiger Vektorformen verwendet wurde und das Ergebnis als XAML gespeichert wurde.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. Der vollständige Path besteht aus einem Bézierkurven- und einem Liniensegment.The total Path consists of a Bezier curve segment and a line segment. Dieses Beispiel soll in erster Linie die Elemente im Path.Data-Serialisierungsformat zeigen und verstehen helfen, wofür die Zahlen stehen.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.

Diese Data beginnen mit dem move-Befehl, der durch „M“ gekennzeichnet ist und einen Anfangspunkt für den Pfad erstellt.This Data begins with the move command, indicated by "M", which establishes an absolute start point for the path.

Das erste Segment ist eine kubische Bézierkurve, die bei (100,200) beginnt und bei (400,175) endet. Sie wird mit zwei Kontrollpunkten bei (100,25) und (400,350) gezeichnet.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). Dieses Segment wird durch den „C“-Befehl in der Zeichenfolge des Data-Attributs angegeben.This segment is indicated by the "C" command in the Data attribute string.

Das zweite Segment beginnt mit dem Befehl „H“ für eine absolute horizontale Linie. Dieser gibt an, dass eine Linie vom bisherigen Endpunkt des Pfads, (400,175), zum neuen Endpunkt, (280,175), gezeichnet werden soll.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). Da es sich um einen Befehl für eine horizontale Linie handelt, ist der angegebene Wert eine x-Koordinate.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" />

Hier ist der gerenderte Pfad.Here's the rendered Path.

Screenshot eines einfachen gerenderten Pfads.

Das nächste Beispiel zeigt die Verwendung der anderen vorgestellten Technik: GeometryGroup mit PathGeometry.The next example shows a usage of the other technique we discussed: a GeometryGroup with a PathGeometry. Dieses Beispiel stellt einige der beteiligten Geometrietypen vor, die als Teil einer PathGeometry verwendet werden können: PathFigure und die verschiedenen Elemente, die als Segment in PathFigure.Segments dienen können.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);

Hier ist der gerenderte Pfad.Here's the rendered Path.

Screenshot eines komplexen gerenderten Pfads.

Durch die Verwendung von PathGeometry wird das Ergebnis lesbarer als durch das Ausfüllen einer Path.Data-Zeichenfolge.Using PathGeometry may be more readable than populating a Path.Data string. Andererseits verwendet Path.Data eine Syntax, die mit Imagepfaddefinitionen für skalierbare Vektorgrafiken (SVG) kompatibel ist. Daher kann es nützlich sein, Grafiken aus SVG oder als Ausgabe von einem Tool wie etwa Blend zu portieren.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.