随笔 - 616, 文章 - 0, 评论 - 10492
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
[索引页]
[源码下载]


稳扎稳打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
[源码下载]