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

<UserControl x:Class="Silverlight20.Shape.Ellipse" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://schemas.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://schemas.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://schemas.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://schemas.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://schemas.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,0,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,0" EndPoint="300,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://schemas.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://schemas.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://schemas.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
        <StackPanel HorizontalAlignment="Left"> 

                <!--非闭合图形，一串连接起来的线，起点与终点不会自动相连--> 
                <!-- 
                Points - 构造路径所使用的点 
                        空格分隔点坐标，逗号分隔X轴和Y轴坐标 
                --> 
                <Polyline Points="0,0 100,0 300,100 200,100 100,200" Stroke="Red" StrokeThickness="6" Fill="Yellow" /> 
                 
        </StackPanel> 
</UserControl>

<UserControl x:Class="Silverlight20.Shape.Rectangle" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://schemas.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>