常用的Layout布局元素

常用的Layout布局元素

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： VS

作者：妮露厨

撰写时间：2022/10/8

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~创建用户界面时，按照位置和大小排列控件以形成布局。任何布局的一项关键要求都是适应窗口大小和显示设置的变化。 WPF 为你提供一流的可扩展布局系统，而不强制你编写代码以适应这些情况下的布局。布局系统的基础是相对定位，这提高了适应不断变化的窗口和显示条件的能力。 此外，该布局系统还可管理控件之间的协商以确定布局。 协商是一个两步过程：首先，控件将需要的位置和大小告知父级；其次，父级将控件可以有的空间告知控件。 该布局系统通过基 WPF 类公开给子控件。 对于通用的布局（如网格、堆叠和停靠），WPF 包括若干布局控件：

Grid：网格。可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。近似Html中的table。

DockPanel：泊靠式面板。内部元素可以选择泊靠的方向（上下左右），类似于Winform中设置控件的Dock属性。

StackPanel：栈式面板。可将包含的元素在水平或垂直方向排成一条线，当移除一个元素后，后面的元素会自动向前填充空缺。（常常用来做菜单栏）

WrapPanel：自动折行面板（环绕面板）。内部元素在排满一行后能够自动折行，类似于Html中的流式布局。

UniformGrid：均分布局。（横向的网格分割、纵向的网格分割分别是均等的分割的布局类型，各个单元格的大小完全相同，宽与高分别相同）

Canvas：画布。内部元素可以使用以像素为单位的绝对坐标进行定位，类似于Windows Form 的布局方式。

一、Grid网格

简介：

Grid顾名思义就是“网格”，它的子控件被放在一个一个实现定义好的小格子里面，整齐配列。Grid和其他各个Panel比较起来，功能最多也最为复杂。

要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素，从而定义行数和列数。

而放置在Grid面板中的控件元素都必须显示采用附加属性语法定义其 放置所在的行和列，它们都是以0为基准的整型值，如果没有显式设置任何行或列，Grid将会隐式地将控件加入在第0行第0列。

由于Grid的组成并非简单的添加属性标记来区分行列，这也使得用户在实际应用中可以具体到某一单元格中，所以布局起来就很精细了。 

特点：

可以定义任意数量的行和列，非常灵活。

行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定，并可以设置最大和最小值。

内部元素可以设置自己所在的行和列Grid.Row和Grid.Column，还可以设置自己纵向跨几行Grid.RowSpan，横向跨几列Grid.ColumnSpan。

可以设置Children元素的对齐方向：水平HorizontalAlignment，垂直VerticalAlignment。

基于以上这些特点，Grid的适用场合有：

UI布局的大框架设计。

大量UI元素需要成行或者成列对齐的情况。

UI尺寸改变的时候，元素需要保留固有的宽度和高度比列。

二、DockPanel：泊靠式面板

DockPanel定义一个区域，在此区域中，您可以使子元素通过描点的形式排列，这些对象位于 Children 属性中。

DockPanel会对每个子元素进行排序，并将根据指定的边进行停靠，多个停靠在同侧的元素则按顺序排序。

在DockPanel中，指定停靠边的控件，会根据定义的顺序占领边角，所有控件绝不会交叠。

三、StackPanel：栈式面板

StackPanel就是将控件按照行或列来顺序排列，但不会换行。

通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal）和竖排（Vertical默认的）。

水平排列时，每个元素都与面板一样高；垂直排列时，每个元素都与面板一样宽。如果包含的元素超过了面板空间，它只会截断多出的内容。

元素的Margin属性用于使元素之间产生一定得间隔，当元素空间大于其内容的空间时，剩余空间将由HorizontalAlignment和 VerticalAlignment。

四、WrapPanel：自动折行面板（环绕面板）

WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行或换列，后续排序按照从上至下或从右至左的顺序进行。

Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal：元素是从左向右排列的，然后自上至下自动换行。当Orientation属性的值设置为Vertical：元素是从上向下排列的，然后从左至右自动换行。

ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。

ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取于它的VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。