Silverlight/WPF中有3個強大的佈局控件，StackPanel、Canvas、Grid，從字面上理解，StackPanel是一種堆的佈局，就是一個挨着一個的佈局方式；Canvas是一種基於畫板的佈局方式，我們把控件放到面板上定義好座標，這點跟Html中的Div佈局類似，只是所有Div的Position都是相對定位的；Grid是一種表格方式的佈局，這點很像是Html中的表格佈局，把控件一個一個的放在表格裏。
下面我們一一進行講解：
1.StackPanel佈局
StackPanel是一種堆的佈局方式，其中Orientation屬性，決定是水平排列，還是垂直排列，下面例子垂直排列
|
1
2
3
4
5
|
<StackPanel
Orientation="Vertical">
<Rectangle
Height="40"
Width="40"
Fill="Red"></Rectangle>
<Rectangle
Height="50"
Width="50"
Fill="Yellow"></Rectangle>
<Rectangle
Height="60"
Width="60"
Fill="Green"></Rectangle>
</StackPanel> |
結果：
垂直排列改爲：
|
1
2
3
4
5
|
<StackPanel
Orientation="Horizontal">
<Rectangle
Height="40"
Width="40"
Fill="Red"></Rectangle>
<Rectangle
Height="50"
Width="50"
Fill="Yellow"></Rectangle>
<Rectangle
Height="60"
Width="60"
Fill="Green"></Rectangle>
</StackPanel> |
結果：
2.Canvas佈局
Canvas是一種基於面板的佈局方式，我們需要設置好Canvas.Top，Canvas.Left，Canvas.ZIndex屬性，即相對面板的頂端距離，左端距離和顯示順序，因爲這種佈局是絕對定位的，需要設置好Canvas面板的高度和寬度
|
1
2
3
4
5
|
<Canvas
Width="500"
Height="500">
<Rectangle
Canvas.Top="0"
Canvas.Left="0"
Canvas.ZIndex="3"
Height="40"
Width="40"
Fill="Red"></Rectangle>
<Rectangle
Canvas.Top="30"
Canvas.Left="30"
Canvas.ZIndex="2"
Height="50"
Width="50"
Fill="Yellow"></Rectangle>
<Rectangle
Canvas.Top="50"
Canvas.Left="50"
Canvas.ZIndex="1"
Height="60"
Width="60"
Fill="Green"></Rectangle>
</Canvas> |
結果：
3.Grid佈局
Grid佈局是一種基於表格的佈局方式，這種方式更爲靈活，可以處理複雜的佈局方式，其中要先定義行和列，再設置Grid內控件的Grid.Row和Grid.Column屬性，即該控件在表格的第幾行，第幾列，其中Grid.RowSpan和Grid.ColumnSpan屬性分別爲跨行和跨列，和Html相似。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<Grid
Width="300"
Height="200">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle
Grid.Row="0"
Grid.Column="0"
Fill="Red"></Rectangle>
<Rectangle
Grid.Row="0"
Grid.Column="1"
Fill="Yellow"></Rectangle>
<Rectangle
Grid.Row="1"
Grid.ColumnSpan="2"
Fill="Green"></Rectangle>
</Grid> |
結果：
