Silverlight学习之——Canvas对象

首先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 对对象进行绝对定位在某些情况下很有用，但是在大小可变的浏览器窗口中，这通常是一个很糟糕的策略。绝对定位不允许对象根据浏览器窗口的大小调整在页面上重新排列，对象保留在各自的指定像素位置。

转载于:https://www.cnblogs.com/shihao/archive/2009/12/17/1626095.html