XAML的布局元素

XAML布局元素
1、Grid：网格。可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。近似Html中的table。
2、DockPanel：泊靠式面板。内部元素可以选择泊靠的方向（上下左右），类似于Winform中设置控件的Dock属性。
3、StackPanel：栈式面板。可将包含的元素在水平或垂直方向排成一条线，当移除一个元素后，后面的元素会自动向前填充空缺。（菜单栏）
4、WrapPanel：自动折行面板（环绕面板）。内部元素在排满一行后能够自动折行，类似于Html中的流式布局。
5、UniformGrid：均分布局（横向的网格分割、纵向的网格分割分别是均等的分割的布局类型，各个单元格的大小完全相同，宽与高分别相同）
6、Canvas：画布。内部元素可以使用以像素为单位的绝对坐标进行定位，类似于Windows Form 的布局方式。
Grid网格
简介：Grid顾名思义就是“网格”，它的子控件被放在一个一个实现定义好的小格子里面，整齐配列。Grid和其他各个Panel比较起来，功能最多也最为复杂。 要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素，从而定义行数和列数。
而放置在Grid面板中的控件元素都必须显示采用附加属性语法定义其 放置所在的行和列，它们都是以0为基准的整型值，如果没有显式设置任何行或列，Grid将会隐式地将控件加入在第0行第0列。由于Grid的组成并非简单的添加属性标记来区分行列，这也使得用户在实际应用中可以具体到某一单 元格中，所以布局起来就很精细了。
特点：1、可以定义任意数量的行和列，非常灵活。
2、行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定，并可以设置最大和最小值。
3、内部元素可以设置自己所在的行和列Grid.Row和Grid.Column，还可以设置自己纵向跨几行Grid.RowSpan，横向跨几列 Grid.ColumnSpan。
4、可以设置Children元素的对齐方向：水平HorizontalAlignment，垂直VerticalAlignment。
基于以上这些特点，Grid的适用场合有：
1、UI布局的大框架设计。
2、大量UI元素需要成行或者成列对齐的情况。
3、UI尺寸改变的时候，元素需要保留固有的宽度和高度比列。
Grid常用属性
Grid.Column:读取或设定指定FrameworkElement的附加属性Grid.Column的值
Grid.ColumnSpan:读取或设定指定FrameworkElement的附加属性Grid.ColumnSpan的值
Grid.Row:读取或设定指定FrameworkElement的附加属性Grid.Row的值
Grid.RowSpan:读取或设定指定FrameworkElement的附加属性Grid.RowSpan的值
Grid高度、宽度的几种定义方式：
1、绝对尺寸:就是给一个实际的数字，但通常将此值指定为整数,像上图中中那样
2、自动(Autosizing):值为Auto，实际作用就是取实际控件所需的最小值
3、StarSizing:值为或N，实际作用就是取尽可能大的值，当某一列或行被定义为则是尽可能大，当出现多列或行被定义为则是代表几者之间按比例方设置尺寸
第一种，固定长度——宽度不够，会裁剪，不好用。单位pixel。
第二种，自动长度——自动匹配列中最长元素的宽度。
第三种，比例长度——表示占用剩余的全部宽度；两行都是，将平分剩余宽度；像上面的一个2*，一个*，表示前者2/3宽度。
DockPanel：泊靠式面板
DockPanel定义一个区域，在此区域中，您可以使子元素通过描点的形式排列，这些对象位于 Children 属性中。 DockPanel会对每个子元素进行排序，并将根据指定的边进行停靠，多个停靠在同侧的元素则按顺序排序。在DockPanel中，指定停靠边的控件，会根据定义的顺序占领边角，所有控件绝不会交叠。
默认情况下，后添加的元素只能使用剩余空间，无论对DockPanel的最后一个子元素设置任何停靠值，该子元素都将始终填满剩余的空间。如果不希望最后一个元素填充剩余区域，可以将DockPanel属性LastChildFill设置为false，还必须为最后一个子元素显式指定停靠方向。
使用场合：DockPanel停靠容器，专门负责自适应窗口的布局。
StackPanel：栈式面板
StackPanel就是将控件按照行或列来顺序排列，但不会换行。通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal）和竖排（Vertical默认的）。水平排列时，每个元素都与面板一样高；垂直排列时，每个元素都与面板一样宽。如果包含的元素超过了面板空间，它只会截断多出的内容。
特点:每个元素各占一行或者一列
使用场合：同类元素需要紧凑排列（如制作菜单和列表）。
移除其中的元素后能够自动补缺的布局或者动画。
StackPanel 适合水平或者垂直方向的布局，对于水平或者垂直方向要求进行布局的，我们都可以采用StackPanel来进行布局
WrapPanel：自动折行面板（环绕面板）
WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行，后续排序按照从上至下或从右至左的顺序进行。
Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal：元素是从左向右排列的，然后自上至下自动换行。当Orientation属性的值设置为Vertical：元素是从上向下排列的，然后从左至右自动换行。
ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。
ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。
UniformGrid：均分布局
介绍了前面的Grid,接下来介绍的这个UniformGrid 就是Grid的简化版，每个单元格的大小相同，不需要定义行列集合。每个单元格始终具有相同的大小，每个单元格只能容纳一个控件，将自动按照定义在其内部的元素个数，自动创建行列，并通常保持相同的行列数。UniformGrid 中没有Row 和Column 附加属性，也没有空白单元格。
与Grid布局控件相比，UniformGrid布局控件很少使用。Grid面板是用于创建简单乃至复杂窗口布局的通用工具。UniformGrid面板是一个一种更特殊的布局容器，主要用于在一个刻板的网格中快速地布局元素。
UniformGrid 布局面板和Grid 面板相似，将子元素按照行列的方式排列。但是可以Grid 有一下不同：
1不需要指定行和列的大小 2所有列都是相同的宽度 3 所有行都是相同的高度
4 要指定预期的行和列的数目 5 不需要给子元素指定所在的行和列
子元素将自动的根据添加是顺序从第一行开始显示在对应的行和列中，每样都是从左至右。UniformGrid 中的第一个子元素不一定必须在第一行第一个单元格。设置FirstColumn 属性可以设置子元素显示的起始列（最小为0）。如果想改变子元素每一行的排列的方向，可以设置UniformGrid 的FlowDirection 属性。其值可以是LeftToRight（默认）从左往右，也可以是RightToLeft 从右往左。
Canvas：画布面板
画布，用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种，直接将元素放到指定位置，主要来布置图面。使用Canvas，必须指定一个子元素的位置（相对于画布），否则所有元素都将出现在画布的左上角。调整位置用Left、Right、Top和Bottom四个附加属性。
如果Canvas是窗口主元素（即最外层的布局面板是Canvas），用户改变窗口大小时，Canvas也会随之变化，子元素的位置也会随之移动，以保证相对于Canvas的位置属性不变。
Canvas允许子元素的部分或全部超过其边界，默认不会裁剪子元素，同时可以使用负坐标，即溢出的内容会显示在Canvas外面，这是因为默认 ClipToBounds=”False”，因此画布不需要指定大小。如果想复制画布内容，将ClipToBounds设为true即可。
注意：要说明一点Canvas内的子控件不能使用两个以上的Canvas附加属性，如果同时设置Canvas.Left和Canvas.Right属性，那么后者将会被忽略。