一、WPF的基本圖形
WPF圖形的基類是Shape，所有的wpf圖形類都是繼承於Shape。Height，Width等決定它所處的面積，位置等，在沒有設置圖形寬高的情況，坐標位置為所在的容器的坐標，設置情況為對象自身。
1、Line：直線段，可以設置筆觸（Stroke）。
直線是最簡單的圖形。使用X1、Y1兩個屬性設置起點坐標，X2、Y2兩個屬性設置終點坐標。控制起點/終點坐標可以實現平行、交錯等效果。Stroke（筆觸）屬性的數據類型是Brush（畫刷）。
看下面一個例子：
<!--StrokeThickness：圖形輪廓的粗細度；StrokeDashArray：形狀輪廓的虛線間隙的樣式；StrokeStartLineCap/StrokeEndLineCap：直線始端/末端的圖形樣式，屬性值有Flat、Round、Square、Triangle-->
<Line X1="10" Y1="20" X2="500" Y2="20" Stroke="Pink" StrokeThickness="10"/> //stroke是顏色，strokethinkness是線條的寬度
<Line X1="10" Y1="50" X2="500" Y2="50" Stroke="Black" StrokeDashArray="3" StrokeThickness="1"/> //strokeDashArray是虛線間隙
<Line X1="10" Y1="80" X2="500" Y2="80" Stroke="Pink" StrokeEndLineCap="Flat" StrokeThickness="10"/>
<Line X1="10" Y1="110" X2="500" Y2="110" Stroke="Pink" StrokeEndLineCap="Round" StrokeThickness="10"/>
<Line X1="10" Y1="140" X2="500" Y2="140" Stroke="Pink" StrokeEndLineCap="Square" StrokeThickness="10"/>
<Line X1="10" Y1="170" X2="500" Y2="170" Stroke="Pink" StrokeEndLineCap="Triangle" StrokeThickness="10"/>
效果如下：
2、Rectangle：矩形，由筆觸（Stroke）和填充（Fill）構成。
看下面一個例子：
<Rectangle Width="100" Height="100" Fill="Pink" Stroke="Red" StrokeThickness="2"/>
看下面一個例子，將矩形繪制成圓角的矩形
<Rectangle Width="200" Height="200" StrokeDashArray="3" Fill="Transparent" Stroke="Blue" StrokeThickness="15"
StrokeDashCap="Flat" StrokeDashOffset="100" StrokeEndLineCap="Triangle" StrokeMiterLimit="10"
StrokeLineJoin="Round"/>
虛線也叫破折號模式
StrokeDashArray屬性，里面是一組double類型的數值，標識虛線，實線的長短，一個數字表示相同大小的虛部分和實部分，兩個數字表示虛部分和實部分的小小，再多表示第一段，第二段，第三段...
RadiusX和RadiusY屬性需要聯合使用表示角的角度，單獨設置不生效，RadiusX表示X軸方向角的彎曲度，RadiusY表示Y軸方向的彎曲度。
StrokeDashCap屬性用於設置虛線的時候，虛線段開除的形狀，無虛線不生效
StrokeDashOffset表示破折號開始的距離，偏移量
StrokeEndLineCap設置開始或結束處的形狀，閉合曲線無效
StrokeMiterLimit斜接長度與筆畫厚度之比的極限。這個值總是大於等於1的正數。
3、Ellipse橢圓，由筆觸（Stroke）和填充（Fill）構成。
Width和Height相等的橢圓便是正圓。看下面一個例子：
<Ellipse Width="120" Height="80" Fill="Pink" Stroke="Red" StrokeThickness="2" />
4、Polygon多邊形，
看下面一個例子：
<Polygon Points="100,150 400,150 140,320 250,50 360,320" StrokeThickness="2" Stroke="Pink"/>
Points屬性則代表了多邊形點的集合。
IsClosed 指定多邊形的最后一個點是否和第一個點閉合。為了成為一個多邊形。一般應該被設置為true
ArcRoundness 屬性指定了從距離LineSegment終點多遠的距離開始彎曲，通常和UseRoundnessPercentage 一起使用。
UseRoundnessPercentage屬性指定了ArcRoundness 值是百分比還是一個固定的值。
例如：ArcRoundness 被設置成10，而且UseRoundnessPercentage 被設置成false，那么彎曲將會在距離線段終點10的地方開始。而如果UseRoundnessPercentage 被設置成ture。則會是從線段終點10%的地方開始彎曲。
5、Polyline多線型，由多條首尾相接的直線組成。
看下面一個例子：
<Polyline Points="50,200 100,80 200,80 150,120" StrokeThickness="2" Stroke="Pink"/>
注意：
Polyline繪制折線在小角度（比如幾度）的時候會出現不連續的現象，形成拐角的兩條線段中有一段會超出，角度越小越明顯。
問題如下圖：
可以通過自定義shape解決，在重寫DefiningGeometry時如下書寫代碼即可：
using (StreamGeometryContext context = sg.Open())
{
context.BeginFigure(Points[0], true, false);
foreach (Point p in Points)
{
context.LineTo(p, true, true);
}
}
6、Path路徑，可以將直線、弧形、曲線等基本元素結合起來，形成更復雜的圖形。
Path最重要的屬性：Data看下面一個例子：
<!-- M：移動到起始點 C：三次方貝塞爾曲線-->
<Path Stroke="Red" StrokeThickness="2" Data="M 240,240 C 160,80 320,80 240,240"/>
<Path x:Name="PathFillColor" Fill="{TemplateBinding Property=Button.Background}"> <Path.Data> <PathGeometry> <PathFigure StartPoint="1,24" IsClosed="True"> <LineSegment Point="35,58"/> <ArcSegment Size="55,20" Point="59,48" SweepDirection="Clockwise"/> <LineSegment Point="59,1"/> <ArcSegment Size="80,80" Point="1,24" SweepDirection="Counterclockwise"/> </PathFigure> </PathGeometry> </Path.Data> </Path>
WPF提供兩個類來描述路徑數據：一個是StreamGeometry，另一個是PathFigureCollection。
<Path Stroke="Black" Data="M 100,240 C 510,300 80,100 300,160 H40 v80" />的形式是StreamGeometry的XAML代碼表示形式，也是最簡潔的表示形式。
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100" />
</Path.Data>
</Path>
這樣的方式是使用PathFigureCollection的XAML代碼表示方式。
這兩種方式都可以達至同一種顯示效果，那么，什么時候使用StreamGeometry，什么時候使用PathFigureCollection方式呢？
一般地，當你建立路徑后，不再需要修改時，可使用StreamGeometry方式，如果還需要對路徑數值進行修改，則使用PathFigureCollection方式（這里就是PathGeometry）。
下面來解釋一下“M 100,240 C510,300 80,100 300,160 H40 v80”這樣字符串的意義。
分為四種情況來解釋：
1. 移動指令：Move Command（M）：M 起始點 或者：m 起始點
比如：M 100,240或m 100,240
使用大寫M時，表示絕對值; 使用小寫m時; 表示相對於前一點的值，如果前一點沒有指定，則使用(0,0)。
2. 繪制指令(Draw Command):
我們可以繪制以下形狀：
(1) 直線:Line(L)
(2) 水平直線: Horizontal line(H)
(3) 垂直直線: Vertical line(V)
(4) 三次方程式貝塞爾曲線: Cubic Bezier curve(C)
(5) 二次方程式貝塞爾曲線: Quadratic Bezier curve(Q)
(6) 平滑三次方程式貝塞爾曲線: Smooth cubic Bezier curve(S)
(7) 平滑二次方程式貝塞爾曲線: smooth quadratic Bezier curve(T)
(8) 橢圓圓弧: elliptical Arc(A)
上面每種形狀后用括號括起的英文字母為命令簡寫的大寫形式，但你也可以使用小寫。使用大寫與小寫的區別是：大寫是絕對值，小寫是相對值。
比如：L 100, 200 L 300,400表示從絕對坐標點(100,200)到另一絕對坐標點(300,400)的一條直線。而l 100, 200 l 300,400則表示相對上一點（如果未指定，則默認為(0,0)坐標點）開始計算的坐標點(100,200)到坐標點為(300,400)的一條直線。
當我們重復使用同一種類型時，就可以省略前面的命令。比如：L 100, 200 L 300,400簡寫為：L 100, 200 300,400。
<Path Stroke="Black" StrokeThickness="1" Data="M 10,10 100,10 100,40 Z M 10,100 L 100,100 100,50 Z" />
這里有一個你暫時還沒見過的Z指令，它就是一個關閉指令（close Command），表示封閉指定形狀，即將首尾點連接起來形成封閉的區域。
繪制指令格式語法:
(1) 直線:Line(L)
格式：L 結束點坐標 或: l 結束點坐標。
比如：L 100,100 或 l 100 100。坐標值可以使用x,y（中間用英文逗號隔開）或x y（中間用半角空格隔開）的形式。
(2) 水平直線 Horizontal line(H)：繪制從當前點到指定x坐標的直線。
格式：H x值 或 h x值(x為System.Double類型的值)
比如：H 100或h 100，也可以是：H 100.00或h 100.00等形式。
(3) 垂直直線 Vertical line(V)：繪制從當前點到指定y坐標的直線。
格式：V y值 或 v y值(y為System.Double類型的值)
比如：V 100或y 100，也可以是：V 100.00或v 100.00等形式。
(4) 三次方程式貝塞爾曲線 Cubic Bezier curve(C)：通過指定兩個控制點來繪制由當前點到指定結束點間的三次方程貝塞爾曲線。
格式：C 第一控制點 第二控制點 結束點 或 c 第一控制點 第二控制點 結束點
比如：C 100,200 200,400 300,200 或 c 100,200 200,400 300,200
其中，點(100,200)為第一控制點，點(200,400)為第二控制點，點(300,200)為結束點。
(5) 二次方程式貝塞爾曲線 Quadratic Bezier curve(Q)：通過指定的一個控制點來繪制由當前點到指定結束點間的二次方程貝塞爾曲線。
格式：Q 控制點 結束點 或 q 控制點 結束點
比如：q 100,200 300,200。其中，點(100,200)為控制點，點(300,200)為結束點。
(6) 平滑三次方程式貝塞爾曲線: Smooth cubic Bezier curve(S)：通過一個指定點來“平滑地”控制當前點到指定點的貝塞爾曲線。
格式：S 控制點 結束點 或 s 控制點 結束點
比如：S 100,200 200,300
(7) 平滑二次方程式貝塞爾曲線 smooth quadratic Bezier curve(T)：與平滑三次方程貝塞爾曲線類似。
格式：T 控制點 結束點 或 t 控制點 結束點
比如：T 100,200 200,300
(8) 橢圓圓弧: elliptical Arc(A) : 在當前點與指定結束點間繪制圓弧。
A 尺寸 圓弧旋轉角度值 優勢弧的標記 正負角度標記 結束點
或：
a 尺寸 圓弧旋轉角度值 優勢弧的標記 正負角度標記 結束點
尺寸(Size): System.Windows.Size類型，指定橢圓圓弧X,Y方向上的半徑值。
旋轉角度（rotationAngle）：System.Double類型。
圓弧旋轉角度值（rotationAngle）：橢圓弧的旋轉角度值。
優勢弧的標記（isLargeArcFlag）：是否為優勢弧，如果弧的角度大於等於180度，則設為1，否則為0。
正負角度標記（sweepDirectionFlag）：當正角方向繪制時設為1，否則為0。
結束點（endPoint）：System.Windows.Point類型。
3. 關閉指令(close Command):用以將圖形的首、尾點用直線連接，以形成一個封閉的區域。
用Z或z表示。
7、幾何繪圖
圖形繪圖與幾何繪圖的區別：
圖形對象可以獨立存在，可以獨立繪制出具體需要的圖形。
幾何圖形對象沒有具體的形體，他需要依賴於某一對象元素而存在，不能直接呈現在畫板上
幾何繪圖包含5種對象：
LineGeometry： 直線幾何圖形
RectangleGeometry： 矩形幾何圖形
EllipseGeometry： 橢圓幾何圖形
PathGeometry： 路徑幾何圖形
GeometryGroup： 由多個基本幾何圖形組合在一起，形成的幾何圖形組
看下面一個例子：
<Grid Height="469" VerticalAlignment="Bottom"> <Grid.ColumnDefinitions> <ColumnDefinition Width="239*"/> <ColumnDefinition Width="253*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="100*"/> <RowDefinition Height="100*"/> <RowDefinition Height="100*"/> <RowDefinition Height="169*"/> </Grid.RowDefinitions> <!--直線--> <Path Stroke="Blue" StrokeThickness="2" Grid.Column="0" Grid.Row="0"> <Path.Data> <LineGeometry StartPoint="20,40" EndPoint="200,60"/> </Path.Data> </Path> <!--矩形路徑--> <Path Stroke="Pink" StrokeThickness="2" Grid.Column="1" Grid.Row="0"> <Path.Data> <!--Rect="40,20,60,60" 40,20為坐標起點，第三位數為寬度，第四位數為長度--> <RectangleGeometry Rect="40,20,60,60" RadiusX="10" RadiusY="10"/> </Path.Data> </Path> <!--橢圓路徑--> <Path Stroke="Yellow" Fill="Orange" Grid.Column="0" Grid.Row="1"> <Path.Data> <EllipseGeometry Center="100,50" RadiusX="60" RadiusY="40"></EllipseGeometry> </Path.Data> </Path> <!—幾何圖形組--> <Path Fill="Pink" Stroke="Red" StrokeThickness="2"> <Path.Data> <GeometryGroup FillRule="EvenOdd"> <EllipseGeometry Center="80,80" RadiusX="30" RadiusY="60"/> <LineGeometry StartPoint="20,40" EndPoint="200,60"/> <RectangleGeometry Rect="20,20,60,60" RadiusX="10" RadiusY="10"/> </GeometryGroup> </Path.Data> </Path> </Grid>
歡迎加qq群交流：568055323