互联力量Silverlight之Canvas

Silverlight教程

 

在前面的内容中，我已经说到Silverlight多种布局控件，如 Grid，StackPanel，WrapPanel，DockPanel，这些用来布局的控件各有不同的用途。今天我们来学同样用来布局的控件――Silverlight Canvas，它是Silverlight布局控件中唯一使用坐标定位的容器控件，它不用象Grid那样行列复杂的嵌套，直接使用Canvas.Left和Canvas.Top就可以快速和精确的定义元素位置。

来看个简单的Silverlight Canvas例子，在下面的Silverlight Canvas中，定义了四个Button，它们分别通过Canvas的属性定义了各自的坐标位置，如下：

asp.net教程

跟互联力量学Silverlight之十二_Silverlight Canvas布局_图1

跟互联力量学Silverlight之十二_Silverlight Canvas布局_图2

从运行的结果可以看出，坐标的使用是很容易的，同时还可以实现元素在同一坐标之间的叠加效果，那么哪个元素在上，哪个在下呢，这就要用到Canvas.ZIndex属性。默认情况下，每个Canvas里面的元素Zindex值都是0，谁先呈现，谁就在下面，比如上例中的第三个Button。如果希望第三个Button显示在第四个Button的上面，可以在第三个Button加上Canvas.ZIndex=”1″，如：<Button Canvas.Left=”60″ Canvas.Top=”80″ Canvas.ZIndex=”1″ Height=”50″
Content=”(60,80)”></Button> ，运行的效果如下：

跟互联力量学Silverlight之十二_Silverlight Canvas布局_图3

武汉双证培训

有关Silverlight Canvas的应用，后面我还要讲些案例，大家可以结合起来理解。这次先说到这里。