一、类型

wpf的布局有五种大类

DockPanel 停靠面板
StackPanel 栈面板
WrapPanel 环绕面板
Grid 网格面板
Canvas 精准定位

二、区别

1、DockPanel 面板，里面的元素用Dock属性来设置停靠在哪个方向,分别有:Right(右停靠),Left(左停靠)，Buttom（下停靠）,Top（上停靠）

<DockPanel LastChildFill="False"><Button DockPanel.Dock="Left" Content="左停靠"/><Button DockPanel.Dock="Right" Content="右停靠"/><Button DockPanel.Dock="Top" Content="上停靠"/><Button DockPanel.Dock="Bottom" Content="下停靠"/></DockPanel>

效果：

DockPanel的LastChildFill属性表明，最后一个参数是否撑满整个容器，默认为true。

2、StackPanel栈面板，特征是每个元素占一行或一列，不会换行，可根据Orientation属性，设置Vertical竖向排列，或者Horizontal横向排列，默认值是Vertical。在这个面板中你可以把一项一项元素按照方向堆叠

<StackPanel Orientation="Horizontal"><Button Content="横向1"/><Button Content="横向2"/><Button Content="横向3"/><Button Content="横向4"/></StackPanel><StackPanel Orientation="Vertical"><Button Content="竖向1"/><Button Content="竖向2"/><Button Content="竖向3"/><Button Content="竖向4"/></StackPanel>

效果图：

3、WrapPanel，它和上面的StackPanel很像，但WrapPanel里面的元素如果超出了长度或者宽度，会换行。同样它也是靠Orientation属性来设置是Horizontal（从左往右排列，超出向下换行），或者Vertical（从上往下排列，从左往右换行），默认值是Orientation

<Window x:Class="CriticalValueMonitor.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"Title="测试页面" Height="300" Width="500"><WrapPanel Orientation="Horizontal"><Button Content="横向1" Width="140"/><Button Content="横向2" Width="140"/><Button Content="横向3" Width="140"/><Button Content="横向4" Width="140"/></WrapPanel>
</Window>

效果图：

四、Grid,网格式布局，它的特征是将页面分成一个一个小格子，然后将控件放在格子里面。它是所有布局里面最复杂，但是应用最广泛的布局。Grid的主要属性为：ColumnDefinitions，RowDefinitions，表明有几行和几列，ShowGridLines属性是表明是否显示网格线，默认是false。控件用Grid.Columu来配置在第几列，Grid.Row来配置在第几行。

<Window x:Class="CriticalValueMonitor.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"Title="测试页面" Height="300" Width="500"><Grid ShowGridLines="True"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Button Content="button1" Grid.Column="0" Grid.Row="0"/><Button Content="button2" Grid.Column="1" Grid.Row="1"/><Button Content="button3" Grid.Column="2" Grid.Row="2"/></Grid>
</Window>

效果图：

五、Canvas布局，一个类似坐标系的面板,通过left,right,right,bottom 四个字段来设置控件的摆放位置。

<Canvas><Button Content="Test1" Canvas.Left="0" Canvas.Top="20"  Width="60"/><Button Content="Test2" Canvas.Right="0" Canvas.Bottom="60" Width="60"/><Button Content="Test3" Canvas.Left="150" Canvas.Top="50" Width="60"/><Button Content="Test4" Canvas.Right="150" Canvas.Bottom="50"  Width="60"/></Canvas>

canvas还有一个z_index属性来设置控件的折叠顺序，如果不设置z_index，系统是按照控件定义的先后顺序来排序，定义了z_index属性，可调整控件的重叠顺序

例：不加z_index时

<Canvas><Button Content="Test1" Canvas.Left="150" Canvas.Top="60"  Width="90" Height="50" Background="Yellow" Foreground="Gray"/><Button Content="Test2" Canvas.Left="150" Canvas.Top="80" Width="90"  Height="50" Background="Red" Foreground="White"/><Button Content="Test3" Canvas.Left="150" Canvas.Top="100" Width="90"  Height="50" Background="green" Foreground="White"/><Button Content="Test4" Canvas.Left="150" Canvas.Top="120"  Width="90"  Height="50" /></Canvas>

呈现效果：

加了z_index 之后：

<Canvas><Button Content="Test1" Panel.ZIndex="3"  Canvas.Left="150" Canvas.Top="60"  Width="90" Height="50" Background="Yellow" Foreground="Gray"/><Button Content="Test2" Panel.ZIndex="2" Canvas.Left="150" Canvas.Top="80" Width="90"  Height="50" Background="Red" Foreground="White"/><Button Content="Test3" Panel.ZIndex="1" Canvas.Left="150" Canvas.Top="100" Width="90"  Height="50" Background="green" Foreground="White"/><Button Content="Test4" Panel.ZIndex="0" Canvas.Left="150" Canvas.Top="120"  Width="90"  Height="50" /></Canvas>

效果: