WPF中的布局（超详细）

末蓝、 2023-02-13 03:19 40阅读 0赞

### 目录： ###

*   *  一、理解WPF中的布局
     *  二、WPF布局的原则
     *  三、布局过程
     *  四、WPF中布局常用控件
     *  记得点赞收藏嗷!!!

## 一、理解WPF中的布局 ##

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

## 二、WPF布局的原则 ##

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

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

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

## 三、布局过程 ##

**WPF布局包括两个阶段：**

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

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

## 四、WPF中布局常用控件 ##

**1、Canvas**

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70]  
**注意：**

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

--------------------

**2、Grid**

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 1]  
b）合并行与列

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 2]

--------------------

**3、UniformGrid**

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 3]  
如果没有设置Rows或者Colums，则按照定义在其内部的元素个数，自动创建行列，并通常保持相同的行列数。若只设置Rows则固定行数，自动扩展列数。若只设置Colums则固定列数，自动扩展行数。代码如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 4]

--------------------

**4、StackPanel**

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

a）竖排

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 5]  
b）横排（由左向右、由右往左）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 6]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 7]

--------------------

**5、DockPanel**

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 8]  
Dock没有Fill值作为替代，最后的子元素将加入一个DockPanel并填满所有剩余的空间，设置DockPanel的LastChildFill属性为false，则它将朝某个方向停靠。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 9]

--------------------

**6、WrapPanel**

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 10]  
b）Orientation=" Vertical"时各控件从上至下罗列，当面板高度不够时，子控件就会自动换列，继续按照从上至下的顺序排列。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 11]  
**注意WrapPanel的两个属性：**

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 12]

--------------------

**7、ScrollViewer**

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 13]  
**通常设置HorizontalScrollBarVisibility="Auto"和VerticalScrollBarVisibility=“Auto”(当内容超出可视范围时，才显示横向/纵向滚动条)**

--------------------

## 记得点赞收藏嗷!!! ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200526225907285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200526232151208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200526233234541.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200526234410591.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200526234617826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200526235215424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200526235303123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2020052623562933.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200527000601675.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200527000820278.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200527001643899.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/202005270022267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200527003450900.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200527004951147.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTk5MTAyOQ==,size_16,color_FFFFFF,t_70