布局控件 XAML布局元素（常用重点）

布局控件 XAML布局元素（常用重点）

 Grid：网格。可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。近似Html中的table。
 DockPanel：泊靠式面板。内部元素可以选择泊靠的方向（上下左右），类似于Winform中设置控件的Dock属性。
 StackPanel：栈式面板。可将包含的元素在水平或垂直方向排成一条线，当移除一个元素后，后面的元素会自动向前填充空缺。（菜单 栏）
 WrapPanel：自动折行面板（环绕面板）。内部元素在排满一行后能够自动折行，类似于Html中的流式布局。
 UniformGrid：均分布局（横向的网格分割、纵向的网格分割分别是均等的分割的布局类型，各个单元格的大小完全相同，宽与高分别 相同）
 Canvas：画布。内部元素可以使用以像素为单位的绝对坐标进行定位，类似于Windows Form 的布局方式。
1、 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尺寸改变的时候，元素需要保留固有的宽度和高度比列。

注意：这里介绍一下Grid高度、宽度的几种定义方式：

第一种，固定长度——宽度不够，会裁剪，不好用。单位pixel。

第二种，自动长度——自动匹配列中最长元素的宽度。

第三种，比例长度——表示占用剩余的全部宽度；两行都是，将平分剩余宽度；像上面的一个2*，一个*，表示前者2/3宽度。

Row和Column
我们下面来介绍Grid的行的用法，及我们在UI设计过程中需要注意的细节。

固定、自动、比例：

为了加深大家对Grid布局的印象，我们这里加入控件来展示效果。

下面在每个单元格都加入子控件

上面指定了控件在Grid表格中的哪一行那一列，如果我们的某个控件跨行或者跨列如何做呢？

关于跨行和跨列一样，只不过将Grid.ColumnSpan换成Grid.RowSpan。

下面介绍，在Grid如何将控件设置为自适应宽度和高度，或者是固定宽度或固定高度时，应该注意的细节。

1、自适应区域：

2、 顶部对齐或底部对齐

对于顶部对齐和底部对齐，相对来说都一样。
3、 左右对齐时：