Silverlight繼承了WPF最重要的組成部分，那就是極其靈活的布局模式。使用這種布局模式，你可以將內容組織到一組不同的布局容器中。每個容器有其本身的布局邏輯，一種用來擺放元素(StackPanel)，另一種使用一個硬編碼的坐標系(Canvas)，最后一種用來將元素排列在不可見的單元格中(Grid)。甚至你可以創建自定義布局容器。
因為最頂層的UserControl定義了一個Silverlight頁面，僅能容納一個元素。要想裝載一個以上的元素，並且構建一個更加實用的用戶界面，你需要將容器放在網頁上，然后將其他元素添加到這個容器中。
Silverlight提供了三個Panel類的派生類來排列布局:StackPanel，Canvas和Grid。下面來分別介紹這三種布局容器。
StackPanel
StackPanel的布局邏輯是：將一組元素從上到下或從左到右排列(取決於Orientation)。
這里利用StackPanel布局，它定義了一段文本和一個按鈕。代碼如下：
<StackPanel Background="White">
<TextBlock x:Name="lbMsg" Text="Hello StackPanel" Margin="5"></TextBlock>
<Button x:Name="btnClick" Content="Click me" Margin="5"></Button>
</StackPanel>
效果如圖：
Canvas
Canvas畫布是Silverlight三個容器中最簡單的一個。它的布局邏輯是：用精確的坐標來放置元素。要在Canvas中布局元素，需要設置3個屬性：left坐標，top坐標以及ZIndex層。
要在XAML中設置附加屬性，要使用一種兩段式的語法。這兩部分用句點隔開，句點的左邊是要定義屬性類的名稱(例如Canvas)，右邊是該屬性的名稱(例如Top)。下面是關於Canvas布局的一個例子，在畫布中創建了一個矩形Rectangle和一個橢圓Ellipse，代碼如下。
View Code
<Canvas>
<Rectangle Name="rtg1" Canvas.Left="5" Canvas.Top="5" Width="100" Height="50" Stroke="Red" StrokeThickness="3"/>
<Ellipse Name="ell1" Canvas.Left="5" Canvas.Top="60" Width="100" Height="50" Stroke="Red" StrokeThickness="3"/>
</Canvas>
效果如圖：
注意，坐標起始於左上角，如果沒有設置Left和Top屬性，它們都默認為0，即該元素將被放置於Canvas的左上角。
Grid
Grid(或稱網格)是Silverlight中最強大的布局容器，Grid將元素分開放置到多行和多列組成的看不見的網格中，注意，盡管網格被設計成看不見的，但是可以通過將Grid.ShowGridLines屬性設置為true來使它顯示出來。
創建基於Grid的布局有兩個步驟，第一，選擇想要的列數事行數。第二，給包含的元素賦予合適的行和列。
下面是一個創建基於Grid的布局的例子，代碼如下：
View Code
<Grid ShowGridLines="True" Background="White">
<!--定義行和列-->
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--給放入的元素賦予合適的行和列-->
<Button Content="Top Left" Grid.Row="0" Grid.Column="0"/>
<Button Content="Middle Left" Grid.Row="0" Grid.Column="1"/>
<Button Content="Bottom Middle" Grid.Row="1" Grid.Column="1"/>
<Button Content="Bottom Right" Grid.Row="1" Grid.Column="2"/>
</Grid>
效果如圖：
注意：1,沒有必要在RowDefinition或ColumnDefinition元素中提供任何信息，如果它們為空，Grid將讓所有的行和列均勻共享該空間。
2,要把單獨的元素放入一個單元格中，需要使用Grid.Row和Grid.Column這兩個附加屬性。且這兩個附加屬性都是采用0作為默認的索引數字的。
3,如果要把元素放在第一個單元格中，可以不設置這兩個附加屬性的值，因為它們默認值為0，但最后是顯示地指定，因為這樣看起來更加清晰。
當然Grid還有3種尺寸調整策略和關於Grid的嵌套布局的內容可以結合實際使用的時候再去了解，今天要總結的就是這三種布局容器，下一篇將要總結的內容是關於Silverlight動畫，希望大家繼續支持，謝謝！