穩紮穩打Silverlight(7) - 2.0圖形之Ellipse, Line, Path, Polygon, Polyline, Rectangle

<a href="http://webabcd.blog.51cto.com/1787395/342790" target="_blank">[索引頁]</a>

<a href="http://down.51cto.com/data/100302">[源碼下載下傳]</a>

穩紮穩打Silverlight(7) - 2.0圖形之Ellipse, Line, Path, Polygon, Polyline, Rectangle

介紹

Silverlight 2.0 圖形：

    Ellipse - 橢圓

    Line - 線

    Path - 一系列互相連接配接的直線和曲線

    Polygon - 多邊形，閉合圖形，起點與終點自動相連

    Polyline - 非閉合圖形，一串連接配接起來的線，起點與終點不會自動相連

    Rectangle - 矩形

線上DEMO

<a href="http://webabcd.blog.51cto.com/1787395/342779">http://webabcd.blog.51cto.com/1787395/342779</a>

示例

1、Ellipse.xaml

&lt;UserControl x:Class="Silverlight20.Shape.Ellipse" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt; 

        &lt;StackPanel HorizontalAlignment="Left"&gt; 

                &lt;!--橢圓--&gt; 

                &lt;!-- 

                Width - 橢圓的寬 

                Height - 橢圓的高 

                Stroke - 邊框 

                StrokeThickness - 邊框尺寸 

                Fill - 填充 

                --&gt; 

                &lt;Ellipse Stroke="Red" Fill="Yellow" StrokeThickness="6" Width="100" Height="50"&gt;&lt;/Ellipse&gt; 

        &lt;/StackPanel&gt; 

&lt;/UserControl&gt;

2、Line.xaml

&lt;UserControl x:Class="Silverlight20.Shape.Line" 

                &lt;!--線--&gt; 

                X1 - 起點的 X 坐标 

                Y1 - 起點的 Y 坐标 

                X2 - 終點的 X 坐标 

                Y2 - 終點的 Y 坐标 

                注： 

                        Line無填充，也就是Line的Fill屬性無效 

                        坐标以左上角為原點，原點右側/下側為正方向 

                &lt;Line X1="0" Y1="100" X2="200" Y2="300" Stroke="Black" StrokeThickness="6" /&gt; 

3、Path.xaml

&lt;UserControl x:Class="Silverlight20.Shape.Path" 

                &lt;!--繪制一系列互相連接配接的直線和曲線--&gt; 

                Path.Data - 要繪制的形狀的 Geometry 

                &lt;Path Fill="Yellow" Stroke="Red" StrokeThickness="6"&gt; 

                        &lt;Path.Data&gt; 

                                &lt;!--橢圓--&gt; 

                                &lt;!-- 

                                Center - 原點坐标 

                                RadiusX - X軸半徑 

                                RadiusY - Y軸半徑 

                                --&gt; 

                                &lt;EllipseGeometry Center="50,25" RadiusX="50" RadiusY="25" /&gt; 

                        &lt;/Path.Data&gt; 

                &lt;/Path&gt; 

                                &lt;!--矩形--&gt; 

                                Rect - 矩形的點坐标，分别為：左側線的X軸坐标，上側線的Y軸坐标，矩形寬，矩形高 

                                &lt;RectangleGeometry Rect="100,0,100,50" /&gt; 

                &lt;Path Stroke="Red" StrokeThickness="6" &gt; 

                                &lt;!--線--&gt; 

                                StartPoint - 起點坐标 

                                EndPoint - 終點坐标 

                                &lt;LineGeometry StartPoint="200,0" EndPoint="300,100" /&gt; 

                &lt;Path Stroke="Red" StrokeThickness="6"&gt; 

                                &lt;!--一個可能由弧、曲線、橢圓、直線和矩形組成的複雜圖形--&gt; 

                                &lt;PathGeometry&gt; 

                                        &lt;PathGeometry.Figures&gt; 

                                                &lt;!-- 

                                                StartPoint - 圖形起點坐标 

                                                --&gt; 

                                                &lt;PathFigure StartPoint="300,0"&gt; 

                                                        &lt;!-- 

                                                        PathFigure.Segments - 待畫線的類型 

                                                        --&gt; 

                                                        &lt;PathFigure.Segments&gt; 

                                                                &lt;PathSegmentCollection&gt; 

                                                                        &lt;!-- 

                                                                        LineSegment - 單一線段 

                                                                        PolyLineSegment - 線段集合 

                                                                        ArcSegment - 弧（橢圓的一部分） 

                                                                        BezierSegment - 兩點之間的一條三次貝塞爾曲線 

                                                                        QuadraticBezierSegment - 兩點之間的一條二次貝塞爾曲線 

                                                                        PolyBezierSegment - 一條或多條三次貝塞爾曲線 

                                                                        PolyQuadraticBezierSegment - 一條或多條二次貝塞爾曲線 

                                                                        --&gt;             

                                                                        Size - 弧的X軸和Y軸半徑 

                                                                        Point - 該Segment的終點坐标，下一個Segment的起點坐标 

                                                                        --&gt; 

                                                                        &lt;ArcSegment Size="100,50" Point="400,100" /&gt; 

                                                                        &lt;LineSegment Point="500,200" /&gt; 

                                                                &lt;/PathSegmentCollection&gt; 

                                                        &lt;/PathFigure.Segments&gt; 

                                                &lt;/PathFigure&gt; 

                                        &lt;/PathGeometry.Figures&gt; 

                                &lt;/PathGeometry&gt; 

                                &lt;!--一個或多個Geometry--&gt; 

                                FillRule - 填充規則 [System.Windows.Media.FillRule枚舉] 

                                        EvenOdd 和 Nonzero，詳見MSDN 

                                &lt;GeometryGroup FillRule="EvenOdd"&gt; 

                                        &lt;LineGeometry StartPoint="200,0" EndPoint="300,100" /&gt; 

                                        &lt;EllipseGeometry Center="250,50" RadiusX="50" RadiusY="50" /&gt; 

                                        &lt;RectangleGeometry Rect="200, 0, 100, 100" /&gt; 

                                &lt;/GeometryGroup&gt; 

4、Polygon.xaml

&lt;UserControl x:Class="Silverlight20.Shape.Polygon" 

                &lt;!--多邊形，閉合圖形，起點與終點自動相連--&gt; 

                Points - 構造路徑所使用的點 

                        空格分隔點坐标，逗号分隔X軸和Y軸坐标 

                &lt;Polygon Points="0,0 100,0 300,100 200,100 100,200" Stroke="Red" StrokeThickness="6" Fill="Yellow" /&gt; 

5、Polyline.xaml

&lt;UserControl x:Class="Silverlight20.Shape.Polyline" 

                &lt;!--非閉合圖形，一串連接配接起來的線，起點與終點不會自動相連--&gt; 

                &lt;Polyline Points="0,0 100,0 300,100 200,100 100,200" Stroke="Red" StrokeThickness="6" Fill="Yellow" /&gt; 

6、Rectangle.xaml

&lt;UserControl x:Class="Silverlight20.Shape.Rectangle" 

                &lt;!--矩形--&gt; 

                RadiusX - 邊角圓弧的X軸半徑 

                RadiusY - 邊角圓弧的Y軸半徑 

                &lt;Rectangle Width="200" Height="120" Stroke="Black" StrokeThickness="6" RadiusX="10" RadiusY="30" /&gt; 

OK

<a href="http://down.51cto.com/data/100302" target="_blank">[源碼下載下傳</a>

     本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/342831，如需轉載請自行聯系原作者