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>

 

效果

 

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

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