Silverlight控件二Canvas布局.docx

　　好了，我想大多数人都应该知道这个Silverlight是如何启动的了。

不再赘言。

　　现在开始主题，使用Canvas来布局。

　　Canvas——中文的翻译是帆布，油画（布）。

这个很形象，在Silverlight中，Canvas就像一张油布一样，所有的控件都可以堆到这张布上。

　　而使用Canvas布局和使用传统的ASP.NET非常类似。

　　我们回顾一下我们使用ASP.NET的时候，我们创建一个Button，使这个Button距页面左侧和顶部分别是50和50：

　　　　.newStyle1

　　　　{

　　　　　　margin-left:

50px;

　　　　　　margin-top:

50px;

　　　　}

　　好了，接下来让我们看下在Silverlight的Canvas布局方式中，我们该如何去实现同样的效果.

　　在传统的ASP.NET中，我们是把整个Web页面作为一个画布，在上面摆置各种Web控件。

其实在Silverlight的Canvas布局中也是一样，我们也只是需要设置于Canvas的距离即可。

　　但是更为简单，毕竟抛弃了我们编程人员都讨厌的CSS，而使用了属性，我们来看：

看下效果：

　　恩，不错，但是纯白色的背景很难看诶！

换个背景色：

　　呵呵，别骂我，这么简单的也往上写！

我只是觉得他背景难看换一下罢了！

　　大家还记得组合模式么？

在布局中，这个模式简直太经典了!

　　恩！

详细的我就不说了，要不又该跑题了！

在Silverlight中，也是一样，布局控件一样是可以嵌套的。

　　我们来看个例子：

　　我们可以清楚地看到，即使是Button中设置了Canvas.Left=”0”和Canvas.Top=”0”，这个Button依然与页面的边框有距离，原因就在于Canvas嵌套。

这个我就不解释了。

　　在我们使用Canvas布局时，智能提示会给出这样的东西：

　　ZIndex，这究竟是个什么东西呢？

让我们来看这样一个例子：

　　效果如下：

　　大小，位置都相同，后创建的Button当然覆盖前一个Button，我们可以理解。

　　然而使用了ZIndex属性:

　　这就得到了这样的效果：

　　这就是ZIndex的作用，我们知道，我们生活在一个三维空间里（我们不考虑四维的空间）。

我们声明的Canvas.Top和Canvas.Left只描述了其中的二维，而ZIndex则描述的是第三维。

也就是我们在空间直角坐标系的Z轴。

　　好，最后说明Canvas的最后一个用途。

封装一组控件，还记得在Winform的应用中，我们经常使用Panel来封装一组控件，在Silverlight中，我们最常使用的就是Canvas.

　　而且，在Silverlight中，布局控件依然支持一系列的事件：

　　做个简单的例子吧：

　　然后看后台代码：

private　void　Canvas_MouseEnter（object　sender,　MouseEventArgs　e）

{

　　foreach　（Control　c　in　this.Canvas1.Children）

　　{

　　　　Button　b　=　c　as　Button;

　　　　if　（b　!

=　null）

　　　　{

　　　　　　b.Content　=　"按钮";

　　　　}

　　}

}

　　好了，看看效果吧：

　　好了，搞定！

　　今天Canvas布局就写到这里，要收拾行李了，明天坐车回北京。

　　欢迎大家继续关注《Silverlight玩转控件》系列，也希望大家多提出宝贵意见，谢谢。

来源：

博客园作者：

飞林沙