silverlight 1.0 XAML提供了六种基本图形元素对象:
Ellipse,Rectangle,Line,polygon,polyline,Path
先介绍Ellipse,Line这三种:
Ellipse:用来绘制渲染圆形或椭圆形
Rectangle:用来绘制渲染正方形或长方形
Line:用来绘制直线
范例:
==============================
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="500">
<Ellipse Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
stroke="Black" strokeThickness="10" Fill="SlateBlue"/>
<Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5"
stroke="Black" strokeThickness="10" Fill="SlateBlue"/>
<Line X1="280" Y1="10" X2="10" Y2="280"
stroke="Black" strokeThickness="5"/>
<Rectangle Height="50" Width="100" Canvas.Left="130" Canvas.Top="0"
stroke="Red" strokeThickness="5" Fill="Purple"
RadiusX="10" RadiusY="30"/>
<Rectangle Height="50" Width="100" Canvas.Left="130" Canvas.Top="110"
stroke="Orange" strokeThickness="5" Fill="Blue"
RadiusX="30" RadiusY="10"/>
<Rectangle Height="50" Width="100" Canvas.Left="130" Canvas.Top="220"
stroke="Red" strokeThickness="5" Fill="Black"
RadiusX="100" RadiusY="50"/>
</Canvas>
===========================
将以上代码,粘贴到上一讲中的myxaml.xaml文件中并保存,后双击上一讲中的SampleHTMLPage.html文件,就可以看到各种图形了:三个圆角矩形,一个正方形,一个圆形,一条直线
Height,Width,stroke,strokeThickness,Fill,Canvas.Left,Canvas.Top,RadiusX,RadiusY
其中Height,Width对于Rectangle元素来说表示长度和宽度,对于Ellipse元素来说表示垂直直径和水平直径,这里注意我们XMAL里所有元素赋值的时候用双引号,例如:
Height="100",Width="200"
stroke表示指边框填充色,Fill指图形内部填充色,strokeThickness指边框宽度,Canvas.Left决定该图形元素距离起父系画布左边界的距离,Canvas.Top决定该图形元素距离起父系画布上边界的距读者可以对照图形仔细观察学习
Canvas.Left="130" 的意思是距离父系画布左边界130像素
RadiusX,RadiusY属性只用在Rectangle元素中,,用来控制圆角矩形边角的圆弧程度
建议初学者试着修改各个属性变量的参数,以此来加强对图形元素属性的理解和应用.
这里顺便提一下z-order的问题(也就是对象之间谁覆盖谁的问题)
代码1:
==================================
<Ellipse Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
stroke="Black" strokeThickness="10" Fill="SlateBlue"/>
<Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5"
stroke="Black" strokeThickness="10" Fill="SlateBlue"/>
==================================
调换一下位置,如下:
====================================
<Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5"
stroke="Black" strokeThickness="10" Fill="SlateBlue"/>
<Ellipse Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
stroke="Black" strokeThickness="10" Fill="SlateBlue"/>
====================================
后运行SampleHTMLPage.html文件,然后就可以看到:
先前是正方形覆盖在圆形之上,调换两个元素代码在XAML文档中的位置后,圆形覆盖在了正方形之上.
也就是说,默认情况下,哪个元素后定义的,哪个元素就越接近前景.
这里XAML提供了一个附加属性Canvas.ZIndex,来控制z-order,我们不妨试一下:
代码3(在代码二的基础上,添加属性Canvas.ZIndex进行控制):
=====================================
<Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5"
stroke="Black" strokeThickness="10" Fill="SlateBlue" Canvas.ZIndex="2"/>
<Ellipse Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"
stroke="Black" strokeThickness="10" Fill="SlateBlue" Canvas.ZIndex="1"/>
=====================================
运行SampleHTMLPage.html文件,然后就可以看到:
正方形又覆盖在圆形之上,这里我们可以引申得知,对于自定义的z-order,属性Canvas.ZIndex设置的值越大,越接近前景;属性Canvas.ZIndex设置的值越小,越接近前景越远离前景.
锐意进取 大胆创新 蒙哥马利 朱