# 繪製圖形Draw shapes

The Shape classes are Line, Ellipse, Rectangle, Polygon, Polyline, and Path. Path 很有趣，因為它可以定義任意幾何圖形，而且這裡還涉及 Geometry 類別，因為這是定義 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.

## 圖形的填滿與筆觸Fill and Stroke for shapes

Shape 也可以包含 Stroke，這是在圖形周邊繪製的線條。A Shape can also have a Stroke, which is a line that is drawn around the shape's perimeter. Stroke 也需要 Brush 來定義外觀，且 StrokeThickness 應為非零的值。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，請指定 FillWidthHeight 以及 BrushTo create a basic Ellipse, specify a Width, Height, and a Brush for the 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>
``````

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.

## 矩形Rectangle

Rectangle 是對應邊相等的四邊形。A Rectangle is a four-sided shape with its opposite sides being equal. 若要建立基本的 Rectangle，請指定 WidthHeight 以及 FillTo create a basic Rectangle, specify a Width, a Height, and a Fill.

``````<Rectangle Fill="Blue"
Width="200"
Height="100"
Stroke="Black"
StrokeThickness="3"
``````
``````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;

// 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>
``````

## 多邊形Polygon

Polygon 是界限由任意數目的點所定義的形狀。A Polygon is a shape with a boundary defined by an arbitrary number of points. 建立界限的方式是以直線連接一個點到下一個點，最後一個點再連回第一個點。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.

``````<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();
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>
``````

## 線條Line

Line 只是在座標空間中兩點之間繪製的線條。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 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>
``````

## 聚合線條 Polyline

PolylinePolygon 類似，都是由一組點定義圖形的界限，不過 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.

``````<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();
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>
``````

## 路徑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 中建立基本的 PathLet'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 的技術有兩種：There are two techniques for setting Data:

• 您可以在 XAML 中設定 Data 的字串值。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，可以將多個幾何定義組合成單一物件的容器以作為物件模型之用。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 值的一或多個曲線與複合圖形，例如 BezierSegmentThe 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.

Data 由移動命令 (以 "M" 表示) 開始進行，該命令會建立路徑的絕對起點。This Data begins with the move command, indicated by "M", which establishes an absolute start point for the path.

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

``````<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<GeometryGroup>
<RectangleGeometry Rect="50,5 100,10" />
<RectangleGeometry Rect="5,5 95,180" />
<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);

var ellipseGeometry1 = new EllipseGeometry();
ellipseGeometry1.Center = new Point(100, 100);

var pathGeometry1 = new PathGeometry();
var pathFigureCollection1 = new PathFigureCollection();
var pathFigure1 = new PathFigure();
pathFigure1.IsClosed = true;
pathFigure1.StartPoint = new Windows.Foundation.Point(50, 50);
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);

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