一個成功的軟件，離不開人性化的UI設計，如何抓住用戶第一視覺，讓用戶產生依賴感，合適優雅的布局必不可少。本文以一些簡單的小例子，簡述WPF中布局面板控件的使用，僅供學習分享使用，如有不足之處，還請指正。
涉及知識點
在WPF中，關於布局面板控件，主要有以下幾種：
- StackPanel：棧面板，可以將元素排列成一行或者一列。其特點是：每個元素各占一行或者一列。
- WrapPanel：環繞面板，將各個控件從左至右按照行或列的順序羅列，當長度或高度不夠時就會自動調整進行換行，后續排序按照從上至下或從左至右的順序進行。
- DockPanel：停靠面板，定義一個區域，在此區域中，您可以使子元素通過描點的形式排列，這些對象位於 Children 屬性中。
- Grid：網格面板， Grid顧名思義就是“網格”，以表格形式布局元素，對於整個面板上的元素進行布局，它的子控件被放在一個一個事先定義好的小格子里面，整齊配列。 Grid和其他各個Panel比較起來，功能最多也最為復雜。
- Canvas：畫布面板，畫布，用於完全控制每個元素的精確位置。他是布局控件中最為簡單的一種，直接將元素放到指定位置，主要來布置圖面。
下面讓我們一起學習各個控件的使用。
StackPanel【棧面板】
棧面板,可以將元素排列成一行或者一列，其特點是：每個元素各占一行或者一列。
Orientation屬性指定排列方式：
- Vertical(垂直)【默認】，垂直排列時，每個元素都與面板一樣寬。
- Horizontal(水平)，水平排列時，每個元素都與面板一樣高；
如果包含的元素超過了面板空間，它只會截斷多出的內容。 元素的Margin屬性用於使元素之間產生一定得間隔，當元素空間大於其內容的空間時，剩余空間將由HorizontalAlignment和 VerticalAlignment屬性來決定如何分配。
Vertical(垂直)，默認情況下，每一個元素都與面板一樣寬，如下所示：
示例代碼，如下所示：
1 <Window x:Class="WpfApp1.SecondWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:WpfApp1" 7 mc:Ignorable="d" 8 Title="StackPanel示例" Height="450" Width="500"> 9 10 11 <StackPanel Margin="5,5,5,5"> 12 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5">Button> 13 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5">Button> 14 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5">Button> 15 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5">Button> 16 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5">Button> 17 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5">Button> 18 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5">Button> 19 StackPanel> 20 Window>
Horizontal(水平)，水平排列時，每個元素都與面板一樣高。如下所示：
示例代碼，與垂直排列相同，只是多了一個Oriention屬性，如下所示：
1 <StackPanel Margin="5,5,5,5" Orientation="Horizontal"> 2 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5">Button> 3 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5">Button> 4 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5">Button> 5 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5">Button> 6 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5">Button> 7 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5">Button> 8 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5">Button> 9 StackPanel>
StackPanel其他常用屬性：
- HorizontalAlignment：水平對齊方式，值：Left，Center，Right，Stretch。
- VerticalAlignment：垂直對齊方式，值：Bottom ， Center，Stretch，Top。
- Visibility：設置StackPanel是否可見，值：Visible，Hidden，Collapsed。
- Background：設置背景顏色，值為Bursh類型的枚舉值。
- Width，Height，MinWidth，MinHeight，MaxWidth，MaxHeight：分別用來設置StackPanel的寬，高，最小寬，最小高，最大寬，最大高。
WrapPanel【環繞面板】
WrapPanel布局面板將各個控件從左至右按照行或列的順序羅列，當長度或高度不夠時就會自動調整進行換行，后續排序按照從上至下或從左至右的順序進行。
水平排列：當Orientation屬性的值設置為 Horizontal：元素是從左向右排列的，然后自上至下自動換行。如下所示：
示例源碼所示：
1 <Window x:Class="WpfApp1.ThirdWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:WpfApp1" 7 mc:Ignorable="d" 8 Title="WrapPanel示例" Height="450" Width="400"> 9 <WrapPanel Margin="5,5,5,5"> 10 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5">Button> 11 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5">Button> 12 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5">Button> 13 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5">Button> 14 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5">Button> 15 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5">Button> 16 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5">Button> 17 18 WrapPanel> 19 Window>
垂直排列：默認為水平排列，通過設置WrapPanel的Orientation屬性為Vertical，可以修改排列方向，垂直排列，如下所示：
示例源碼如下所示：
1 <WrapPanel Margin="5,5,5,5" Orientation="Vertical"> 2 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Height="40">Button> 3 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Height="40">Button> 4 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Height="40">Button> 5 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Height="40">Button> 6 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Height="40">Button> 7 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Height="40">Button> 8 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Height="40">Button> 9 10 WrapPanel>
WrapPanel其他常用屬性，除了StackPanel屬性常用屬性，還有兩個，如下所示：
- ItemHeight：所有的元素都相同高度。
- ItemWidth：所有的元素都相同寬度。
其他子元素設置的屬性，如果大於ItemHeight，ItemWidth的值，則被截取。如下所示：
源碼如下所示：
1 <WrapPanel Margin="5,5,5,5" Orientation="Vertical" ItemHeight="30" ItemWidth="100"> 2 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Height="40">Button> 3 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Height="40">Button> 4 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Height="40">Button> 5 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Height="40">Button> 6 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Height="40">Button> 7 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Height="40">Button> 8 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Height="40">Button> 9 10 WrapPanel>
DockPanel【停靠面板】
DockPanel定義一個區域，在此區域中，您可以使子元素通過描點的形式排列，這些對象位於 Children 屬性中。停靠面板類似於WinForm中控件的Dock屬性。DockPanel會對每個子元素進行排序，並將根據指定的邊進行停靠，多個停靠在同側的元素則按順序排序。在DockPanel中，指定停靠邊的控件，會根據定義的順序占領邊角，所有控件絕不會交疊。
默認情況下，所有子元素都是靠左停靠【DockPanel.Dock=Left】
可以單獨設置每一個子元素的Dock屬性，如下所示：
示例源碼如下所示：
1 <Window x:Class="WpfApp1.FourWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:WpfApp1" 7 mc:Ignorable="d" 8 Title="DockPanel示例" Height="450" Width="600"> 9 <DockPanel LastChildFill="True" > 10 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" DockPanel.Dock="Left">Button> 11 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" DockPanel.Dock="Top">Button> 12 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" DockPanel.Dock="Right">Button> 13 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" DockPanel.Dock="Bottom">Button> 14 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" DockPanel.Dock="Left">Button> 15 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" DockPanel.Dock="Top">Button> 16 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" DockPanel.Dock="Right">Button> 17 <Button x:Name="button8" Content="第八個按鈕" Margin="2,5,2,5" DockPanel.Dock="Bottom">Button> 18 <Button x:Name="button9" Content="第九個按鈕" Margin="2,5,2,5">Button> 19 DockPanel> 20 Window>
注意：在DockPanel中，元素的先后順序很重要，關系着元素是否“頂邊”。
DockPanel其他常用屬性，除了StackPanel屬性常用屬性，還有一個，如下所示：
- LastChildFill：最后一個子元素，是否填充剩余空間，默認為True。
Grid【網格面板】
Grid顧名思義就是“網格”，以表格形式布局元素，對於整個面板上的元素進行布局，它的子控件被放在一個一個事先定義好的小格子里面，整齊配列。 Grid和其他各個Panel比較起來，功能最多也最為復雜。
要使用Grid，首先要向RowDefinitions和ColumnDefinitions屬性中添加一定數量的RowDefinitions和 ColumnDefinitions元素，從而定義行數和列數。
而放置在Grid面板中的控件元素都必須顯示采用Row和Column附加屬性定義其放置所在的行和列，這兩個屬性的值都是從0開始的索引數，如果沒有顯式設置任何行或列，Grid將會隱式地將控件加入在第0行第0列。
由於Grid的組成並非簡單的添加屬性標記來區分行列，這也使得用戶在實際應用中可以具體到某一單 元格中，所以布局起來就很精細了。
Grid的單元格可以是空的，一個單元格中可以有多個元素，而在單元格中元素是根據它們的Z順序一個接着一個呈現的。
Grid面板將元素分割到不可見的行列網格中。盡管可以在一個單元格中放置多個元素（這時這些元素會相互重疊），但在每個單元格中只放置一個元素通常更合理。當然，在Grid單元格中的元素本身也可能是另一個容器，該容器組織它所包含的一組控件。
默認情況下，如果不設置Grid面板的行列寬，與高，則默認均分，且如果不顯示設置子元素的大小，則默認填充，如下所示：
示例代碼，如下所示：
1 <Window x:Class="WpfApp1.FiveWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:WpfApp1" 7 mc:Ignorable="d" 8 Title="GridPanel示例" Height="450" Width="700"> 9 <Grid> 10 <Grid.RowDefinitions> 11 <RowDefinition>RowDefinition> 12 <RowDefinition>RowDefinition> 13 <RowDefinition>RowDefinition> 14 Grid.RowDefinitions> 15 <Grid.ColumnDefinitions> 16 <ColumnDefinition>ColumnDefinition> 17 <ColumnDefinition>ColumnDefinition> 18 <ColumnDefinition>ColumnDefinition> 19 Grid.ColumnDefinitions> 20 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="0" >Button> 21 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="1" >Button> 22 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="2" >Button> 23 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="0" >Button> 24 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="1" >Button> 25 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="2" >Button> 26 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="0" >Button> 27 <Button x:Name="button8" Content="第八個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="1" >Button> 28 <Button x:Name="button9" Content="第九個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="2" >Button> 29 Grid> 30 31 Window>
Grid行高與列寬設置
列寬和行高，分別可以在ColumnDefinition、RowDefinition里面指定Width、Height的值。
設置寬與高的幾種方式：
- 固定值：設置具體的數字，單位為像素px。
- Auto：根據子元素的大小，自動分配大小，剛好能夠容納子元素的內容。
- 星號*：根據比例自動分配剩余空間。
行高列寬設置示例
示例源碼如下所示：
1 <Grid> 2 <Grid.RowDefinitions> 3 <RowDefinition Height="1*">RowDefinition> 4 <RowDefinition Height="2*">RowDefinition> 5 <RowDefinition Height="3*">RowDefinition> 6 Grid.RowDefinitions> 7 <Grid.ColumnDefinitions> 8 <ColumnDefinition Width="1*">ColumnDefinition> 9 <ColumnDefinition Width="2*">ColumnDefinition> 10 <ColumnDefinition Width="3*">ColumnDefinition> 11 Grid.ColumnDefinitions> 12 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="0" >Button> 13 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="1" >Button> 14 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Grid.Row="0" Grid.Column="2" >Button> 15 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="0" >Button> 16 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="1" >Button> 17 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Grid.Row="1" Grid.Column="2" >Button> 18 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="0" >Button> 19 <Button x:Name="button8" Content="第八個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="1" >Button> 20 <Button x:Name="button9" Content="第九個按鈕" Margin="2,5,2,5" Grid.Row="2" Grid.Column="2" >Button> 21 Grid>
Grid面板其他屬性，除了StackPanel屬性常用屬性，還有兩個，如下所示：
- Grid.ColumnSpan：用於設置元素跨越的單元格列數。
- Grid.RowSpan：用於設置元素跨越的單元格行數。
Canvas【畫布面板】
畫布，用於完全控制每個元素的精確位置。他是布局控件中最為簡單的一種，直接將元素放到指定位置，主要來布置圖面。
使用Canvas，必須指定一個子元素的位置（相對於畫布），否則所有元素都將出現在畫布的左上角。如果Canvas是窗口主元素（即最外層的布局面板是Canvas），用戶改變窗口大小時，Canvas也會隨之變化，子元素的位置也會隨之移動，以保證相對於Canvas的位置屬性不變。
Canvas通過設置Left，Top，Bottom，Right等屬性的值，來設置子元素的位置。如下所示：
示例源碼，如下所示：
1 <Window x:Class="WpfApp1.SixWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:WpfApp1" 7 mc:Ignorable="d" 8 Title="Canvas面板示例" Height="500" Width="500"> 9 <Canvas> 10 <Button x:Name="button1" Content="第一個按鈕" Margin="2,5,2,5" Canvas.Left="0" Canvas.Top="0">Button> 11 <Button x:Name="button2" Content="第二個按鈕" Margin="2,5,2,5" Canvas.Left="50" Canvas.Top="50">Button> 12 <Button x:Name="button3" Content="第三個按鈕" Margin="2,5,2,5" Canvas.Left="100" Canvas.Top="100">Button> 13 <Button x:Name="button4" Content="第四個按鈕" Margin="2,5,2,5" Canvas.Left="150" Canvas.Top="150">Button> 14 <Button x:Name="button5" Content="第五個按鈕" Margin="2,5,2,5" Canvas.Left="200" Canvas.Top="200">Button> 15 <Button x:Name="button6" Content="第六個按鈕" Margin="2,5,2,5" Canvas.Left="250" Canvas.Top="250">Button> 16 <Button x:Name="button7" Content="第七個按鈕" Margin="2,5,2,5" Canvas.Left="300" Canvas.Top="300">Button> 17 <Button x:Name="button8" Content="第八個按鈕" Margin="2,5,2,5" Canvas.Left="350" Canvas.Top="350">Button> 18 <Button x:Name="button9" Content="第九個按鈕" Margin="2,5,2,5" Canvas.Left="400" Canvas.Top="400">Button> 19 Canvas> 20 Window>
注意：要說明一點Canvas內的子控件不能使用兩個以上的Canvas附加屬性，如果同時設置Canvas.Left和Canvas.Right屬性，那么后者將會被忽略。
Canvas的其他屬性，除了StackPanel的常用屬性外，還有兩個屬性，如下所示：
- ClipToBounds：超出邊界部分，是否需要進行剪裁。
- Panel.ZIndex：用於設置子元素在Z方向上的順序，值越大，越靠上。如果兩個元素重疊，則ZIndex值小的將會被覆蓋。
備注
1024程序員節，祝大家節日快樂。
望江南·梳洗罷
溫庭筠 〔唐代〕
梳洗罷，獨倚望江樓。過盡千帆皆不是，斜暉脈脈水悠悠。腸斷白蘋洲。
