UI 布局（WPF）

友好的用户界面和良好的用户体验离不开设计精良的布局。布局元素中，既有像传统的 Windows Form 和 ASP.NET 那样使用绝对坐标进行定位的元素，也有像 HTML 页面中那样使用行列定位的元素。WPF 的布局是依靠各种布局元素实现的。

每个布局元素都有自己的特点，既有自己的优点和长处，也有自己的缺点和短处。一定要灵活的使用，切莫对每种布局控件无所不用其极。

布局元素

首先，思考一个问题：用于构成 UI 的重要控件，如 Windows 、UserControl、GroupBox、Button、Lable 等，都是集中在 ContentControl 和 HeaderedContentControl 族里，但这两族控件只能接受一个元素作为自己的 Content，如果想在这些控件里包含多个控件应该怎么做呢？

这样就要用到布局元素了。布局元素属于 Panel 族，这一族元素的内容属性是 Children ，即可以接受多个控件作为自己的内容并对这些控件进行布局控制。 WPF 的布局理念就是把一个布局元素作为 ContentControl 或 HeaderedContentControl 族控件的 Content ，再在布局元素里添加要被布局的子级控件；如果 UI 局部需要更复杂的布局，那就在这个区域放置一个子级的布局元素，形成布局元素的嵌套。

WPF 中的布局元素有如下几个：

• Grid: 网格。可以自定义行和列并通过行列的数量、行高和列宽来调整控件的布局。
• StackPanel: 栈式面板。可将包含的元素在竖直或水平方向上排成一条直线，当移除一个元素后，后面的元素会自动向前移动以填充空缺。
• Canvas: 画布。内部元素可以使用以像素为单位的绝对坐标进行定位。
• DockPanel: 泊靠式面板。内部元素可以选择停泊方向。
• WrapPanel: 自动折行面板。内部元素在排满一行后能够自动折行。

下面就逐个研究它们的具体用法。

Grid