WPF基础之UI布局（wpf界面布局有哪几种）

知识点：

WPF中的布局控件主要有以下几种：

StackPanel：栈面板，可以将元素排列成一行或者一列。其特点是：每个元素各占一行或者一列。

WrapPanel：环绕面板，将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行，后续排序按照从上至下或从左至右的顺序进行。

DockPanel：停靠面板，定义一个区域，在此区域中，您可以使子元素通过描点的形式排列，这些对象位于 Children 属性中。

Grid：网格面板， Grid顾名思义就是“网格”，以表格形式布局元素，对于整个面板上的元素进行布局，它的子控件被放在一个一个事先定义好的小格子里面，整齐配列。 Grid和其他各个Panel比较起来，功能最多也最为复杂。

Canvas：画布面板，画布，用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种，直接将元素放到指定位置，主要来布置图面。

1、StackPanel

Orientation属性指定排列方式：

Vertical(垂直)【默认】，垂直排列时，每个元素都与面板一样宽。

Horizontal(水平)，水平排列时，每个元素都与面板一样高；

如果包含的元素超过了面板空间，它只会截断多出的内容。 元素的Margin属性用于使元素之间产生一定得间隔，当元素空间大于其内容的空间时，剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。

首先是【默认】垂直（Vertical）情况下的布局：

水平布局，示例代码，与垂直排列相同，只是多了一个Oriention属性：

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：元素是从左向右排列的，然后自上至下自动换行。

垂直布局，示例代码，与水平排列相同，只是多了一个Oriention属性：

WrapPanel其他常用属性，除了StackPanel属性常用属性，还有两个，如下所示：

ItemHeight：所有的元素都相同高度。

ItemWidth：所有的元素都相同宽度。

DockPanel【停靠面板】：

停靠面板类似于WinForm中控件的Dock属性。DockPanel会对每个子元素进行排序，并将根据指定的边进行停靠，多个停靠在同侧的元素则按顺序排序。

默认情况下，所有子元素都是靠左停靠【DockPanel.Dock=Left】

DockPanel其他常用属性，除了StackPanel属性常用属性，还有一个，如下所示：

1. LastChildFill：最后一个子元素，是否填充剩余空间，默认为True。

设置不顶边：

Grid【网格面板】：

以表格形式布局元素，对于整个面板上的元素进行布局，要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素，从而定义行数和列数。

放置在Grid面板中的控件元素都必须显示采用Row和Column附加属性定义其放置所在的行和列，这两个属性的值都是从0开始的索引数，如果没有显式设置任何行或列，Grid将会隐式地将控件加入在第0行第0列。

默认情况下，如果不设置Grid面板的行列宽，与高，则默认均分，且如果不显示设置子元素的大小，则默认填充。

列宽和行高，分别可以在ColumnDefinition、RowDefinition里面指定Width、Height的值。

设置宽与高的几种方式：

固定值：设置具体的数字，单位为像素px。

Auto：根据子元素的大小，自动分配大小，刚好能够容纳子元素的内容。

星号*：根据比例自动分配剩余空间。

Grid面板其他属性，除了StackPanel属性常用属性，还有两个：

Grid.ColumnSpan：用于设置元素跨越的单元格列数。

Grid.RowSpan：用于设置元素跨越的单元格行数。

Canvas【画布面板】：

画布，用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种，直接将元素放到指定位置，主要来布置图面。

Canvas通过设置Left，Top，Bottom，Right等属性的值，来设置子元素的位置，如果同时设置Canvas.Left和Canvas.Right属性，那么后者将会被忽略

Canvas的其他属性，除了StackPanel的常用属性外，还有两个属性：

1. ClipToBounds：超出边界部分，是否需要进行剪裁。
2. Panel.ZIndex：用于设置子元素在Z方向上的顺序，值越大，越靠上。如果两个元素重叠，则ZIndex值小的将会被覆盖。