第十九章 Silverlight 中的布局面板控件 - Canvas

 

Silverlight 提供了 3 种面板控件用来定义页面布局和在页面中控件的位置。Canvas是布局控件之一。

Canvas 定义了一个区域，你通过制定 x 和y坐标的位置放置其他的控件。这样在Canvas中可能重叠多个控件。与通常的HTML相反，当控件在Canvas 重叠时，被重叠控件可以被其他控件隐藏。

当控件放置在 Canvas 中，使用 Canvas.Left和Canvas.Top属性为每个控件指定那个x 和y坐标。

此示例演示在 Canvas 中放置矩形控件并制定 x 和 y 坐标：

< Canvas Width ="500" Height ="500" Background ="White">

    <RectangleCanvas.Left="25" Canvas.Top ="40" Fill ="green" Width ="100"

              Height ="100" />

</ Canvas >

上面的 xaml 标签定义了矩形，填充绿色大小为 100 × 100 像素。这个矩形放置在离 Canvas 左边 25 像素，离Canvas顶端40 像素。

下面例子演示 3 个矩形相互重叠：

< Canvas Width ="500" Height ="500" Background ="White">

    <RectangleCanvas.Left="25" Canvas.Top ="40" Fill ="green" Width ="100"

              Height ="100" />

    <RectangleCanvas.Left="50" Canvas.Top ="65" Fill ="yellow" Width ="100"

              Height ="100" />

    <RectangleCanvas.Left="75" Canvas.Top ="90" Fill ="red" Width ="100"

              Height ="100" />

</ Canvas >

下面图形是输出的样子：

 

Silverlight入门知识学习目录