図形の描画Draw shapes

楕円形、長方形、多角形、パスなどの図形を描画する方法について説明します。Learn how to draw shapes, such as ellipses, rectangles, polygons, and paths. Path クラスは、きわめて複雑なベクター ベースの画像記述言語を XAML UI で視覚化するための手段です。たとえば、ベジエ曲線を描画することができます。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:Path クラスWindows.UI.Xaml.Shapes 名前空間Windows.UI.Xaml.Media 名前空間Important APIs: Path class, Windows.UI.Xaml.Shapes namespace, Windows.UI.Xaml.Media namespace

2 つのクラスは、XAML UI の領域の領域を定義します。図形クラスと Geometry クラス。Two sets of classes define a region of space in XAML UI: Shape classes and Geometry classes. これらのクラス間の主な違いは、Shape にはブラシが関連付けられ、画面にレンダリングできますが、Geometry は単に空間領域を定義するだけで、レンダリングはされない (ただし、別の UI プロパティに情報を提供する働きはある) という点です。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. Shape は、Geometry で境界線が定義される UIElement と考えることができます。You can think of a Shape as a UIElement with its boundary defined by a Geometry. このトピックでは、主に Shape クラスについて説明します。This topic covers mainly the Shape classes.

Shape クラスには、LineEllipseRectanglePolygonPolylinePath があります。The Shape classes are Line, Ellipse, Rectangle, Polygon, Polyline, and Path. 中でも Path は、任意のジオメトリを定義できる興味深いクラスです。また、Geometry クラスは Path の構成要素を定義する方法の 1 つであるため、ここに関与します。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.

図形の Fill と StrokeFill and Stroke for shapes

Shape をアプリのキャンバスにレンダリングするには、Brush を関連付ける必要があります。For a Shape to render to the app canvas, you must associate a Brush with it. ShapeFill プロパティを目的の Brush に設定します。Set the Fill property of the Shape to the Brush you want. ブラシについて詳しくは、「ブラシの使用」をご覧ください。For more info about brushes, see Using brushes.

Shape には、Stroke という、図形の周囲に描画される境界線を設定することもできます。A Shape can also have a Stroke, which is a line that is drawn around the shape's perimeter. Stroke にも、その外観を定義する Brush が必要です。また、StrokeThickness が 0 以外の値に設定されている必要があります。A Stroke also requires a Brush that defines its appearance, and should have a non-zero value for StrokeThickness. StrokeThickness は、図形の境界線の太さを定義するプロパティです。StrokeThickness is a property that defines the perimeter's thickness around the shape edge. Stroke に対して Brush 値を指定しなかった場合、または StrokeThickness を 0 に設定した場合、図形の周囲に境界線が描画されません。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.

楕円形Ellipse

Ellipse は、曲線の境界を持つ図形です。An Ellipse is a shape with a curved perimeter. 基本的な Ellipse を作成するには、WidthHeight、および Fill に対する Brush を指定します。To create a basic Ellipse, specify a Width, Height, and a Brush for the Fill.

次の例では、Width を 200、Height を 200 に設定し、色が SteelBlueSolidColorBrushFill に指定して、Ellipse を作成します。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);

この Ellipse をレンダリングすると、次のようになります。Here's the rendered Ellipse.

レンダリングされた Ellipse。

この Ellipse は、ほとんどの人が円と考える形状になっていますが、XAML ではまさにこのようにして円形を宣言します。つまり、EllipseWidthHeight を等しい値に設定します。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.

Ellipse を UI レイアウトに配置すると、そのサイズは、対応する WidthHeight を持つ四角形と同じであると見なされます。境界の外側の領域は、レンダリングは適用されませんが、レイアウト スロットのサイズの一部として扱われます。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.

一連の 6 つの Ellipse 要素は ProgressRing コントロールのコントロール テンプレートの一部であり、2 つの同心の Ellipse 要素は 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.

四角形Rectangle

Rectangle は、向かい合った辺の長さがそれぞれ等しい四辺形です。A Rectangle is a four-sided shape with its opposite sides being equal. 基本的な Rectangle を作成するには、WidthHeightFill を指定します。To create a basic Rectangle, specify a Width, a Height, and a Fill.

Rectangle は、コーナーを角丸にすることもできます。You can round the corners of a Rectangle. 角丸コーナーを作成するには、RadiusX および RadiusY プロパティの値を指定します。To create rounded corners, specify a value for the RadiusX and RadiusY properties. これらのプロパティは、コーナーの曲線を定義する楕円形の X 軸と Y 軸を指定します。These properties specify the x-axis and y-axis of an ellipse that defines the curve of the corners. RadiusX の最大値は Width の 1/2 であり、RadiusY の最大値は Height の 1/2 です。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.

次の例では、Width が 200 で Height が 100 の Rectangle を作成します。The next example creates a Rectangle with a Width of 200 and a Height of 100. Fill には値が BlueSolidColorBrush を使い、Stroke には値が BlackSolidColorBrush を使っています。It uses a Blue value of SolidColorBrush for its Fill and a Black value of SolidColorBrush for its Stroke. StrokeThickness は 3 に設定します。We set the StrokeThickness to 3. RadiusX プロパティを 50、RadiusY プロパティを 10 に設定することで、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);

