概述

Silverlight 2 Beta 1版本發布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, Ironpython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學Silverlight 2系列》文章帶您快速進入Silverlight 2開發。

本文為系列文章第三篇，學習Silverlight 2中的界面布局，Silverlight 2中新增加了Grid和Panel兩個布局容器，使得界面布局更加的強大和靈活。

Canvas面板

Canvas是在Silverlight 1.0時代就有的一種基礎布局面板，它采用絕對坐標定位。可以使用附加屬性（Attached Property）對Canvas中的元素進行定位，通過附加屬性我們指定控件相對于其直接父容器Canvas 控件的上、下、左、右坐標的位置。如下面的XAML聲明了兩個矩形，它們分別相對于父容器Canvas的左邊距是50，相對于父容器Canvas的上邊距分別是50和150：

運行后界面的效果如下所示：

除了上面我們用到的Canvas.Top和Canvas.Left兩個附加屬性外，還有一個Canvas.ZIndex附加屬性。如果指定了兩個控件相對于父容器Canvas同樣的邊距，則后面聲明的控件父覆蓋前面聲明的控件。這時我們可以使用Canvas.ZIndex屬性來改變它們的顯示順序，如下面的XAML聲明：

<Canvas Background="#46461F">
    <Rectangle Fill="#0099FF" Width="160" Height="80"
               Canvas.Top="100" Canvas.Left="100">
    
    <Rectangle Fill="#FF9900" Width="160" Height="80"
             Canvas.Top="100" Canvas.Left="100"/>
</Canvas>

指定兩個矩形相對于父容器Canvas的邊距相同，這時默認的后聲明的橙色矩形會覆蓋藍色矩形：

指定Canvas.ZIndex為1

<Canvas Background="#46461F">
    <Rectangle Fill="#0099FF" Width="160" Height="80"
               Canvas.Top="100" Canvas.Left="100" Canvas.ZIndex="1"/>
    
    <Rectangle Fill="#FF9900" Width="160" Height="80"
             Canvas.Top="100" Canvas.Left="100"/>
</Canvas>

將會讓藍色矩形顯示在上面，值最大的顯示在最上面：