WPF 布局系统

0，什么是布局

　　这是一个很简单的问题。简单来说，就是把一些控件有条理的摆放在界面上合适的位置，显然摆的乱七八糟不能算布局。在WPF中，这个条理与WinForm中略有不同，让我们看个很简单的界面：



这样子的界面大家在熟悉不过了。依图所示，WPF先用蓝线（假设的线）将界面划分为上下两部分，然后再有红线划分出多个方格，最后放入控件，其中每部分中的控件或划分的空格只能纵向排列，或横向排列，不能有其他选择。大多数情况下，WPF程序界面上的控件都要按照此种递归的方法逐个排列，最终形成所看到的界面。

1，基本元素——面板

　　在上节中我们了解了WPF布局原理，这可以简单理解为大控件中按排或列放入小控件，小控件在按照同样规则放入更小控件。这种能放入其他控件的控件是WPF布局系统中的基本元素——面板。面板是用来放东西的，既包括控件元素，也包括面板自己。面板不仅能承载其他子元素(控件)，还能控制子元素的大小，位置以及如何排列。例如上述例子中，蓝线划分的面板控制子元素只能上下排列，而红线划分的面板控制的子元素只能横向排列。

WPF默认提供了几种面板都是从基面板(Panel)继承而来，看一下它们的继承链。

System.Windows.Threading.DispatcherObject

System.Windows.DependencyObject

System.Windows.Media.Visual

System.Windows.UIElement

System.Windows.FrameworkElement

System.Windows.Controls.Control

System.Windows.Controls.Panel

System.Windows.Controls.Canvas

System.Windows.Controls.DockPanel

System.Windows.Controls.Grid

System.Windows.Controls.StackPanel

System.Windows.Controls.VirtualizingPanel

System.Windows.Controls.WrapPanel

2，常用容器控件

WPF默认提供了数种布局控件，常用的包括如下几种：

名称	用法	说明
Canvas		此面板可承载任意元素，包括控件，图形，甚至文字。各种元素依据屏幕坐标确定位置。
DockPanel		此面板可指定元素的排列停靠方式，每个子元素的排列方式可以不同。
Grid		此面板使子元素按照纵横网格排列。
StackPanel		此面板使子元素按照水平或垂直方向排列，两个方向只能选其一。
VirtualizingStackPanel		与StackPanel相同，不同之处在于它可以使内容虚拟化。
WrapPanel		使子元素按照水平或垂直方向排列，在行或列处换行或列，依旧按照水平或垂直方向从左到右或从上到下排列。

3，测量与排列

　　当我们在面板上放入子元素，并设置相应的属性时，WPF的布局系统自动为我们完成2个过程：测量和排列，这是两个非常重要的过程。

　　由于WPF界面元素有很多与布局有关的属性，如坐标，大小，对齐方式，相对位置，间距等。首先这些属性使用的是与设备无关的分辨率单元，这导致同样大小的元素在不同界面上显示的效果可能不同；其次每个属性值有一定的优先级，例如Button的Height和Width属性优先于Stretch属性，如果设置 Height,
Width 以及 Stretch，会导致 Stretch被忽略。

　　因此，尽管在设计时指定了属性值，布局系统依然需要重新计算每个子元素在界面上的实际大小，位置，边距等值，这些值被称为“FinalSize”。

4，基本属性：Alignment,Margin和Pading

　　在设计UI时，WPF为我们提供了一些属性用于精确定位元素，其中最常用的有三个：Alignment(包括水平，垂直)，Margin，Pading，具体用法如下：

名称	说明
Alignment	子元素在水平(垂直)方向的对齐方式，有左对齐，右对齐（顶端对齐，底部对齐），中间对齐，拉伸填充等四种方式。
Margin	用于指定元素与其子级或同级之间的距离，包括上下左右四个值。也可通过使用 Margin="20" 同时指定四个值。
Pading	Padding 在大多数方面类似于 Margin，只有少数元素有（公开），用于将子元素的有效大小增大指定的厚度。

5，附加属性

　　通过上面我们了解到子元素通过一些属性值的设置实现在面板上布局，比如Alignment对齐属性，Dock停靠排列属性。这些属性不属于子元素本身，而依赖与所在的父元素。比如同样是Button，在DockPanel中有Dock属性，而在Grid中就没有。这些属性的存在依赖与父元素，在WPF中称做“附加属性”。

　　附加属性的用途是允许不同的子元素为实际在父元素中定义的属性指定唯一值，目的是让子元素通知父元素它将如何在界面中呈现。如上面提到的DockPanel.Dock
属性，因为它将在 DockPanel 中包含的元素上设置，而不是在 DockPanel 本身设置。注意，相对于子元素，父元素提供的附加属性相当于全局属性。

6，布局与性能

　　通过上面我们了解到，当给界面元素的布局属性赋值时，布局系统需要重新计算和排列所有子元素的“FinalSize”(因为改变影响不可知)。这是一个递归的过程。如果不注意，可能会带来性能问题。因此在设计时应注意下面几点：

　　1，应注意哪些属性值更改会引起执行布局系统的递归更新；

　　2，如有可能，应使用 RenderTransform 而不要使用 LayoutTransform；

　　3，避免不必要地调用 UpdateLayout，因为UpdateLayout强制调用布局系统的递归更新；

　　4，当包含大量元素集合时，请使用 VirtualizingStackPanel虚拟化元素；

7，总结

　　通过本文，我们大概了解了WPF的布局系统，常用的布局面板，与布局有关的几个属性，以及设计开发UI时的注意事项。这些内容很多与WinForm中的相关概念相通，可以说是旧瓶装新酒，稍加思考，并不难理解；如果深入了解，会发现与WinForm截然不同。但作为初学者，如果能灵活使用文中所讲的知识点，深入理解注意点，对自身的提高还是很有帮助的。