SilverLight学习之基本图形

Silverlight中的基本图形包括线 矩形 椭圆 多边形 多变线和路径，都是在System.Windows.Sharps命名空间下

1.线(line)

画线理所当然需要定义两个点，一个起始点，一个结束点

<Canvas x:Name="LayoutRoot" Background="White">

<Line X1="0" Y1="20" X2="100" Y2="20" Stroke="Red" StrokeThickness="5" Canvas.Left="20" Canvas.Top="10"/>
<Line X1="20" Y1="140" X2="150" Y2="60" Stroke="Blue" StrokeThickness="5" Canvas.Left="20" Canvas.Top="10"/>
<Line X1="30" Y1="10" X2="200" Y2="300" StrokeThickness="5" Canvas.Left="20" Canvas.Top="10">
<Line.Stroke>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Orange"/>
<GradientStop Offset="1" Color="Black"/>
</LinearGradientBrush>
</Line.Stroke>
</Line>

</Canvas>

效果



其中X1 Y1表示开始坐标。X2 Y2表示结束坐标。Stroke表示边框填充的颜色，StrokeThickness表示填充的厚度，大多说Shap类型的都有此属性。

2.矩形（Rectangle）

矩形需要定义长和宽

<Canvas x:Name="LayoutRoot" Background="White">

<Rectangle Width="150" Height="50" Stroke="Red" StrokeThickness="5" Canvas.Left="100" Canvas.Top="100" Fill="AliceBlue"/>
</Canvas>

效果



width代表的是矩形的长度，height代表矩形的宽度。当长度和宽度相同时，矩形自然变成了正方形。

<Canvas x:Name="LayoutRoot" Background="White">

<Rectangle Width="150" Height="150" Stroke="Red" StrokeThickness="5" Canvas.Left="100" Canvas.Top="100" Fill="AliceBlue"/>
</Canvas>

效果



矩形还有RadiusX RadiusY属性表示矩形边角的弧度，数字越大矩形的边角弧度越大

<Canvas x:Name="LayoutRoot" Background="White">

<Rectangle Width="150" Height="150" Stroke="Red" StrokeThickness="5" Canvas.Left="100" Canvas.Top="100" Fill="AliceBlue" RadiusX="5" RadiusY="5"/>
</Canvas>

如图



3.椭圆（Ellisepse）

画椭圆和矩形差不多，都需要定义width和height属性，当width和height相同时将变成圆形

<Canvas x:Name="LayoutRoot" Background="White">

<Ellipse Width="150" Height="50" Stroke="Red" StrokeThickness="5" Canvas.Left="100" Canvas.Top="40"/>
<Ellipse Width="150" Height="150" Stroke="Orange" StrokeThickness="5" Canvas.Left="100" Canvas.Top="100"/>
</Canvas>

如图



4.Polyline和Polygon

多边线和多边形都是通过多个点来定义的，每个空格之间的数字代表一个坐标（X,Y）。不同的是Polygon闭合的图形，而Polyline是不闭合的（起点和终点重合除外）

<Canvas x:Name="LayoutRoot" Background="White">

<Polyline Points="10,20 30,50 60,50 100,200" Stroke="Red" StrokeThickness="5" Canvas.Left="100" Canvas.Top="40"/>
<Polygon Points="10,20 30,50 60,50 100,200" Stroke="Orange" StrokeThickness="5" Canvas.Left="200" Canvas.Top="40"/>
</Canvas>

效果



上图左侧是多边线，右侧是多边形。可以看出来两个图形的坐标都是相同的，而多边形是闭合的。

（路径包含的内容较多，下次再写）