WPF布局面板

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio 2015、WPF

作者：黄钟瑶

撰写时间：2019年5月26日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

在学习了WPF之后，它的五个常用布局面板是经常接触到的，而这五个布局面板各有优势。

Grid，网格面板，是功能最多也是复杂的。它包含的两个属性RowDefinitions和 ColumnDefinitions元素定义了行数和列数，如果没有设置了行和列，会默认定义在第0行和第0列。Grid面板能够任意定义行数和列数，纵横向跨行，设置子元素的对齐方向。

简单介绍Grid面板的布局，定义了三行（RowDefinitions）三列（ColumnDefinitions）。第三行*为填充第一和第二行剩下的高度。用lable定义了行列的内容。最后一个lable使用Grid.ColumnSpan合并了第一行的三列格子，使用了绿色的背景看起来比较明显。

DockPanel泊靠式面板  在一个区域内根据指定的方向来排布，指定的控件不会发生交叠的情况，而后添加的元素使用的是前面的元素使用后剩下的空间，直至排布合理，不管有多少元素，这区域是始终被填满的。在这个区域内，哪个元素排在第一所占的空间是最大的

StackPanel栈式面板 将控件按照行和列来排布，它的每个元素都是占一行的（横排或者竖排），就算内容超出之后，也不会换行。Orientation属性可以设置元素的排布方式，Horizontal成行排布，Vertical垂直排布，每个元素之间的高度和宽度都是一样的

WrapPanel：自动折行面板（环绕面板） 将各个控件从左至右按照行列的顺序排布，当窗体长度或者高度不够时，会自动换到下一行（根据内容排布）。同样的Orientation属性可以设置排布方式

当Orientation为Vertical时：从左到右排列，然后从上向下排列

当Orientation="Horizontal"时，内容从上向下排列，然后从左到右排列

Canvas画布面板 完全控制每个元素的精确位置，相对于画布内的子元素位置必须指定，不然子元素的位置都是在画布的左上角，得使用Canvas.Left、Canvas.Right、Canvas.Top、Canvas.Bottom附加属性调整位置。画布内的元素默认允许超出画布，内容会显示在画布外

如果不想内容超出，需要将ClipToBounds属性设置为True