この Rectangle をレンダリングすると、次のようになります。Here's the rendered Rectangle.

レンダリングされた Rectangle。

ヒント:   UI 定義の一部のシナリオがあるのではなくを使用して、 四角形境界線より適切な場合があります。Tip  There are some scenarios for UI definitions where instead of using a Rectangle, a Border might be more appropriate. 一般に、コンテンツの周囲に四角形の図形を作成することが目的であるときは、Border の方が適しています。子のコンテンツを設定できるほか、高さと幅によってサイズが固定されている 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. Border は、CornerRadius プロパティを設定することによって、角に丸みを持たせることもできます。A Border also has the option of having rounded corners if you set the CornerRadius property.

また、Rectangle は、コントロールの合成に適したオプションであると考えられます。On the other hand, a Rectangle is probably a better choice for control composition. Rectangle の図形は多くのコントロール テンプレートで使われます。これは、フォーカス対応コントロールの "FocusVisual" 部分としてこの図形が使われるためです。A Rectangle shape is seen in many control templates because it's used as a "FocusVisual" part for focusable controls. コントロールが "Focused" の表示状態にある場合は常に、この四角形が表示されます。その他の状態にある場合は非表示です。Whenever the control is in a "Focused" visual state, this rectangle is made visible, in other states it's hidden.

多角形Polygon

Polygon は、任意の数の点によって境界線を定義した図形です。A Polygon is a shape with a boundary defined by an arbitrary number of points. 1 つの点から次の点まで直線でつなぎ、最後の点を最初の点につなぐことで、境界線を作成します。The boundary is created by connecting a line from one point to the next, with the last point connected to the first point. Points プロパティによって、境界線を構成する点のコレクションが定義されます。The Points property defines the collection of points that make up the boundary. XAML では、これらの点をコンマ区切り一覧で定義します。In XAML, you define the points with a comma-separated list. 分離コードでは、PointCollection を使って点のコレクションを定義し、それぞれの点を 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.

始点と終点が同じ 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. Polygon のレンダリング ロジックが、閉じた図形を想定して暗黙的に終点を始点に接続します。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.

次の例では、4 つの点を (10,200)(60,140)(130,140)(180,200) に設定した Polygon を作成します。The next example creates a Polygon with 4 points set to (10,200), (60,140), (130,140), and (180,200). Fill には、SolidColorBrushLightBlue 値を使います。Stroke には値を割り当てていないので、境界の輪郭は描画されません。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);

この Polygon をレンダリングすると、次のようになります。Here's the rendered Polygon.

レンダリングされた Polygon。

ヒント:   A ポイント図形の頂点を宣言する以外のシナリオの値がよく使用 XAML 内の型として。Tip  A Point value is often used as a type in XAML for scenarios other than declaring the vertices of shapes. たとえば、Point はタッチ イベントのイベント データの一部であるため、座標空間におけるタッチ操作が発生した位置を正確に認識することができます。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. Point の詳しい情報と、それを XAML やコードで使う方法については、API リファレンスの Point のトピックをご覧ください。For more info about Point and how to use it in XAML or code, see the API reference topic for Point.

直線Line

Line は、座標空間において 2 点間に描画される単純な直線です。A Line is simply a line drawn between two points in coordinate space. Line は内部領域を持たないため、Fill に何か値を指定してもすべて無視されます。A Line ignores any value provided for Fill, because it has no interior space. Line には、Stroke プロパティと StrokeThickness プロパティの値を必ず指定してください。指定しないと、Line はレンダリングされません。For a Line, make sure to specify values for the Stroke and StrokeThickness properties, because otherwise the Line won't render.

Line 図形を指定する際、Point 値は使いません。X1Y1X2Y2 のそれぞれに対して個別に Double 値を指定します。You don't use Point values to specify a Line shape, instead you use discrete Double values for X1, Y1, X2 and Y2. これで、水平方向または垂直方向の直線に対する最低限のマークアップは完成します。This enables minimal markup for horizontal or vertical lines. たとえば、長さ 400 ピクセルの水平方向の直線を定義するには、<Line Stroke="Red" X2="400"/> とします。For example, <Line Stroke="Red" X2="400"/> defines a horizontal line that is 400 pixels long. その他の X,Y プロパティは既定で 0 に設定されるため、点で見た場合、この XAML は (0,0) から (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). (0,0) 以外の点から開始する必要がある場合は、TranslateTransform を使って Line 全体を移動することができます。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 は、Polygon と同様に、図形の境界線を点のセットによって定義しますが、Polyline では最後の点が最初の点に接続されません。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.

   、同一の開始点と終点で明示的にあるでした、 ポイントの設定、 ポリラインが、その場合はおそらくを使用しても、 多角形代わりにします。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.

