首先Canvas为Silverlight提供的一个布局元素之一。每个子对象都呈现在Canvas区域中。通过指定X和Y坐标,可以控制对象在Canvas中的定位。这些坐标以为象素为单位。X和Y坐标通常使用Canvas.left和Canvas.Top的附加属性来指定。Canvas.Left 指定对象与包含它的 Canvas 的左侧之间的距离(x 坐标);Canvas.Top指定对象与包含它的Canvas 的顶部之间的距离(y 坐标)。
可以嵌套Canvas 对象。嵌套对象时,每个对象使用的坐标都是相对于直接包含该对象的Canvas 而言的。
每个子对象都必须是 UIElement。在 XAML 中,将子对象声明为对象元素,这些元素是 Canvas 对象元素的内部 XML。在代码中,可以通过获取由 Children 属性访问的集合来操作 Canvas 子对象的集合。
由于 Canvas 为 UIElement 类型,因此可以嵌套 Canvas 对象。
很多情况下,Canvas 仅仅用作其他对象的容器,而没有任何可见属性。如果满足以下任一条件,Canvas 即不可见:
- Height 属性等于 0。
- Width 属性等于 0。
- Background 属性等于 nullNothingnullptrunitnull 引用(在 Visual Basic 中为 Nothing)。
- Opacity 属性等于 0。
- Visibility 属性等于 Visibility.Collapsed。
- Canvas 的某个上级对象不可见。
由于绝对定位不考虑浏览器窗口的大小或浏览器大小调整,因此一般最好使用Grid或 StackPanel作为容器。
下面看几段示例代码:
代码1:
<Canvas Width="640" Height="480"Background="White">
<RectangleCanvas.Left="30" Canvas.Top="30"
Fill="red" Width="200" Height="200" />
</Canvas>
这边定义了一个Canvas对象,宽640,高480;在其中定位一个宽高均为200的矩形,其相对于Canvas的上方和右方均为30象素。
效果如下所示:
代码2:这边我们演示一个嵌套Canvas的示例
最外层的白色根Canvas包含一个嵌套的蓝色Canvas其(Canvas.left和Canvas.Top均为30)嵌套的蓝色Canvas当中包含一个红色的矩形,该矩形的 Canvas.Left和 Canvas.Top值也为 30。这将创建蓝色矩形框包围下的红色矩形效果。此相同布局可通过使用Border对象来实现。
<Canvas Width="300" Height="300" Background="White">
<Canvas Width="250" Height="250" Canvas.Left="30"
Canvas.Top="30" Background="blue">
<Rectangle Canvas.Left="30" Canvas.Top="30"
Fill="red" Width="200" Height="200" />
</Canvas>
</Canvas>
效果 :
这边提醒以下:这当中的矩形是相对于蓝色的Canvas进行定位的。换句话说也就是嵌套的元素会相对于其最近的Canvas进行定位。
在这里需要说明的一点是Canvas是使用绝对定位的。尽管使用 Canvas 对对象进行绝对定位在某些情况下很有用,但是在大小可变的浏览器窗口中,这通常是一个很糟糕的策略。绝对定位不允许对象根据浏览器窗口的大小调整在页面上重新排列,对象保留在各自的指定像素位置。