常見的幾個布局面板
1.StackPanel面板
StackPanel面板能夠簡單根據單行或者單列進行元素排列, StackPanel 默認的布局方向為垂直方向(Vertical), 由Orientation屬性控制。
Orientation屬性：
用戶控制布局方向是垂直還是橫向排列。分別有兩個值可選：Vertical、Horizontal
示例代碼：
<StackPanel Orientation="Vertical">
<Button>button1</Button>
<Button>button2</Button>
<Button>button3</Button>
</StackPanel>
效果圖(如上面所述 StackPanel面板Orientation屬性默認為Vertical)：
設置 Orientation="Horizontal" 時, 控件布局方向則為橫向, 效果圖。
默認情況下, StackPanel面板中的元素都會根據StackPanel的大小而改變, StackPanel面板指定了Width和Height值。
布局屬性：
| VerticalAlignment | 當垂直方向有額外的空間, 可以選擇Top、Center、Bottom、Stretch進行設置布局 |
| HorizontalAlignment | 當水平方向有額外的空間, 可以選擇Center、Left、Right、Stretcj進行設置布局 |
| Margin | 相對控件的4個邊、設置邊距,可以單獨設置各個邊距,也可以統一設置一個邊距 類似：Margin="1 2 3 4" 或 Margin="1" |
【VerticalAlignment/HorizontalAlignment】屬性:
為了能夠看到效果, 通常預留控件額外的空間, 示例, 默認的StackPanel面板中添加幾組按鈕, 剩下的白色區域為額外的空間。
這個時候, 針對StackPanel面板設置VerticalAlignment屬性為Center, 此時所有的子元素被居中顯示,額外的空間被均分。
注: 而Bottom、Top、Stretch 則分別表示整體元素居下，居上、整體伸展。
默認情況下, StackPanel面板的VerticalAlignment、HorizontalAlignment 默認屬性均為 Stretch
<!-- StackPanel -->
<StackPanel VerticalAlignment="Center">
<Button>button1</Button>
<Button>button2</Button>
<Button>button3</Button>
</StackPanel>
效果圖:
Margin(邊距)屬性：
正如前人書中所說, 一個設計良好窗口不止是包含元素、還應當在元素之間包含一定的額外空間。所以這個時候Margin屬性派上用場。
以上的示例圖中, 均沒有設置Margin屬性, 所以會看到的是, 每個元素之間都緊貼。
··
當設置邊距時, 可以統一設置元素所有邊的距離, 如下所示：
<!-- StackPanel -->
<StackPanel>
<Button Margin="3">button1</Button>
<Button Margin="3">button2</Button>
<Button Margin="3">button3</Button>
</StackPanel>
另外一種,則是分別對元素的邊: 左、上、右、下的順序設置邊距, 如下所示：
<!-- StackPanel -->
<StackPanel>
<Button Margin="3 6 3 3">button1</Button>
<Button Margin="3">button2</Button>
<Button Margin="3">button3</Button>
</StackPanel>
2.WarpPanel面板
與StackPanel面板類型, WarpPanel面板也是以行或列的形式進行元素排列, 默認情況下, WarpPanel面板的Orientation屬性則為Horizontal,元素以橫向進行排列。
注意：與StackPanel面板不同的是, WarpPanel默認情況下, 所有元素均不會被拉伸。這里要強調的一點: StackPanel中, 元素會根據Orientation屬性進行拉伸,
1.當Orientation="Horizontal"時, 元素被垂直拉伸
2.當Orientation="Vertical"時, 元素被水平拉伸
示例圖：
同樣的, WarpPanel面板具備StackPanel的屬性。區別則在於上面的不同。
3.DockPanel面板
用過winform的小伙伴應該都知道, 在winform中, 幾乎所有的空間都具備Dock停靠屬性, 可以針對元素進行單獨設置Dock定位。然而在WPF中, 這點顯然是不具備的。
所以對於靈活的WPF來說, DockPanel面板具備了這個能力。凡是包含在DockPanel面板中的子元素, 都會具備Dock附加屬性。
下圖所示, 對DockPanel進行簡單的添加元素設置Dock屬性:
示例代碼：
<DockPanel>
<Button DockPanel.Dock="Top">button1</Button>
<Button DockPanel.Dock="Right" >button2</Button>
<Button DockPanel.Dock="Left">button3</Button>
</DockPanel>
注意：DockPanel 的 LastChildFill 屬性, 主要用於設置DockPanel中最后一個元素的會具備填充效果。如上圖的button3元素
LastChildFill 字面意思則可以理解, 最后一個元素是否填充。通過設置true/false,
效果圖(LastChildFill="false") :
<DockPanel LastChildFill="False">
<Button DockPanel.Dock="Top">button1</Button>
<Button DockPanel.Dock="Right" >button2</Button>
<Button DockPanel.Dock="Left">button3</Button>
</DockPanel>
4.Grid面板
Grid面板類型HTML中的table表格, 為了能夠讓元素或內容按照規定的位置排列, 首先得定義足夠得行和列。
注意: Grid中定義得Row與Column屬性默認在元素中都是從0開始索引, 在下面示例中,為了演示都進行了添加(如果在程序中,位置已經確定, 可以默認不加)。
定義行與列( RowDefinitions/ColumnDefinitions)
<Grid>
<!-- 下面分別定義了2行 2列 -->
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
添加元素:
下面為Grid定義得2行2列基礎上添加4個按鈕, 下圖所示：
代碼所示:
<Grid>
<!-- 下面分別定義了2行 2列 -->
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0">左上</Button>
<Button Grid.Column="1" Grid.Row="0">右上</Button>
<Button Grid.Column="0" Grid.Row="1">左下</Button>
<Button Grid.Column="1" Grid.Row="1">右下</Button>
</Grid>
注意: 盡管一個單元格中, 允許放置多個元素, 通常來說這沒有什么意義。如上所示, 每個元素都明確了對應單元格中。
Grid與WarpPanel和StackPanel面板等容器不同得區別在於, Grid需要顯式定義行與列來放置元素。而相對於其他容器,則會隱式創建行與列。
調整行和列：
Grid面板支持3種設置尺寸的方式：
| 硬編碼尺寸 | width="xxx" / height="xxx" |
| 自動設置尺寸 | width="auto" / height="auto" |
| 按比例設置尺寸 | width="*" / height="2*" |
例如, 下面的代碼演示了三種設置尺寸的方式：
<Grid>
<!-- 下面分別定義了2行 2列 -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0">左上</Button>
<Button Grid.Column="1" Grid.Row="0">右上</Button>
<Button Grid.Column="0" Grid.Row="1">左下</Button>
<Button Grid.Column="1" Grid.Row="1">右下</Button>
</Grid>
實際的顯示效果可以看到, 第一列width=" * " 為第二列的1/2, 第一行設置的自適應高度, 而第二行則是硬編碼的高度 100
注意: 當使用Grid進行按比例設置列或者行時, 如果Grid寬度為奇數像素, 那么被分割的行列像素帶小數, 當改列包含形狀元素、邊框、圖像, 那么顯示內容可能是模糊的,
如果這個問題影響布局, 則只需要將Grid的 UseLayoutRounding屬性設置為True即可。
跨行與跨列：
處於Grid中的任意元素, 都具有兩個附加屬性, 分別為 RowSpan與 ColumnSpan。像這種跨行跨列在web應用中十分常見。
下面的示例中演示了如何針對元素進行跨列顯示：
5.UniformGrid面板
與Grid相反, UniformGrid並不遵循Grid的眾多原則, 無論是顯式聲明行和列, 還有其附加屬性。反而, 通過簡單的設置
Rows和Columns屬性來設定其尺寸。每個單元格都被均勻分配, 關鍵一點, 所有元素最后都根據其定義的先后順序放置在
單元格中。
示例代碼如下：
<UniformGrid Rows="2" Columns="2">
<Button>button1</Button>
<Button>button2</Button>
<Button>button3</Button>
<Button>button4</Button>
</UniformGrid>
6.Canvas面板
Canvas面板允許使用精准的坐標放置元素, 為了在Canvas面板中定位一個元素, 需要設置Canvas.Left 和 Canvas.Top屬性。
Code：通過設置元素的附加屬性 Canvas.Left 、Top、Right、Bottom 等進行元素定位
<Canvas>
<Button Canvas.Left="100" Canvas.Top="50">button1</Button>
<Button Canvas.Left="100" Canvas.Top="80">button2</Button>
</Canvas>
