【萬裡征程——Windows App開發】繪製圖形，征程app

【萬裡征程——Windows App開發】繪製圖形，征程app

Rectangle
我們開篇先介紹一個之前用過，也是比較簡單的Rectangle。簡單的矩形就只用定義長和寬了，但如果要有圓角的話呢，用RadiusX和RadiusY就好啦。那麼RadiusX和RadiusY到底是什麼呢？看看就知道啦。

<Rectangle Fill="Yellow" Width="300" Height="200" Stroke="Blue"                   StrokeThickness="10" RadiusX="80" RadiusY="40"/>

和Rectangle類似，Border也可以建立矩形，而且後者還可以有自對象以及會自動調整大小，前者只能有固定的大小哦。

Ellipse
看到這個名字大家應該都知道是什麼意思吧，如果要定義成圓的話讓Height和Width屬性相等即可。

那童鞋們都知道ProgressRing是由6個Ellipse組成的嗎，RadioButton也是由2個同心的Ellipse組成的哦。

<Ellipse Fill="Blue" Height="200" Width="350"/>

Polygon
Polygon則顯得比較自由，只需要定義出各個頂點，它就會將這些點串連起來。那麼我們可能會有疑問，需不需要確定圖形的起始點和終點呢？答案是不用的，因為Polygon會自動將終點和起始點串連起來（它會假設圖形是閉合的）。

<Polygon Fill="Green" Points="0,0,100,0,100,100,0,100  "/>

如果要在後台C#檔案中來寫的話呢，原本的Point則由PointCollection來定義所有點後添加到一起。

可能還有童鞋會有疑問，如果要起始點和終點不串連起來，那該怎麼辦呢？

這個時候Polyline就閃亮登場啦。

雖說是閃亮登場，可我怎麼覺得線條是斜著的呢。

Line Stroke="Red" StrokeThickness="10" X1="100" Y1="0" Y2="400" X2="400"/>

既然不是封閉的，那加上Fill屬性會怎樣呢？

Line
Line的使用也比較簡單，但有一點要注意，必須設定好Stroke和StrokeThickness的屬性值，否則Line就不會顯示出來。原因很簡單，因為它是直線。

<Line Stroke="Red" StrokeThickness="10" X1="100" Y1="0" Y2="400" X2="400"/>

Path
最後上台的自然是最厲害的啦，先。

<Path Stroke="Gold"  StrokeThickness="7"               Data="M 0,0 C 100,200 50,200 40,150 H 200 V 100 "/>

前兩個屬性用過多次了，Data卻還挺複雜的。這裡有3個命令，M、C、H和V。如果按英文來記可能會容易些吧，分別是：Move、Control、Horizontal和Vertical。

那麼，重頭戲來了，先看圖^_^

接著上代碼。

  <Path Stroke="Black" StrokeThickness="1" Fill="red">                <Path.Data>                    <GeometryGroup>                                   <RectangleGeometry Rect="5,5 180,10" />                        <RectangleGeometry Rect="5,5 95,180" />                          <RectangleGeometry Rect="90,175 95,180"/>                           <RectangleGeometry Rect="5,345 180,10" />                            <EllipseGeometry                                        Center="95, 180" RadiusX="20"                               RadiusY="30"/>                                                 <PathGeometry>                            <PathGeometry.Figures>                                <PathFigureCollection>                                    <PathFigure IsClosed="true" StartPoint="50,50">                                        <PathFigure.Segments>                                            <PathSegmentCollection>                                                <BezierSegment Point1="100,180"                                                                Point2="125,100" Point3="150,50"/>                                                                                            </PathSegmentCollection>                                        </PathFigure.Segments>                                    </PathFigure>                                                                         <PathFigure IsClosed="true" StartPoint="40,310">                                        <PathFigure.Segments>                                            <PathSegmentCollection>                                                <BezierSegment Point1="90,180"                                                               Point2="115,250" Point3="140,310"/>                                            </PathSegmentCollection>                                        </PathFigure.Segments>                                    </PathFigure>                                </PathFigureCollection>                            </PathGeometry.Figures>                        </PathGeometry>                                      </GeometryGroup>                </Path.Data>            </Path>  

這張圖花了我好久時間呢，希望大家也都會畫，雖然作用不大，不過花著玩玩也不錯。

我在圖上大概加了一些標註啦，另外RectangleGeometry的Rect屬性有2個值，後者是相對於前者增加的長度哦。

最難的部分是BezierSegment，也就是貝賽斯曲線，其中StartPoint和Point3分別為起點和終點，而Point1和Point2不是路徑喲，只是給曲線的一個參考位移方向。具體大家可以上維基百科看看。

那麼這一篇就此結束啦，大家有興趣的話就動手試試咯。我們下一篇再見，感謝你們的支援。