稳扎稳打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,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 >

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,0 100,0 300,100 200,100 100,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
[源码下载]