观察根Canvas,我们已经可以了解到一些属性的定制,比如只在根节点出现的定义xml名字空间(xmlns)以及自定义的xml名字空间(xmlns:x)。其中还有一些常用的属性,如宽(Width),高(Height)。在Canvas中,这两个属性既可以用像素值来表示,也可以用百分比来表示。x:Name表示该元素示例的名称,有了这个名称,我们就可以在.NET代码中操作这个元素示例。Background属性设置了背景的颜色,不设置这个值,则该元素透明。
每个元素都有属于自己的一组属性。比如,我们可以将刚才的代码改进一下:
<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="SilverlightTestProject.Page;assembly=ClientBin/SilverlightTestProject.dll"
Width="640"
Height="480"
Background="White">
<Canvas x:Name="subCanvas" Canvas.Left="123" Canvas.Top="117" Width="53" Height="39">
<Ellipse Fill="Yellow" Height="100" Width="200" StrokeThickness="2" Stroke="Black"/>
</Canvas>
<Rectangle x:Name="myRect" Canvas.Top="20" Canvas.Left="20" Width="100" Height="100" Fill="Blue" Stroke="Red" StrokeThickness="3" />
</Canvas>
则可以看到以下效果:

其中Fill指定了填充色,Stroke和StrokeThickness定制了形状的轮廓线条的颜色和粗细。我们可以看到根Canvas下的子元素(包括子容器Canvas)的位置属性均表示相对上一级Canvas的坐标位置。值得注意的是这里虽然矩形myRect超出了subCanvas定义的边界范围,但它并不会被subCanvas剪裁,且仍属于subCanvas中的元素。
顺便一提,目前我们只有Canvas一种容器,在不久的将来,Silverlight将会提供更多的容器,使布局管理更方便。
对象模型
在WPF中,XAML是.NET代码的xml表现形式;而在Silverlight中,我们同样有与XAML相对应的.NET语言编程方式。其中,每一个元素对应一个对象,元素属性在其.NET对象中都有对应的属性。例如先前一个例子中的矩形就可以用以下C#语言来表示:
Rectangle myRect = new Rectangle();
myRect .SetValue(Canvas.TopProperty, 117);
myRect .SetValue(Canvas.LeftProperty, 123);
myRect .Width = 100;
myRect .Height = 100;
SolidColorBrush brushBlue = new SolidColorBrush();
brushBlue.Color = Colors.Blue;
myRect .Fill = brushBlue;
SolidColorBrush brushRed = new SolidColorBrush();
brushRed.Color = Colors.Red;
myRect .Stroke = brushRed;
myRect .StrokeThickness = 3;
这里SolidColorBrush对象派生自Brush,是画刷的一种。Silverlight里定义了好几种不同的画刷对图形进行填充。属性Fill的默认画刷是SolidColorBrush,因此可以在.xaml文件中可以直接给Fill属性赋值,但在.NET语言中则必须明确指出画刷的类型。有关画刷的具体内容我们会在以后介绍。
刚才用C#定义出来的矩形还是独立的,如果要把它在界面上表示出来,则需要在其后加上下面这句代码将矩形加入上一级Canvas中:
Children.Add(myRect);
参考资料
Silverlight中所有的元素对象参考
Silverlight中所有的元素属性参考