在接下來的幾篇文章中，我將來介紹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