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

来源：互联网发布：亚马逊大数据开发历史编辑：程序博客网时间：2024/05/04 12:30

silverlight 1.0 XAML提供了六种基本图形元素对象：

Ellipse,Rectangle,Line,Polygon,Polyline,Path

先介绍Ellipse,Rectangle,Line这三种：

Ellipse：用来绘制渲染圆形或椭圆形

Rectangle：用来绘制渲染正方形或长方形

Line：用来绘制直线

范例：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

</Canvas>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

将以上代码，粘贴到上一讲中的myxaml.xaml文件中并保存，后双击上一讲中的SampleHTMLPage.html文件，就可以看到各种图形了：三个圆角矩形，一个正方形，一个圆形，一条直线

通过以上的代码，我们学习到以下属性元素：

Height, Width, Stroke, StrokeThickness, Fill, Canvas.Left, Canvas.Top, RadiusX, RadiusY

其中Height, Width对于Rectangle元素来说表示长度和宽度，对于Ellipse元素来说表示垂直直径和水平直径，这里注意我们ＸＭＡＬ里所有元素赋值的时候用双引号，例如：

Height="100"，Width="200"

Stroke表示指边框填充色，Fill指图形内部填充色，StrokeThickness指边框宽度，Canvas.Left决定该图形元素距离起父系画布左边界的距离，Canvas.Top决定该图形元素距离起父系画布上边界的距读者可以对照图形仔细观察学习

Canvas.Left="130" 的意思是距离父系画布左边界130像素

RadiusX, RadiusY属性只用在Rectangle元素中，，用来控制圆角矩形边角的圆弧程度

建议初学者试着修改各个属性变量的参数，以此来加强对图形元素属性的理解和应用．

这里顺便提一下z-order的问题(也就是对象之间谁覆盖谁的问题)

还是借助以上代码，分析一下这个问题，首先将代码中的：

代码１：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

调换一下位置，如下：

代码２(调整代码１中两个元素先后定义的顺序)：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

后运行SampleHTMLPage.html文件，然后就可以看到：

先前是正方形覆盖在圆形之上，调换两个元素代码在ＸＡＭＬ文档中的位置后，圆形覆盖在了正方形之上．

也就是说，默认情况下，哪个元素后定义的，哪个元素就越接近前景．

这里XAML提供了一个附加属性Canvas.ZIndex，来控制z-order，我们不妨试一下：

代码３(在代码二的基础上，添加属性Canvas.ZIndex进行控制)：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

运行SampleHTMLPage.html文件，然后就可以看到:

正方形又覆盖在圆形之上，这里我们可以引申得知，对于自定义的z-order，属性Canvas.ZIndex设置的值越大，越接近前景；属性Canvas.ZIndex设置的值越小，越接近前景越远离前景．

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