概述　　Silverlight 2 Beta 1版本发布了无论从Runtime还是Tools都给我们带来了很多惊喜如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython对JSON、Web Service、WCF以及Sockets支持等系列新特性步步学Silverlight 2系列文章将从Silverlight 2基础知识、数据和通信、自定义Control控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发

　　本文将简单介绍Silverlight中基本图形主要有Line、Ellipse、Rectangle、Path、Polygon、Polyline 6种它们的间继承关系如下所示:



　　在Silverlight中所有图形几乎都具有如下几个重要属性:

　　Stroke:对边框线填充

　　StrokeThickness:边框线宽度

　　Fill:对图形进行填充

　　Line　　Line顾名思义在两点的间画出条直线需要指定起始点(X1、Y1)和终结点(X2、Y2)坐标如下面例子:

<Canvas Background="#CDFCAE">
　　<Line Canvas.Top="20" Canvas.Left="20"
　　　　　X1="20" Y1="20" X2="400" Y2="20"
　　　　　Stroke="#FF9900" StrokeThickness="4">
　　</Line>
　　
　　<Line Canvas.Top="40" Canvas.Left="20"
　　　　　X1="20" Y1="40" X2="200" Y2="180"
　　　　　Stroke="#0099FF" StrokeThickness="5">
　　</Line>
　　
　　<Line Canvas.Top="20" Canvas.Left="240"
　　　　　X1="220" Y1="20" X2="220" Y2="200"
　　　　　StrokeThickness="6">
　　　　<Line.Stroke>
　　　　　　<LinearGradientBrush StartPo="0,0">
　　　　　　　　<GradientStop Color="#FFFFFF" Off="0.0" />
　　　　　　　　<GradientStop Color="#307801" Off="1.0" />
　　　　　　</LinearGradientBrush>
　　　　</Line.Stroke>
　　</Line>
</Canvas>　　运行后如下所示分别画出 3条直线:



　　Ellipse　　Ellipse即椭圆形如果设置长和高相等画出来将是圆形主要属性还是前面说那 3个如下面举例:

<Canvas Background="#CDFCAE">
　　<Ellipse Canvas.Top="20" Canvas.Left="40"
　　　　　　 Width="160" Height="80" Fill="#FF9900"
　　　　　　 Stroke="Black" StrokeThickness="3">
　　</Ellipse>
　　
　　<Ellipse Canvas.Top="20" Canvas.Left="260"
　　　　　　 Width="180" Height="100">
　　　　<Ellipse.Fill>
　　　　　　<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
　　　　　　　　RadiusX="0.5" RadiusY="0.5">
　　　　　　　　<GradientStop Color="#0099FF" Off="0" />
　　　　　　　　<GradientStop Color="#FF0000" Off="0.25" />
　　　　　　　　<GradientStop Color="#FCF903" Off="0.75" />
　　　　　　　　<GradientStop Color="#3E9B01" Off="1" />
　　　　　　</RadialGradientBrush>
　　　　</Ellipse.Fill>
　　</Ellipse>
　　
　　<Ellipse Canvas.Top="120" Canvas.Left="160"
　　　　　　 Width="100" Height="100" Fill="#FF9900"
　　　　　　 Stroke="#000000" StrokeThickness="2">
　　</Ellipse>
</Canvas>　　运行后如下所示显示 3个椭圆形:



　　Rectangle　　Rectangle看名称就知道是矩形设置长度和高度相等则为正方形其主要属性还是开始我们提到那 3个同时还可以通过RadiusX和RadiusY来设置它圆角效果看下面例子:

<Canvas Background="#CDFCAE">
　　<Rectangle Canvas.Top="20" Canvas.Left="40"
　　　　 Width="160" Height="80" Fill="#FF9900"
　　　　 Stroke="Black" StrokeThickness="3">
　　</Rectangle>
　　<Rectangle Canvas.Top="20" Canvas.Left="260"
　　　　 Width="180" Height="100">
　　　　<Rectangle.Fill>
　　　　　　<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
　　　　　　RadiusX="0.5" RadiusY="0.5">
　　　　　　　　<GradientStop Color="#0099FF" Off="0" />
　　　　　　　　<GradientStop Color="#FF0000" Off="0.25" />
　　　　　　　　<GradientStop Color="#FCF903" Off="0.75" />
　　　　　　　　<GradientStop Color="#3E9B01" Off="1" />
　　　　　　</RadialGradientBrush>
　　　　</Rectangle.Fill>
　　</Rectangle>
　　<Rectangle Canvas.Top="120" Canvas.Left="120"
　　　　 Width="100" Height="100"
　　　　 Stroke="#000000" StrokeThickness="2" RadiusX="15" RadiusY="15">
　　　　<Rectangle.Fill>
　　　　　　<LinearGradientBrush StartPo="0,1">
　　　　　　　　<GradientStop Color="#FFFFFF" Off="0.0" />
　　　　　　　　<GradientStop Color="#FF9900" Off="1.0" />
　　　　　　</LinearGradientBrush>
　　　　</Rectangle.Fill>
　　</Rectangle>
</Canvas>　　运行后如下所示其中有两个加上了渐变效果:

　

　　Path　　相比较前面 3个简单图形来说Path相对来说比较复杂它用来画出系列相连圆弧或者线条可以称的为“轨迹”使用它可以画出任意复杂形状主要通过Data属性来展现个简单Path声明举例如下:

<Canvas Background="#CDFCAE">
　　<Path Stroke="Orange" StrokeThickness="3"
　　　　　Data="M 10,40 L 300,40 V 100 H 240 S 300,240 400,175">
　　</Path>
</Canvas>　　运行后如下所示:



　　这里对Data做下简单解释Silverlight提供了种称的为“迷你语言”属性句法来描述如何画出轨迹形状包括M(移动命令起始点)、L(直线结束点)、H(水平线)、V(垂直线)、C( 3次贝塞尔曲线)、Q(两次贝塞尔曲线)、A(椭圆弧曲线)、Z(结束命令)等更为详细使用大家可以参考SDK

　　Polygon　　Polygon用来画多边形需要用Pos属性来指定几个特定点至于画几边形要看你定义几个点了(要看救生员啥时救他—宋丹丹语录)它会自动闭合

<Canvas Background="#CDFCAE">
　　<Polygon Canvas.Left="50" Canvas.Top="50"
　　　　　　 Pos="50,20 300,20 300,160 200,160"
　　　　　　 Stroke="Green" StrokeThickness="3" Fill="Orange">
　　</Polygon>
</Canvas>　　每个点的间用空格分开运行后如下所示:





　　Polyline　　Polyline用来画多边线和上面Polygon区别地方是它不定要是闭合同样用Pos属性来指定几个特定点我们定义个跟上面举例样Polyline:

<Canvas Background="#CDFCAE">
　　<Polyline Canvas.Left="50" Canvas.Top="50"
　　　　　　 Pos="50,20 300,20 300,160 200,160"
　　　　　　 Stroke="Green" StrokeThickness="3" Fill="Orange">
　　</Polyline>
</Canvas>　　运行后可以看到有条边未闭合:



　　结束语　　本文内容比较简单介绍了Silverlight中些基本图形