快速构建Windows 8风格应用17-布局控件

本篇博文主要介绍三种常用的布局控件：Canvas、Grid、StackPanel。

Panel类是开发Windows 8 Store应用中一个重要类，它在Windows 8 Store应用布局系统中扮演非常重要角色。

Panel可以承载多个子元素，面板类可以把子元素存放在栈中、或网格里面、或把子元素停靠在其边缘等。

Panel类自身是一个抽象类，下面是Panel类的层次结构：

Windows 8 Store应用中包含的三个标准布局控件：Canvas（通常在常规布局中，尽量不要考虑使用Canvas，不过在某些特殊情况下，使用Canvas还是非常方便的）、Grid（它是大多数常规布局的首选）、StackPanel（可能是最简单的一种面板类型）。

 

Canvas

要在Canvas中定位元素，需要提供相对于左上角的水平坐标和竖直坐标。

代码实现效果：

其中Left和Top属性表示元素的左上角与Canvas左上角的相对位置。

一般来说Canvas比较适合把元素布局在任何位置上，因此这样更适合于矢量图形编程而不是控件布局编程。

同样我们C#代码中控制控件元素在Canvas中布局。

我们注意到xaml代码中并没有设置button的相对于Canvas的Left和Top属性，这里通过C#代码进行设置。

SetValue方法定义在DependencyObject类里面，LeftProperty和TopProperty是Canvas中DependencyProperty类型的静态字段。

两种布局设置方式最后实现效果是一样。

 

Canvas还有一个附加属性是ZIndex，我们可以使用ZIndex来更改默认元素的层次。

我们可以在一个或多个字元素中设置Canvas.ZIndex附加属性，可以将这个属性理解为屏幕中想出的Z轴，z值较大的元素会覆盖z值较小的元素。如果两个元素具有相同的Canvas.ZIndex值，那么会根据他们在Children集合中德顺序来分层。

注意：虽然Canvas.ZIndex附加属性定义在Canvas类中，但是它实际上适用于任何类型的面板。另外如果我们自定义一个面板类，其实我们并不需要处理Z值，布局系统会自动处理。

 

Grid

Grid是我们选择面板类时默认选择，它非常灵活易用。

Grid让我们可以想起HTML中的表格（Table），但两者是有差异的：Grid不像HTML的表格，它并不是做格式化的工作，只用于布局，并且也没有标题或者内置单元格分割线等概念。

Grid具有一定数量的行和列；行的高度可以不一样，列的高度也可以不一样。Grid中的子元素可以占据一个特定的行和列，也可以占据多行和多列。虽然Grid功能非常强大，但也是需要付出代价的，我们在使用Grid的时候需要知道需要多少行和列来容纳所有的子元素。

 

注意：嵌套Grid是十分常见，但不要滥用，特别是在程序会经常重新生成布局的情况下。过于复杂的嵌套会导致布局非常混乱。

实现效果：

Grid定义了RowDefinitions和ColumnDefinitions两个属性，它们分别是RowDefinition和ColumnDefinition对象的集合。这些对象定义了每行的高度和每列的宽度，我们通常可以有三种选择：

1）  使用单词“Auto”；

2）  固定的像素；

3）  星号，或者数字后加星号；

通过Grid的附加属性Grid.Row和Grid.Column来指明子元素所在的行和列。

 

StackPanel

StactPanel可以理解成已“栈”的形式将其子元素自顶向下或自左向右排列，并且子元素彼此之间不互相重叠。

默认情况下子元素是自顶向下排列的。

我们也可以设置子元素是自左向右排列。

我们可以通过StackPanel的Orientation属性来改变子元素排列的方向。

当然我们也可以通过C#代码来设置子元素的排列方向。