分类：
- Grid：网格；可以自定义行和列并通过行列的数量、行高和列宽来调整控件的布局。类似于HTML中的table。
- DockPanel：泊靠式面板；内部元素可以选择泊靠方向，类似于在Windows Form编程中设置控件的Dock属性。
- StackPanel：栈式面板；可将包含的元素在竖直或水平方向上排成一条直线，当移除一个元素后，后面的元素会自动向前移动以填充空缺。
- WrapPanel：自动折行面板； 内部元素在排满一行后能够自动折行，类似于HTML中的流式布局
- Canvas：画布；内部元素可以使用以像素为单位的绝对坐标进行定位，类似于Windows Form编程的布局方式。
- Grid：网格
特点：
-
-
- 可以定义任意数量的行和列；
- 行的高度和列的宽度可以使用绝对值、相对比列或自动调整的方式进行精确设定，还可以设置最大值和最小值；
- 内部元素可以设置自己所在的列，还可以设置自己纵向跨几行、横向跨几列；
- 可以设置Children元素的对齐方向
-
行高、列宽为比例值：double数值后加一个星号（*）
看下面一个例子：
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160*"/>
<ColumnDefinition Width="160*"/>
<ColumnDefinition Width="160*"/>
<ColumnDefinition Width="160*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="80*"/>
<RowDefinition Height="90*"/>
</Grid.RowDefinitions>
</Grid>
行高、列宽为绝对值：直接double数值或者在后面加个单位后缀
行高、列宽为自动值：字符串Auto
看下面一个例子，
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="142"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="62"/>
<RowDefinition Height="60"/>
<RowDefinition Height="77"/>
<RowDefinition Height="51"/>
</Grid.RowDefinitions>
<TextBlock Text="What is your first name?" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
<TextBox BorderBrush="Blue" Height="30" Width="160" Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2" FontSize="20"/>
<TextBlock Text="What is your last name?" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"/>
<TextBox BorderBrush="Blue" Height="30" Width="160" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" FontSize="20"/>
<Button Width="80" Height="30" Content="Starting" Background="#FFECEED1" Grid.Column="1" Grid.Row="2"/>
<Button Width="80" Height="30" Content="Ending" Background="#FFD1EBEE" Grid.Column="2" Grid.Row="2"/>
</Grid>
代码效果：
- DockPanel 泊靠式面板
有一个重要的属性：LastChildFill 默认是true，占满剩下的位置
看下面一个例子：
<Grid>
<DockPanel>
<TextBox DockPanel.Dock="Top" Height="25" BorderBrush="Blue"/>
<TextBox DockPanel.Dock="Left" Width="150" BorderBrush="Blue"/>
<TextBox BorderBrush="Pink"/>
</DockPanel>
</Grid>
- StackPanel：栈式面板
特点：
-
-
- 同类元素需要紧凑排列（如制作菜单或者列表）
- 移除其中的元素后能够自动补缺的布局或者动画
-
StackPanel的三个属性：Orientation 决定内部元素是横向累计还是纵向累计
HorizontalAlignment 决定内部元素水平方向上的对齐方式
VerticalAlignment 决定内部元素竖直方向上的对齐方式
看下面一个例子：
<StackPanel>
<TreeViewItem>
<TreeViewItem.Header>
<AccessText>软件分类</AccessText>
</TreeViewItem.Header>
<TextBlock>编程语言</TextBlock>
<TextBlock>软件技术</TextBlock>
<TextBlock>Web前端</TextBlock>
<TextBlock>软件工程</TextBlock>
</TreeViewItem>
<TreeViewItem>
<TreeViewItem.Header>
<AccessText>链接</AccessText>
</TreeViewItem.Header>
<TextBlock>反馈与建议</TextBlock>
<TextBlock>官方博客</TextBlock>
<TextBlock>电子期刊</TextBlock>
<TextBlock>人才服务</TextBlock>
</TreeViewItem>
</StackPanel>
- WrapPanel：自动折行面板
可以排布尽可能多的控件，排不下的控件便会自动换行或换列继续排列。
看下面一个例子：
<WrapPanel>
<Button Width="50" Height="50" Content="OK"></Button>
<Button Width="50" Height="50" Content="OK"></Button>
<Button Width="50" Height="50" Content="OK"></Button>
<Button Width="50" Height="50" Content="OK"></Button>
<Button Width="50" Height="50" Content="OK"></Button>
<Button Width="50" Height="50" Content="OK"></Button>
<Button Width="50" Height="50" Content="OK"></Button>
</WrapPanel>
- Canvas：画布
一般用于简洁布局
看下面一个例子：
<Canvas>
<TextBlock Text="企鹅登录：" Canvas.Left="70" Canvas.Top="40"/>
<TextBox Height="25" Width="120" Canvas.Left="180" Canvas.Top="36" FontSize="18"/>
<TextBlock Text="企鹅密码：" Canvas.Left="70" Canvas.Top="80"/>
<TextBox Height="25" Width="120" Canvas.Left="180" Canvas.Top="76" FontSize="18"/>
<Button Content="确定" Canvas.Left="106" Canvas.Top="120" Width="60"></Button>
<Button Content="取消" Canvas.Left="190" Canvas.Top="120" Width="60"/>
</Canvas>
代码结果：
