一、理解WPF中的布局

在WPF问世之前，Windows开发人员使用刻板的基于坐标的布局将控件放到正确位置。在WPF中，这种方式虽然可行，但已经极少使用。大多数应用程序将使用类似于Web的流(flow)布局；在使用流布局模型时，控件可以扩大，并将其他控件挤到其他位置，开发人员能创建与显示分辨率和窗口大小无关的、在不同的显示器上正确缩放的用户界面；当窗口内容发生变化时，界面可调整自身，并且可以自如地处理语言的切换。

二、WPF布局的原则

WPF窗口只能包含单个元素。如果要在WPF窗口中放置多个元素并创建更贴近实用的用户界面，则需要在窗口上放置一个容器，然后在这个容器中添加其他元素。

在WPF中，布局是根据使用的容器来确定的。虽然有多个容器可供选择，但“理想的”WPF窗口需要遵循以下几条重要原则：

• **不应显式设定元素（控件等等）的尺寸：**元素应当可以改变尺寸以适合它们的内容（例如：当添加更多的文本时按钮应当能够扩展。可通过设置最大和最小尺寸来限制可以接受的控件尺寸范围）
• **不应使用屏幕坐标指定元素的位置：**元素应当由它们的容器根据它们的尺寸、顺序以及其他特定于具体布局容器的信息进行排列。如果需要在元素之间添加空白空间，可以使用Margin属性。
• **布局容器的子元素“共享”可用的空间：**如果空间允许，布局容器会根据每个元素的内容尽可能为元素设置更合理的尺寸，它们还会向一个或多个子元素分配多余的空间。
• **可嵌套的布局容器：**典型的用户界面使用Grid面板作为开始，Grid面板是WPF中功能最强大的容器，Grid面板可包含其他布局容器，包含的这些容器以更小的分组排列元素，比如带有标题的文本框、列表框中的项、工具栏上的图标以及一列按钮等。

三、布局过程

WPF布局包括两个阶段：

**测量阶段：**容器遍历所有子元素，询问子元素它们所期望的尺寸
**排列阶段：**容器在合适的位置放置子元素

注意：元素未必总能得到最合适的尺寸，有时容器没有足够大的空间以适应所含的元素。在这种情况下，容器为了适应可视化区域的尺寸，就必须裁剪不能满足要求的元素。（设置最小窗口尺寸可避免这种情况）

四、WPF中布局常用控件

1、Canvas

Canvas是一个类似于坐标系的面板，所有的元素通过设置坐标来决定其在坐标系中的位置（Canvas.Left、Canvas.Top、Canvas.Right、Canvas.Bottom），Canvas中的元素不能自动调整大小。如果窗口大小小于Canvas面板大小，则一部分内容不可见。

        
        
        
        

1
2
3
4
5
6

注意：

同时设置Canvas.Left=“50” Canvas.Right=“50”，以Canvas.Left="50"为准
同时设置Canvas.Top=“50” Canvas.Bottom=“50”，以Canvas.Top="50"为准

2、Grid【Html布局中表格布局】【全能布局控件】

Grid通过自定义行列来进行布局，类似于表格。通过定义Grid的RowDifinitions和ColumnDifinitions来实现对于表格行和列的定义，元素根据附加属性Grid.Row和Grid.Column确定自己的位置。

a）Grid的行高与列宽三种定义方式：

**固定长度：**值为一个确定的数字
**自动长度：**值为Auto，取实际控件所需的最小值
**比例长度：**表示占用剩余的全部宽度；两行都是，将平分剩余宽度；一个2*，一个*，则前者占剩余全部宽度的2/3，后者占1/3；

    
        
        
        
        
    
    
    
    
    

1
2
3
4
5
6
7
8
9
10
11
12

b）合并行与列

    
        
        
        
        
    
    
    
    
    

1
2
3
4
5
6
7
8
9
10
11
12

3、UniformGrid

UniformGrid是Grid的简化版，每个单元格的大小相同，不需要定义行列集合。每个单元格始终具有相同的大小，每个单元格只能容纳一个控件。

注意：UniformGrid中没有Row和Column附加属性，也没有空白单元格。

        
        
        
        
        
        
        
        
        

1
2
3
4
5
6
7
8
9
10
11

如果没有设置Rows或者Colums，则按照定义在其内部的元素个数，自动创建行列，并通常保持相同的行列数。若只设置Rows则固定行数，自动扩展列数。若只设置Colums则固定列数，自动扩展行数。代码如下：

        
        
        
        
        
        
        
        
        

1
2
3
4
5
6
7
8
9
10
11

4、StackPanel(瀑布流布局方式)

StackPanel将控件按照行或列来顺序排列，但不会换行。通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal默认的）和竖排（Vertical），默认为竖排（Vertical）。

a）竖排

        
        
        
        
        
        
        
        
        

1
2
3
4
5
6
7
8
9
10
11

b）横排（由左向右、由右往左）

        
        
        
        
        
        
        
        
        

1
2
3
4
5
6
7
8
9
10
11

        
        
        
        
        
        
        
        
        

1
2
3
4
5
6
7
8
9
10
11

5、DockPanel（停靠布局）【整体布局[Html中框架布局]】

DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。DockPanel有一个Dock附加属性，因此子元素用4个值来控制它们的停靠：Left、Top、Right、Bottom。

        
        
        
        

1
2
3
4
5
6

Dock没有Fill值作为替代，最后的子元素将加入一个DockPanel并填满所有剩余的空间，设置DockPanel的LastChildFill属性为false，则它将朝某个方向停靠。

        
        
        
        

1
2
3
4
5
6

6、WrapPanel

WrapPanel布局面板将各个控件按照一定方向罗列，当长度或高度不够时自动调整进行换行换列。

a）Orientation="Horizontal"时各控件从左至右罗列，当面板长度不够时，子控件就会自动换行，继续按照从左至右的顺序排列。

        
        
        
        
        
        
        
        
        

1
2
3
4
5
6
7
8
9
10
11

b）Orientation=" Vertical"时各控件从上至下罗列，当面板高度不够时，子控件就会自动换列，继续按照从上至下的顺序排列。

        
        
        
        
        
        
        
        
        

1
2
3
4
5
6
7
8
9
10
11

注意WrapPanel的两个属性：

ItemHeight——所有子元素都一致的高度，任何比ItemHeight高的元素都将被截断。
ItemWidth——所有子元素都一致的宽度，任何比ItemWidth高的元素都将被截断。

        
        
        
        

1
2
3
4
5
6

7、ScrollViewer

ScrollViewer是带有滚动条的面板。在ScrollViewer中只能有一个子控件，若要显示多个子控件，需要将一个附加的 Panel控件放置在父 ScrollViewer中，然后可以将子控件放置在该panel控件中。

HorizontalScrollBarVisibility水平滚动条是否显示（默认：Hidden）
VerticalScrollBarVisibility垂直滚动条是否显示（默认：Visible）

        

1
2
3

通常设置HorizontalScrollBarVisibility="Auto"和VerticalScrollBarVisibility=“Auto”(当内容超出可视范围时，才显示横向/纵向滚动条)

五、嵌套布局

多个控件之间可以嵌套使用比如：

    
        OK
        Cancel
    
    This is a Text--嵌套布局示例

1
2
3
4
5
6
7