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

[索引页]
[源码下载]

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

作者： webabcd


介绍
Silverlight 2.0 图形：
    Ellipse - 椭圆
    Line - 线
    Path - 一系列相互连接的直线和曲线
    polygon - 多边形，闭合图形，起点与终点自动相连
    polyline - 非闭合图形，一串连接起来的线，起点与终点不会自动相连
    Rectangle - 矩形


在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html


示例
1、Ellipse.xaml

< 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 >

2、Line.xaml

< 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 >

3、Path.xaml

< 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,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 >

4、polygon.xaml

< 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 >

5、polyline.xaml

< 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,200"  stroke ="Red"  strokeThickness ="6"  Fill ="Yellow"   />

        

     </ StackPanel >

</ UserControl >

6、Rectangle.xaml

< 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 >

OK
[源码下载]