入门3--了解silverlight 1.0 XAML提供的图形元素

以下介绍polygon,polyline,Path.

原理上来讲,polygon可以自动将第一个起始点与最后一个起始点自动连接起来.故polygon元素对象是一个拥有任意边界的封闭图形,也就是多边形.

polyline可以则不会自动将第一个起始点与最后一个起始点自动连接起来.故polyline元素对象是一串线段的连接,所构成的形状是非封闭的.

代码1:

==================================

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <polyline Canvas.Left="20" Canvas.Top="10"
      Points="50,0 100,50 150,0 200,50 100,50" stroke="Black" strokeThickness="5" />

  <polyline Points="170,150 170,250 270,150"
    stroke="Black" strokeThickness="5"/>

  <polyline Points="0,150 50,200 100,150 150,200 50,200" stroke="Black" strokeThickness="5"
      Fill="Red" /> 
 
  <polygon Points="10,10 10,55 55,10"
      stroke="Black" strokeThickness="5" Fill="LightBlue"/>
 
</Canvas>

==================================

代码1粘贴到入门1中myxaml.xaml文件中,后双击入门1中SampleHTMLPage.html文件,就可看到四个图形,其中左上角的正方形是由polygon元素绘制渲染的,其他三个连接线段则由polyline元素绘制渲染.

这里stroke,Fill,strokeThickness的属性与Rectangle,Ellipse元素对象的类似,分别表示,边框色,内部填充色,和边框宽度.

Points元素对象从代码1中可以看出,是一连串的(X1,Y1),(X2,Y2),......等坐标值,注意:这里每组坐标必须以空格分开

为了使朋友们能看清楚polygon,polyline之间的区别,这里再给出一段代码

代码2:

=================================

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <polygon Canvas.Left="20" Canvas.Top="10"
      Points="0,30 40,0 80,30 65,80 15,80" stroke="Black" strokeThickness="5" Fill="GreenYellow"/>

  <polyline Canvas.Left="20" Canvas.Top="120"
      Points="0,80" stroke="Black" strokeThickness="5" Fill="GreenYellow"/>
 
</Canvas>

==================================

代码2粘贴到入门1中myxaml.xaml文件中,后双击入门1中SampleHTMLPage.html文件,就可看到.

上面的是个封闭的正五边形,下面的是不封闭的四边形.

polyline也可以造成封闭的效果,只需要将最后一个点接回起始点即可,修改代码2后,我们就可看到,

代码3(修改代码2):

=================================

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <polygon Canvas.Left="20" Canvas.Top="10"
      Points="0,80 0,30" stroke="Black" strokeThickness="5" Fill="GreenYellow"/>
 
</Canvas>

==================================

看到了吧,不过手工封闭的polyline,其线条并没有完美的接合在一起.

 

下面接着介绍Path元素对象:

这里与以前介绍的图形元素的stroke,Fill,strokeThickness属性表示是一样的.Path元素对象语法最为复杂,可以一次包含多个矩形,直线圆形和曲线等几何图形,不容易理解.

先看看Path元素对象重要属性stroke,Fill,strokeThickness,Data.这里与以前介绍的图形元素的stroke,Fill,strokeThickness属性表示是一样的.

Data是什么属性?当要使用Path元素对象时,必须用Data属性值对Path绘制渲染,也就是说,如果没有设置Path属性值,或者设置为空,则我们什么也看不到,这里必须使用一种特殊类型的语法来设置其Data属性,先看一个例子:

代码4:

==================================

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
  <Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"
      stroke="Black" Fill="SlateBlue"
      Canvas.Left="10" Canvas.Top="10" />

  <Path Data="M 10,100 C 10,300 300,-200 250,100z"
      stroke="Red" Fill="Orange"
      Canvas.Left="10" Canvas.Top="10" />

  <Path Data="M 0,200 L100,50z"
      stroke="Black" Fill="Lime"
      Canvas.Left="150" Canvas.Top="70" />

</Canvas>

==================================

代码4粘贴到入门1中myxaml.xaml文件中,后双击入门1中SampleHTMLPage.html文件,就可看到三个Path图形,这里我摘出Data属性值进行剖析,对Data="M 0,50z来说,就是以(0,200)坐标为起点,以直线方式连接(100,200) ,再以(100,200)点为起点,以直线连接(50,50),最后再以(50,50)为起点,以直线方式连接(0,200),最后,绘制成一个三角形,这里因为Canvas.Left="150" Canvas.Top="70"的缘故,所以,实际的绘制是以"M 150,270 L250,270 200,120z"绘制的.这里"z"表示的意思就是终结点连接起始点.
 

                                                                                                                      锐意进取 大胆创新                                                                                               蒙哥马利 朱

 

相关文章

如何在Silverlight4(XAML)中绑定IsEnabled属性?我试过简单的...
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,...
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如...
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不...
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明:...
我需要根据Silverlight中的某些配置值设置给定控件的Style.我...