稳扎稳打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://webabcd.blog.51cto.com/1787395/342779


示例
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
[源码下载]