WPF的布局面板

作者：孙英鹏     撰写时间：2019年5月13日

WPF用于布局的元素有5个（主要用到的），分别是Stack Panel(栈面板)、Wrap Panel（环绕面板）。Dock Panel（停靠面板）、Canvas（画布）、Grid（网格面板）。

StackPanel: 栈面板。
栈面板,就是将元素排列成一行或一列，每个元素都各占一行或一列。通过设置面板的Orientation属性设置了两中排列方法：
Vertica（垂直排列）（默认）、Horizontal(水平排列)
默认情况下，水平排列时，每一个面板都是一样高，垂直排列时，每个面板都是一样宽，如果超过了面板空间，会自动截断多出的内容。

注意：如果想调左右方向可以在StackPanel里加上FlowDirection属性设置为RightToLeft，方法只可以调Horizontal(水平排列)。

第一：垂直方向排列

使用XAML代码：

 
运行图：

第二：水平方向排列

使用XAML代码：

运行图：

WrapPanel：环绕面板。
环绕面板是从左往右按照行或列的顺序排列出来，当长度不够时会自动调整，进行换行。
当Orientation属性值为Horizontal,元素是从左向右排列的,从上到下换行。属性值为Vertical,元素是从上到下排列，左右换行。

第一：属性值为Horizontal。
使用XAML代码：

运行图：

第二：属性值为Vertical。
使用XAML代码：

运行图:

DockPanel:停靠面板。
停靠面板是定义一个区域，使用子元素描点排列。DockPanel是对每个元素进行排序，根据指定的边进行停靠，按顺序排列，DockPanel有4个排列方向的值，分别是：Top（顶部）、Left（左边） 、Right、（右边） Bottom（底部）。

第一：填充整个剩余空间
使用XATM代码：

运行图：

当默认情况下，后面添加的元素只能使用剩余空间，无论怎么停靠，DockPanel的最后的元素都会填满剩余空间，如果不希望空间填满，可以在DockPanel属性里加上LastChildFill，设置为False,并为最后一个子元素指定停靠位置。

第二：不充整个剩余空间

使用XATM代码：

运行图：

Canvas:画布面板。
画布用于控制每个元素的位置，使布局里最简单的一种，把元素放到指定位置，主要用来布置图画，用Canvas必须指定一个子元素位置，否作全部会出现左上角画布上，调整位置用Top（顶部）、Left（左边） 、Right、（右边） Bottom（底部）四个属性。Canvas允许子元素超出边界，不会裁剪子元素，如果想超出边界的内容显示外面，使用负坐标即可。

第一：子元素不超边界。

使用XAML代码：

运行图：

第二：子元素超出边界
使用XAML代码：

运行图（XAML界面）

如果将ClipToBounds属性设为true，在XAML界面会对子元素的超出部分进行裁剪。

Grid:网络面板。
网络面板是把子控件放在一个个实现定义好的小格子，整齐排列，比起其他的面板，它是最为复杂的。使用Grid首先要添加RowDefinitions和ColumnDefinitions属性，RowDefinitions是定义行，ColumnDefinitions是定义列，设置面板的行和列可以通过手动的方法去弄，也可以通过XAML页面设置。

使用XAML代码：

运行图：

说明：把网格分为四个小格，用RowDefinitions和ColumnDefinitions定义行和列，接下来用径向渐变画刷涂抹四个空格，径向渐变画刷可以用属性里的画笔工具弄出来，也可以手动弄，为了区分颜色涂抹在哪一个空格，我们要写一行代码，用Grid.Row、Grid.Column和Grid.ColumnSpan，它们分别是第几行第几列占第几个空格。