PolylineFill を指定した場合、Polyline に対して設定された Points の始点と終点が交わらなくても、図形の内部領域が Fill によって塗りつぶされます。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. PolylineFill を指定しなかった場合のレンダリングは、複数の Line 要素を個別に指定し、前の直線の終点が次の直線の始点と交わるようにした場合と同様の結果となります。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.

Polygon の場合と同様に、Points プロパティによって境界線を構成する点のコレクションが定義されます。As with a Polygon, the Points property defines the collection of points that make up the boundary. XAML では、これらの点をコンマ区切り一覧で定義します。In XAML, you define the points with a comma-separated list. コード ビハインドでは、PointCollection を使って点のコレクションを定義し、それぞれの点を 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.

次の例では、4 つの点を (10,200)(60,140)(130,140)(180,200) に設定した Polyline を作成します。This example creates a Polyline with four points set to (10,200), (60,140), (130,140), and (180,200). Stroke は定義されていますが、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);

この Polyline をレンダリングすると、次のようになります。 Polygon とは異なり、Stroke の最初と最後の点が接続されないことに注意してください。Notice that the first and last points are not connected by the Stroke outline as they are in a Polygon.

レンダリングされた Polyline。

パスPath

Path は、任意の形状を定義するために使える、最も用途が広い Shape です。A Path is the most versatile Shape because you can use it to define an arbitrary geometry. ただし、用途が広い反面、複雑さも伴います。But with this versatility comes complexity. 次に、XAML で基本的な Path を作成する方法を紹介します。Let's now look at how to create a basic Path in XAML.

パスの形状は、Data プロパティで定義します。You define the geometry of a path with the Data property. Data の設定には次の 2 つの方法があります。There are two techniques for setting Data:

  • Data には、XAML で文字列値を設定することができます。You can set a string value for Data in XAML. この場合、Path.Data の値には、グラフィックスのシリアル化形式が使われます。In this form, the Path.Data value is consuming a serialization format for graphics. 一般に、いったん構築されたこの値をテキストとして (文字列形式として) 編集することはしません。You typically don't text-edit this value in string form after it is first established. サーフェス上のデザインや図面のメタファーを扱うことのできるデザイン ツールを使います。Instead, you use design tools that enable you to work in a design or drawing metaphor on a surface. その出力結果を保存 (またはエクスポート) すると、Path.Data 情報を含んだ XAML ファイルまたは XAML 文字列フラグメントが得られます。Then you save or export the output, and this gives you a XAML file or XAML string fragment with Path.Data information.
  • Data プロパティは、単一の Geometry オブジェクトに設定できます。You can set the Data property to a single Geometry object. この設定は、コードまたは XAML で行うことができます。This can be done in code or in XAML. この単一の Geometry は通常、GeometryGroup です。オブジェクト モデルの趣旨に沿って、複数のジオメトリ定義を 1 つのオブジェクトに合成できるコンテナーとして機能します。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. これは主に、PathFigureSegments 値として定義される曲線と複雑な図形を、場合によっては複数組み合わせて使う必要があるとき (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.

この例に示す Path は、Blend for Visual Studio を使っていくつかのベクター図形を生成し、その結果を 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. Path 全体は、ベジエ曲線セグメントと直線セグメントから成ります。The total Path consists of a Bezier curve segment and a line segment. この例の目的は、Path.Data のシリアル化形式にどのような要素が存在し、各数値が何を表しているかをわかりやすく紹介することです。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.

この Data は、"M" で示される移動コマンドによって開始され、これによってパスの絶対開始点が設定されます。This Data begins with the move command, indicated by "M", which establishes an absolute start point for the path.

最初のセグメントは、(100,200) から始まり (400,175) で終わる三次ベジエ曲線であり、2 つの制御点 (100,25) および (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). このセグメントは、Data 属性文字列の "C" コマンドによって示されます。This segment is indicated by the "C" command in the Data attribute string.

2 番目のセグメントは、絶対水平直線コマンド "H" によって開始されます。これは、前のサブパスの終点 (400,175) から新しい終点 (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). これは水平直線コマンドであるため、指定される値は 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" />

この Path をレンダリングすると、次のようになります。Here's the rendered Path.

レンダリングされた Path。

次の例は、説明済みの手法である PathGeometry を使った GeometryGroup の使用方法を示しています。The next example shows a usage of the other technique we discussed: a GeometryGroup with a PathGeometry. この例の実行の一部として使用できる関係している geometry 型の一部をPathGeometry:PathFigure 内のセグメントを使用可能なさまざまな要素と 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);

この Path をレンダリングすると、次のようになります。Here's the rendered Path.

レンダリングされた Path。

PathGeometry を使うと、Path.Data 文字列を設定した場合よりも読みやすくなることがあります。Using PathGeometry may be more readable than populating a Path.Data string. また、Path.Data では、スケーラブル ベクター グラフィックス (SVG) の画像パスの定義と互換性のある構文が使われます。これにより、SVG からグラフィックスを移植したり、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.