05_控件与布局

备注：类关系结构图如下：

控件分类

• 布局控件：可以容纳多个控件或者嵌套其他布局控件，用于在 UI 上组织和排列控件。Grid、StackPael、DockPanel 等控件都属于此类，他们拥有共同的父类 Panel。

• 内容控件：只能容纳一个其他控件或者布局控件作为他的内容。Window、Button等控件属于此类，因为只能容纳一个空间作为其内容，所以经常需要借助布局控件来规划其内容。他们的共同父类是 ContentControl。

• 带标题的内容控件：相当于一个内容控件，但可以加一个标题（Header），标题部分亦可容纳一个空间或布局。GroupBox、TabItem 等都是这类控件的现行代表，他们的共同父类是 HeaderContentControl。

• 条目控件：可以显示一列数据，一般情况下这列数据的类型相同。此类控件包括 ListBox、COmboBox 等。他们的共同基类是 ItemsControl。此类控件在显示集合类型数据方面功能强大。

• 带标题的条目控件：相当于一个条目控件上加一个标题显示区。TreeViewItem、MenuItem 等都属于此类控件。这类控件往往用于显示层级关系数据，节点显示在其 Header 区域，子节点则显示在其条目控件区域。此类控件的共同基类是 HeaderedItemsControl。

• 特殊内容控件：比如 TextBox 容纳的就是字符串、TextBlock 可以容纳可自由控制格式的文本、Image 容纳图片类型数据，这类控件都比较独立。

WPF 的内容模型

根据是否可以装载内容、能够装载什么样的内容，WPF 的 UI 元素可以分为如下所示类型。

备注：

• 内容属性都有自己确切的名字—有的叫 Content，有的叫 Child，有些控件的内容可以是集合，其内容属性有叫 Items 或 Children 的。
• 内容属性可以可以简写。
  
  备注：当然也可以写成<Button Content="Ok" />
  

各类内容模型详解

1. ContentControl 族

特点：

• 均派生自 ContentControl 类。
• 他们都是控件（Control）。
• 内容属性的名称为（Content）。
• 只能由单一元素充当其内容。

包含的控件

例子

备注：

• 图示例子编译通不过，因为他有两个内容属性。
• 如果确实像两个，可以用一个控件把他们包装起来。

2. HeaderedContentControl 族

特点：

• 他们都派生自 HeaderedContentControl 类，HeaderedContentControl 类是 ContentControl 类的派生类。
• 他们都是控件，用于显示带标题的数据。
• 内容属性为 Content 和 Header。
• 无论 Content 还是 Header 都只能容纳一个元素作为其内容。

包含的控件

一个例子

3. ItemsControl 族

特点：

• 均派生自 ItemsControl 类。
• 他们都是控件，用于显示列表化的数据。
• 内容属性为 Items 或ItemsSource。
• 每种 ItemsControl 都对应有自己的条目容器（Item Container）。

包含的控件

一个例子

备注：

• 每个条目内部都有对应的包装器包装，对应如下：
  

4. HeaderedItemsControl 族

特点：

• 均派生自 HeaderedItemsControl 类。
• 他们都是控件，用于显示列表化数据，同时可以显示一个标题。
• 内容属性为 Items、ItemsSource 和 Header。
• 包含控件之后三个：MenuItem、TreeViewItem、ToolBar。

5. Decorator 族

特点：

• 均派生自 Decorator 类。
• 其 UI 装饰作用。
• 内容属性为 Child。
• 只能由单一元素充当内容。

包含控件

6. TextBlock 和 TextBox

TextBlock 只能显示文本，不能编辑，所以又称为静态文本。TextBox 则允许用户编辑其中内容。

7. Shape 族元素

特点

• Shape 族元素只是简单的视觉元素，不是控件。
• 均派生自 Shape 类。
• 用于 2D 图像绘制。
• 无内容属性。
• 使用 Fill 属性设置填充，使用 Stroke 属性设置边线。

