应用程序界面设计中，合理的元素布局至关重要，它可以方便用户使用，并将信息清晰合理地展现给用户。WPF提供了一套功能强大的工具-面板(Panel)，来控制用户界面的布局。你可以使用这些面板控件来排布元素。如果内置布局控件不能满足需要的话，还可以创建自定义的布局元素
WPF常用的容器组件主要有StackPanel(栈面板)、WrapPanel（环绕面板）。DockPanel（停靠面板）、Canvas（画布）、Grid（网格面板）UniformGrid(均布网格)。等几类,每类容器组件的特点如下表描述：
| 容器名称 | 布局特点 |
|---|---|
| StackPanel(栈面板) | 水平或垂直的放置内容元素 |
| WrapPanel（环绕面板） | 自动换行的方式放置内容元素 |
| DockPanel（停靠面板） | 按照Top、left、right等方式布局内容元素，最后一个元素充满可利用的容器空间 |
| Canvas（画布） | 在内容元素中设置附加属性Top、Left，根据Top、Left布局内容元素 |
| Grid（网格面板 | 按行列排列内容，如果没有特别说明行列则内容充满容器，多个内容则重叠充满内容 |
| UniformGrid(均布网格) | 自动根据容器大小，自动采用行列方式排列内容元素 |
一、 StackPanel(栈面板),可以将元素排列成一行或者一列，其特点是：每个元素各占一行或者一列，
XAML的代码如下
<!--Vertical:垂直【默认】、Horizontal:水平，默认情况下，水平排列时，
每个元素都与面板一样高；垂直排列时，每个元素都与面板一样宽。-->
<StackPanel x:Name="stackpanel" Margin="0" Orientation="Vertical">
<Button Content="第一个" Background="#FFB2F1AC" />
<Button Content="第二个" Background="#FF8EF683" ></Button>
<Button Content="第三个" Margin="0,0,-0.4,0" Background="#FF6EF061" />
<Button Content="第四个" Background="#FF56FC46" ></Button>
<Button Content="第五个" Background="#FF38F425" ></Button>
</StackPanel>
效果如下图
二、 WrapPanel（环绕面板）
rapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行，后续排序按照从上至下或从右至左的顺序进行。
Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal：元素是从左向右排列的，然后自上至下自动换行。当Orientation属性的值设置为Vertical：元素是从上向下排列的，然后从左至右自动换行。
XAML代码
<WrapPanel Orientation="Horizontal" ItemHeight="50" ItemWidth="100" Margin="0,0,-0.4,-0.6">
<Button Background="#FFD4F3F2" >按钮1</Button>
<Button Background="#FFBAC9E2" Width="80" Height="30" VerticalAlignment="Top" >按钮2</Button>
<Button Background="#FF6FF3F0" >按钮3</Button>
<Button Background="#FF6BF3F0" Content="按钮4" Margin="0,0,0,-0.4" />
<Button Background="#FF3DFCF9" >按钮5</Button>
<Button Background="#FF09FCF8" >按钮6</Button>
</WrapPanel>
三、 DockPanel（停靠面板）
DockPanel定义一个区域，在此区域中，您可以使子元素通过描点的形式排列，这些对象位于 Children 属性中。停靠面板类似于WinForm中控件的Dock属性。DockPanel会对每个子元素进行排序，并将根据指定的边进行停靠，多个停靠在同侧的元素则按顺序排序。在DockPanel中，指定停靠边的控件，会根据定义的顺序占领边角，所有控件绝不会交叠。
XAML 代码
<DockPanel>
<Button DockPanel.Dock="Left" Background="#FF97F13D" >停靠左边</Button>
<Button DockPanel.Dock="Top" Background="#FF41E5E8" Height="45">停靠顶部</Button>
<Button DockPanel.Dock="Right" Background="#ff97ff3d">停靠右边</Button>
<Button DockPanel.Dock="Bottom" Background="#ff41e5e8" Height="45">停靠底部</Button>
<Button Background="#FFF3F5FA" FontSize="18.667" FontFamily="Arial Narrow" Margin="0,55.2,0,65.6" Width="113" >没有停靠</Button>
</DockPanel>
效果图
四、 Canvas（画布）
画布，用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种，直接将元素放到指定位置，主要来布置图面。使用Canvas，必须指定一个子元素的位置（相对于画布），否则所有元素都将出现在画布的左上角。调整位置用Left、Right、Top和Bottom四个附加属性。
XAML 代码
<Canvas>
<TextBox Width="100" BorderBrush="Blue"></TextBox>
<TextBox Canvas.Left="200" Canvas.Top="50" Width="100" BorderBrush="Green"></TextBox>
<Button Height="20" Canvas.Right="10" Canvas.Bottom="10" Content="按钮"></Button>
</Canvas>
五、 Grid（网格面板）
<Grid>
<!--定义网格，此处显示了网格线-->
<!--定义列-->
<Grid.ColumnDefinitions>
<!--第一列-->
<ColumnDefinition Width="90*"/>
<!--第二列-->
<ColumnDefinition Width="203*"/>
</Grid.ColumnDefinitions>
<!--定义行-->
<Grid.RowDefinitions>
<!--第一行-->
<RowDefinition Height="15*"/>
<!--第二行-->
<RowDefinition Height="37*"/>
<!--第三行-->
<RowDefinition Height="38*"/>
</Grid.RowDefinitions>
<!--Grid.ColumnSpan="2" Grid.RowSpan="1" 按钮将
占据第一行中的第一个和第二个单元格的所有空间-->
<Button Grid.Row="0" Grid.Column="0" Background="#FFE7D5CA" Grid.ColumnSpan="2" Grid.RowSpan="1">按钮1</Button>
<Button Grid.Row="1" Grid.Column="0">按钮2</Button>
<Button Grid.Row="1" Grid.Column="2" Background="#FF95E775">按钮 </Button>
<Button Grid.Row="3" Grid.Column="1" Background="#FF8AE3E5" >按钮 </Button>
</Grid>
六、UniformGrid(均布网格)
UniformGrid 就是Grid的简化版，每个单元格的大小相同，不需要定义行列集合。每个单元格始终具有相同的大小，每个单元格只能容纳一个控件，将自动按照定义在其内部的元素个数，自动创建行列，并通常保持相同的行列数。
<UniformGrid Rows="2" Columns="2">
<Button Background="#FFEAF387">第一个</Button>
<Button Background="#FFCDE545">第二个</Button>
<Button Background="#FFA5AE3F">第三个</Button>
<Button Background="#FFEAF46D">第四个</Button>
</UniformGrid>
