Windows8应用开发学习（二）布局控件篇

我们可以用XAML来绘制Windows8应用的UI, 关于XAML语言，不在此详述，google之，bing之，莫度娘之。。。- -# 控件大概可分为布局控件，数据绑定控件以及常规控件。本篇只介绍布局控件，常规控件将在下一篇介绍，数据绑定控件会在以后的数据绑定篇介绍。

布局控件

Grid

Grid类似于HTML中的table, 可自定义m行n列，见如下代码：

 1 <Grid>
 2             <Grid.RowDefinitions>
 3                 <RowDefinition Height="*"/>
 4                 <RowDefinition Height="*"/>
 5                 <RowDefinition Height="*"/>
 6             </Grid.RowDefinitions>
 7             <Grid.ColumnDefinitions>
 8                 <ColumnDefinition Width="*"/>
 9                 <ColumnDefinition Width="*"/>
10                 <ColumnDefinition Width="*"/>
11             </Grid.ColumnDefinitions>
12 </Grid>

这段代码定义了一个三行散列的Grid, 每一行高度一样，每一列宽度也一样。如果我们将Height或者Width设置为auto, 行高和列宽会随着内容而改变，也可设为数值，如100,200. “*”为占满所有控件，我们可以通过设置“x*”来按比例控制。如上代码，设置了三行，行高均为“*”, 这Grid的三行行高相同，如设置为"*", "2*", "*", 则为第一行行高占整个控件高度的25%, 第二行行高占整个控件高度的50%, 第三行行高占整个控件高度的25%.

像Grid中填充元素，需要给填充的元素制定位于哪一行哪一列，如下：

View Code

 1         <Grid>
 2             <Grid.RowDefinitions>
 3                 <RowDefinition Height="*"/>
 4                 <RowDefinition Height="*"/>
 5                 <RowDefinition Height="*"/>
 6             </Grid.RowDefinitions>
 7             <Grid.ColumnDefinitions>
 8                 <ColumnDefinition Width="*"/>
 9                 <ColumnDefinition Width="*"/>
10                 <ColumnDefinition Width="*"/>
11             </Grid.ColumnDefinitions>
12             <TextBlock Grid.Row="0" Grid.Column="0" Text="第一行第一列" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>            
13             <TextBlock Grid.Row="0" Grid.Column="2" Text="第一行第三列" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
14             <TextBlock Grid.Row="1" Grid.Column="1" Text="第二行第二列" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
15             <TextBlock Grid.Row="2" Grid.Column="0" Text="第三行第一列" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
16             <TextBlock Grid.Row="2" Grid.Column="2" Text="第三行第三列" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30"/>
17         </Grid>

运行效果如下：

由代码可知，index从0开始算起，这对我们码屌来说并不陌生。

StackPanel

这玩意儿它会自动帮你排列控件，你只需要给它设置是让控件横着排还是竖着排就好了，见代码：

 1         <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
 2             <TextBlock Text="横一" FontSize="30" Margin="10"/>
 3             <TextBlock Text="横二" FontSize="30" Margin="10"/>
 4             <TextBlock Text="横三" FontSize="30" Margin="10"/>
 5         </StackPanel>
 6         <StackPanel Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Top">
 7             <TextBlock Text="竖一" FontSize="30" Margin="10"/>
 8             <TextBlock Text="竖二" FontSize="30" Margin="10"/>
 9             <TextBlock Text="竖三" FontSize="30" Margin="10"/>
10         </StackPanel>

运行结果如下：

第一个StackPanel的Orientation属性设置为Horizontal, 则控件在里面为横向排列，第二个StackPanel的Orientation属性设置为Vertical, 则控件在里面为纵向排列。HorizontalAlignment和VerticalAlignment分别设置了横向和纵向对齐方式。

VirtualizingStackPanel

看名字就知道这哥们和StackPanel是哥俩好，不过它稍微牛逼一点，但它也不能单独拿出来使用，一般作为包含item的数据绑定控件（eg. GridView, ListView等）的ItemsPanel使用，从外观上表现为一个包含在ScrollViewer中的StackPanel，我们可以通过拖动滚动条来查看数据。优点在于，通过拖动滚动条查看数据时，在数据进入可视范围前，并不加载数据，而是在滚动进度条使item进入可视范围时才会加载，这对节省内存改变性能有很大好处。代码如下：

1 <ListView>
2     <ListView.ItemsPanel>
3         <ItemsPanelTemplate>
4             <VirtualizingStackPanel Orientation = "Vertical" />
5         </ItemsPanelTemplate>
6     </ListView.ItemsPanel>
7 </ListView>

WrapGrid

WrapGrid同样不可以单独拿出来使用，它也要作为包含item的数据绑定控件的ItemsPanel使用，从命名可以看出，它是支持wrap的，当我们给它设置了orientation, height和width属性，item排列时会在达到WrapGrid边缘时自动换到下一行或下一列，见代码：

1         <ListView>
2             <ListView.ItemsPanel>
3                 <ItemsPanelTemplate>
4                     <WrapGrid Orientation="Horizontal" Width="500" Height="300"/>
5                 </ItemsPanelTemplate>
6             </ListView.ItemsPanel>            
7         </ListView>

此代码设置了WrapGrid中的元素横向排列，WrapGrid宽500，高300，若item的宽为100，则第五个元素刚好充满容器的第一行，第六个元素则会自动换到第二行进行排列。

VariableSizedWrapGrid

从命名上不难看出，VariableSizedWrapGrid具备WrapGrid的wrap功能，并且每一个item的size可以不同，这个控件还可以单独拿来使用。见代码：

1         <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" ItemHeight="100" ItemWidth="200">
2             <Rectangle Fill="Blue"/>
3             <Rectangle Fill="Green" VariableSizedWrapGrid.ColumnSpan="2"/>
4             <Rectangle Fill="Red" VariableSizedWrapGrid.RowSpan="2"/>
5             <Rectangle Fill="Yellow"/>
6             <Rectangle Fill="Aqua" VariableSizedWrapGrid.RowSpan="2"/>
7             <Rectangle Fill="Orange"/>
8         </VariableSizedWrapGrid>

运行结果如下：

ViewBox

ViewBox可以让它包含的元素根据它的大小进行缩放，这个控件只能包含一个子元素。见代码：

 1         <StackPanel Orientation="Horizontal">
 2             <Rectangle Width="200" Height="200" Fill="Green" Margin="50"/>
 3             <StackPanel>
 4                 <Viewbox Height="100" Width="100" Stretch="Uniform" StretchDirection="Both">
 5                     <Rectangle Width="200" Height="200" Fill="Blue"/>
 6                 </Viewbox>
 7                 <Viewbox Height="300" Width="300" Stretch="Uniform" StretchDirection="Both">
 8                     <Rectangle Width="200" Height="200" Fill="Red"/>
 9                 </Viewbox>
10                 <Viewbox Height="300" Width="200" Stretch="Fill" StretchDirection="Both">
11                     <Rectangle Width="200" Height="200" Fill="Yellow"/>
12                 </Viewbox>
13             </StackPanel>
14         </StackPanel>

运行效果：

绿色矩形为原始大小，蓝色、红色和黄色为通过ViewBox缩放后的大小。

Canvas

这个控件就比较简单了，主要用作在上面摆放其他控件，可以通过设置摆放控件的Canvas.Left和Canvas.Top属性来控制控件在Canvas中的摆放位置。代码如下：

1         <Canvas Background="Green" Width="300" Height="300">
2             <Rectangle Canvas.Left="50" Canvas.Top="100" Width="100" Height="100" Fill="Blue"/>
3         </Canvas>