8. Panel 族元素

特点

• 均派生自 Panel 抽象类。
• 主要功能是布局 UI。
• 内容属性是 Children。
• 内容属性可以是多个元素，Panel 元素将控制他们的布局。

包含控件

UI 布局（Layout）

WPF 中的布局元素有以下几个

• Grid：网格。行高和列宽来调整控件的布局。
• StackPanel：栈式布局。默认是竖直排列，当移除一个元素后，后面元素会自动往前移动以填补空缺。
• Canvas：画布。以像素为单位的绝对坐标定位。
• DockPanel：泊靠式面板。剩余全部填满。
• WrapPanel：自动折行面板。内部元素在排满之后能够自动折行。

Grid

特点

• 行的高度好列的高度可以使用绝对数值、相对比例或者自动调整的方式进行精确设定，并可设置最大和最小值。
• 内部元素可以设置自己所在的行和列，还可以设置自己纵向跨几行、横向跨几列。
• 应用场合可以是：UI 整体尺寸改变时，元素需要保持固有的高度和宽度比例。

一个例子

• Grid 宽度和高度单位：除了可以使用像素作为单位之外，Grid 还接受英寸（Inch）、厘米（Centimeter）和点（Point）作为单位。
  

• Grid 的行高可以设置三类值：

  • 绝对值：double 数值加上单位后缀
  • 比例值：double 数值后面加一个星号（*），意思就是剩下的所有像素，按照你设定的比例分配。
  • 自动值：字符串 Auto。行高和列宽的实际值将由行列内控件的高度和宽度决定，通俗点将就是控件会把行列“撑”到合适的值，如果行列中没有控件，那行列均为0.
  • 如果不写，为"*"，表示把剩下的都占了。

• Margin="10,10,10,10"----Margin 的四个值按照顺时针代表左、上、右、下四个留白。

• 行列都是从0开始计数。

• 指定一个控件在某行，就为这个控件的标签添加 Grid.Row= “行编号” 这样一个 Attribute，若行编号为0（即控件处于首行）则可以省略这个 Attribute。

• 制定一个控件在某列，就为这个控件添加 Grid.Column= “列编号” 这样一个 Attribute，若列编号为0，则 Attribute 可以省略不写。

• 若控件需要跨多个行或者列，请使用 Grid.RowSpan= “行数” 和 Grid.ColumnSpan= “列数” 这两个 Attribute。

• 如果把两个元素放在 Grid 的同一个单元格内，则代码中后书写的元素将覆盖在先书写的元素之上，可以通过元素的 Visbility 设置 Hidden 和 Collapesd 或者 元素的 Opacity 属性设置 0 显示和影藏。
  

• GridSplitter的使用，两个 TextBox 之间加一个可以拖拽的分割栏。
  
  

StackPanel

特点

• 同类元素需要紧凑排列。
• 移除其中的元素能够自动不缺的布局或者动画。
• StackPanel 使用三个属性来控制内部元素的布局，他们是 Orientation、HorizontalAlignment 和 VerticalAlignment。
  

一个例子

Canvas

使用场景

• 一经设计基本上不会再有改动的小型布局。
• 艺术性比较强的布局。
  -需要大量使用横纵坐标进行绝对点定位的布局。
• 依赖于横纵坐标的动画。

一个例子

DockPanel

特点

• 会瓜分剩余空间。
• 有 LastChildFill 属性，当该属性为 True 时，DockPanel 内最后一个元素的 DockPanel.Dock 属性会被忽略，这个元素会把 DockPanel 内部所有剩余空间填满。

一个例子

WrapPanel

特点

• Orientation 属性来控制流延伸方向。
• HorizontalAlignment 和 VerticalAlignment 两个属性控制内部控件的对齐。
• 在延伸方向上，WrapPanel 会排列尽可能多的控件，排不下的控件将会新起一行或者一列继续排列。

一个例子