在接下来的几篇文章中，我将来介绍Silverlight相关的布局知识。
在Silverlight中，布局主要有三种方式：
1. Cavas
2. StackPanel
3. Grid
在传统的ASP.NET中，我们知道，布局通常是通过传统的CSS+DIV来予以实现，但是在Silverlight中，我们更多的是通过布局控件+Style来予以实现，至少我的习惯是这样的。Style其实很类似于CSS。
好，转入正题，在这篇文章中，我主要来介绍Canvas控件的用法。
首先，让我们新建一个Silverlight 2的项目：
![image]( "image")
然后是这样：
![image]( "image")
好，如果没有错误的话，我们应该已经新建了一个Silverlight 2的项目文件，在项目中，我们可以看到：
![image]( "image")
我们来大致介绍一下：SilverlightApplication.Web是一个测试的页面文件。
这个就要从Silverlight的本质来说起，我不想为Silverlight拉广告，说Silverlight有哪里哪里的好，与传统的页面和Flash相比有什么优点之类的话，这些仁者见仁，智者见智。我也不妄加评论。我只是专心学我的微软技术就好了。
Silverlight其实我们可以把它当成一个用户控件的作用来理解，他不能独立运行，而需要一个ASP.NET网站或者HTML页面作为宿主来运行。而这个SilverlightApplication.Web下的SilverlightApplication1TestPage.aspx和SilverlightApplicationTestPage.html就是这个Silverlight项目的宿主测试页面。
在Silverlight编译后，会生成一个dll的文件，我们可以在Web应用中导入这个dll文件，就像我们导入其他的第三方控件一样，然后来使用我们所创建的Silverlight项目。
我们在第一次运行之后看看项目中的变化：
![image]( "image")
我们可以发现，多了一个xap文件，而在SilverlightApplication1TestPage.aspx中，我们可以发现玄机：
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <div style="height:100%;"> <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%"/> </div>
好了，我想大多数人都应该知道这个Silverlight是如何启动的了。不再赘言。
现在开始主题，使用Canvas来布局。
Canvas——中文的翻译是帆布，油画（布）。这个很形象，在Silverlight中，Canvas就像一张油布一样，所有的控件都可以堆到这张布上。
而使用Canvas布局和使用传统的ASP.NET非常类似。
我们回顾一下我们使用ASP.NET的时候，我们创建一个Button，使这个Button距页面左侧和顶部分别是50和50：
<head runat="server"> <title></title> <style type="text/css"> .newStyle1 { margin-left:50px; margin-top:50px; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="Button1" runat="server" Text="Button" CssClass="newStyle1" /> </div> </form> </body>
好了，接下来让我们看下在Silverlight的Canvas布局方式中，我们该如何去实现同样的效果.
在传统的ASP.NET中，我们是把整个Web页面作为一个画布，在上面摆置各种Web控件。其实在Silverlight的Canvas布局中也是一样，我们也只是需要设置于Canvas的距离即可。
但是更为简单，毕竟抛弃了我们编程人员都讨厌的CSS，而使用了属性，我们来看：
<Canvas> <Button Content="Button" Width="70" Height="30" Canvas.Left="50" Canvas.Top="50"></Button> </Canvas>
看下效果：
恩，不错，但是纯白色的背景很难看诶！换个背景色：
<Canvas Background="LightBlue"> <Button Content="Button" Width="70" Height="30" Canvas.Left="50" Canvas.Top="50"></Button> </Canvas>
呵呵，别骂我，这么简单的也往上写！我只是觉得他背景难看换一下罢了！
大家还记得组合模式么？在布局中，这个模式简直太经典了!
恩！详细的我就不说了，要不又该跑题了！在Silverlight中，也是一样，布局控件一样是可以嵌套的。
我们来看个例子：
<Canvas Background="LightBlue"> <Canvas Canvas.Left="50" Canvas.Top="50"> <Button Canvas.Left="0" Canvas.Top="0" Content="Button" Width="70" Height="30"></Button> </Canvas> </Canvas>
我们可以清楚地看到，即使是Button中设置了Canvas.Left=”0”和Canvas.Top=”0”，这个Button依然与页面的边框有距离，原因就在于Canvas嵌套。这个我就不解释了。
在我们使用Canvas布局时，智能提示会给出这样的东西：
ZIndex，这究竟是个什么东西呢？让我们来看这样一个例子：
<Canvas Background="LightBlue"> <Button Content="Button" Canvas.Left="20" Width="60" Height="30" Canvas.Top="30"></Button> <Button Content="Test" Canvas.Left="20" Width="60" Height="30" Canvas.Top="30"></Button> </Canvas>
效果如下：
大小，位置都相同，后创建的Button当然覆盖前一个Button，我们可以理解。
然而使用了ZIndex属性:
<Canvas Background="LightBlue"> <Button Content="Button" Canvas.ZIndex="2" Canvas.Left="20" Width="60" Height="30" Canvas.Top="30"></Button> <Button Content="Test" Canvas.ZIndex="1" Canvas.Left="20" Width="60" Height="30" Canvas.Top="30"></Button> </Canvas>
这就得到了这样的效果：
这就是ZIndex的作用，我们知道，我们生活在一个三维空间里（我们不考虑四维的空间）。我们声明的Canvas.Top和Canvas.Left只描述了其中的二维，而ZIndex则描述的是第三维。也就是我们在空间直角座标系的Z轴。
好，最后说明Canvas的最后一个用途。封装一组控件，还记得在Winform的应用中，我们经常使用Panel来封装一组控件，在Silverlight中，我们最常使用的就是Canvas.
而且，在Silverlight中，布局控件依然支持一系列的事件：
做个简单的例子吧：
<Canvas Background="LightBlue" MouseEnter="Canvas_MouseEnter" Name="Canvas1" > <Button Content="Button" Canvas.Left="20" Canvas.Top="20"></Button> <Button Content="Button" Canvas.Left="20" Canvas.Top="60"></Button> <Button Content="Button" Canvas.Left="20" Canvas.Top="100"></Button> </Canvas>
然后看后台代码：
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 = "按钮"; } } }
好了，看看效果吧：
好了，搞定！
原文：http://www.cnblogs.com/kym/archive/2009/02/02/1382756.html