稳扎稳打Silverlight(7) - 2.0图形之Ellipse, Line, Path, Polygon, Polyline, Rectangle

< UserControl  x:Class ="Silverlight20.Shape.Ellipse"

    xmlns ="http://scheR_33_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_33_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

        

         <!-- 椭圆 -->

         <!--

        Width - 椭圆的宽

        Height - 椭圆的高

        stroke - 边框

        strokeThickness - 边框尺寸

        Fill - 填充

         -->

         < Ellipse  stroke ="Red"  Fill ="Yellow"  strokeThickness ="6"  Width ="100"  Height ="50" ></ Ellipse >

        

     </ StackPanel >

</ UserControl >

< UserControl  x:Class ="Silverlight20.Shape.Line"

    xmlns ="http://scheR_33_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_33_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

        

         <!-- 线 -->

         <!--

        X1 - 起点的 X 坐标

        Y1 - 起点的 Y 坐标

        X2 - 终点的 X 坐标

        Y2 - 终点的 Y 坐标

        注：

            Line无填充，也就是Line的Fill属性无效

            坐标以左上角为原点，原点右侧/下侧为正方向

         -->

         < Line  X1 ="0"  Y1 ="100"  X2 ="200"  Y2 ="300"  stroke ="Black"  strokeThickness ="6"   />

        

     </ StackPanel >

</ UserControl >

< UserControl  x:Class ="Silverlight20.Shape.Path"

    xmlns ="http://scheR_33_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_33_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

        

         <!-- 绘制一系列相互连接的直线和曲线 -->

        

         <!--

        Path.Data - 要绘制的形状的 Geometry

         -->

         < Path  Fill ="Yellow"  stroke ="Red"  strokeThickness ="6" >

             < Path.Data >

                 <!-- 椭圆 -->

                 <!--

                Center - 原点坐标

                radiusX - X轴半径

                radiusY - Y轴半径

                 -->

                 < EllipseGeometry  Center ="50,25"  radiusX ="50"  radiusY ="25"   />

             </ Path.Data >

         </ Path >

         < Path  Fill ="Yellow"  stroke ="Red"  strokeThickness ="6" >

             < Path.Data >

                 <!-- 矩形 -->

                 <!--

                rect - 矩形的点坐标，分别为：左侧线的X轴坐标，上侧线的Y轴坐标，矩形宽，矩形高

                 -->

                 < RectangleGeometry  Rect ="100,100,50"   />

             </ Path.Data >

         </ Path >

         < Path  stroke ="Red"  strokeThickness ="6"   >

             < Path.Data >

                 <!-- 线 -->

                 <!--

                StartPoint - 起点坐标

                EndPoint - 终点坐标

                 -->

                 < LineGeometry  StartPoint ="200,0"  EndPoint ="300,100"   />

             </ Path.Data >

         </ Path >

        

         < Path  stroke ="Red"  strokeThickness ="6" >

             < Path.Data >

                 <!-- 一个可能由弧、曲线、椭圆、直线和矩形组成的复杂图形 -->

                 < PathGeometry >

                     < PathGeometry.figures >

                         <!--

                        StartPoint - 图形起点坐标

                         -->

                         < Pathfigure  StartPoint ="300,0" >

                             <!--

                            Pathfigure.Segments - 待画线的类型

                             -->

                             < Pathfigure.Segments >

                                 < PathSegmentCollection >

                                     <!--

                                    Linesegment - 单一线段

                                    PolyLinesegment - 线段集合

                                    arcSegment - 弧（椭圆的一部分）

                                    BezierSegment - 两点之间的一条三次贝塞尔曲线

                                    QuadraticBezierSegment - 两点之间的一条二次贝塞尔曲线

                                    PolyBezierSegment - 一条或多条三次贝塞尔曲线

                                    PolyQuadraticBezierSegment - 一条或多条二次贝塞尔曲线

                                     -->       

                                     <!--

                                    Size - 弧的X轴和Y轴半径

                                    Point - 该Segment的终点坐标，下一个Segment的起点坐标

                                     -->

                                     < ArcSegment  Size ="100,50"  Point ="400,100"   />

                                     <!--

                                    Point - 该Segment的终点坐标，下一个Segment的起点坐标

                                     -->

                                     < Linesegment  Point ="500,200"   />

                                 </ PathSegmentCollection >

                             </ Pathfigure.Segments >

                         </ Pathfigure >

                     </ PathGeometry.figures >

                 </ PathGeometry >

             </ Path.Data >

         </ Path >

         < Path  Fill ="Yellow"  stroke ="Red"  strokeThickness ="6" >

             < Path.Data >

                 <!-- 一个或多个Geometry -->

                 <!--

                FillRule - 填充规则 [System.Windows.Media.FillRule枚举]

                    EvenOdd 和 Nonzero，详见MSDN

                 -->

                 < GeometryGroup  FillRule ="EvenOdd" >

                     < LineGeometry  StartPoint ="200,100"   />

                     < EllipseGeometry  Center ="250,50"  radiusX ="50"  radiusY ="50"   />

                     < RectangleGeometry  Rect ="200, 0, 100, 100"   />

                 </ GeometryGroup >

             </ Path.Data >

         </ Path >

        

     </ StackPanel >

</ UserControl >

< UserControl  x:Class ="Silverlight20.Shape.Polygon"

    xmlns ="http://scheR_33_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_33_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

        

         <!-- 多边形，闭合图形，起点与终点自动相连 -->

         <!--

        Points - 构造路径所使用的点

            空格分隔点坐标，逗号分隔X轴和Y轴坐标

         -->

         < Polygon  Points ="0,0 100,0 300,100 200,100 100,200"  stroke ="Red"  strokeThickness ="6"  Fill ="Yellow"   />

        

     </ StackPanel >

</ UserControl >

< UserControl  x:Class ="Silverlight20.Shape.Polyline"

    xmlns ="http://scheR_33_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_33_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

         <!-- 非闭合图形，一串连接起来的线，起点与终点不会自动相连 -->

         <!--

        Points - 构造路径所使用的点

            空格分隔点坐标，逗号分隔X轴和Y轴坐标

         -->

         < Polyline  Points ="0,200"  stroke ="Red"  strokeThickness ="6"  Fill ="Yellow"   />

        

     </ StackPanel >

</ UserControl >

< UserControl  x:Class ="Silverlight20.Shape.Rectangle"

    xmlns ="http://scheR_33_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_33_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

        

         <!-- 矩形 -->

         <!--

        radiusX - 边角圆弧的X轴半径

        radiusY - 边角圆弧的Y轴半径

         -->

         < Rectangle  Width ="200"  Height ="120"  stroke ="Black"  strokeThickness ="6"  radiusX ="10"  radiusY ="30"   />

        

     </ StackPanel >

</ UserControl >