Windows 8实例教程系列 - 布局控制

与传统应用类似，Windows store应用允许开发人员通过布局控件管理应用UI。 本篇将讨论Windows8布局设计控制。

Windows 8布局控件

在Windows Store应用设计中，布局控件是控制对象位置和尺寸的，由于Windows Store应用不仅仅面向桌面操作系统，而且还需要适应移动设备的部署，所以在设计时，往往需要考虑到不同的分辨率或者硬件屏幕尺寸标准下应用布局的适配性，最大程度的保持设计灵活性是应用设计原则重要环节之一。根据功能性不同，Windows 8为开发人员提供丰富的布局控件，以达到应用布局设计需求。其中包括：

Grid 

Canvas

StackPanel

WrapGrid

VariableSized WrapGrid

Virtualizing StackPanel

从MSDN开发文档中可以看出，以上布局控件皆派生自Panel类，而Panel类可以装载不同类型的控件作为子控件。

而熟悉Silverlight，WPF和Windows Phone的开发人员会发现一些布局控件是相同的。下面我们快速浏览这些布局控件的效果以及使用方法，

 

Grid

Grid是类似于HTML表格的一种布局控件，由于其灵活性高，所以在应用设计中经常被使用到。一个Grid控件包含一个Row（行）和Column（列）的集合。开发人员可以将不同的对象控件布置在不同的行列中，达到位置控制的效果。

基本代码：

<Grid x:Name="myGrid"></Grid>

表格定义代码：

<Grid x:Name="myGrid">

<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>

在以上代码中，Grid.RowDefinitions和Grid.ColumnDefinitions集合使用RowDefinition和ColumnDefinition定义两行两列的Grid，这里使用附加属性RowDefinitions描述行列集合。(附加属性（Attached Property）XAML重要概念,详细请参考 XAML实例教程系列) 

后台代码声明行和列集合 ：

Grid.RowDefinitions = new List<RowDefinitions>();

Grid.ColumnDefinitions = new List<ColumnDefinitions>();

完成表格的定义，将控件对象放在指定的表格位置，例如在第一行第一列添加一个TextBlock文本框，代码如下：

<Grid x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock x:Name="tbName" Grid.Row="0" Grid.Column="0" />
</Grid>

从代码中可以看出，因为在TextBlock中，没有实现Row和Column的属性，所以放置控件对象到表格是通过附加属性Grid.Row和Grid.Column实现的。通过附加属性和依赖属性的概念，可以理解通过Grid可以存取其所有的子控件。

在完成控件的位置控制后，下面来看看尺寸控制，Grid有三种常见尺寸控制方法：

1. 绝对尺寸控制, 该方法是直接设置固定的宽度和高度值，其局限性比较大，例如，定义行高50像素，列宽150像素的表格，代码如下：

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
</Grid>

2. 相对尺寸控制，该方法使用"*"符号作为宽或高的值，其含义是控件对象将占据布局控件中剩余所有有效空间。由于是由星型标志组成，所以也可以称为星型尺寸控制。该方法可以灵活控制表格的宽度和高度，所以在布局设计中非常实用。

例如：定义一个第一行是第二行高度两倍的表格，其代码如下:

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>

以上代码无论第一行控件占据空间多少，都永远是第二行的两倍高度。例如，如果Grid高度为600像素，那么第一行则被分配400px，第二行则是200px。

如果在以上表格中添加一个3*，其表格比率则为3:2:1， 则行高度将被分配为300px, 200px, 100px.

3. 自动尺寸控制, 设置宽度和高度为“Auto”,该方法将根据控件对象的高度和宽度自动调节分配表格高度和宽度，该控制方式经常与相对尺寸控制配合使用。例如下面的代码，第一行高度将根据控件的高度自动分配，而第二行高度则取剩余布局控件高度值。

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>

实例代码:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Content="普通按钮" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" d:IsHidden="True"/>
        <Button Content="普通按钮" Grid.Column="1" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" d:IsHidden="True"/>
        <Button Content="普通按钮" Grid.Column="2" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" d:IsHidden="True"/>
        <Button Content="普通按钮" Grid.Column="3" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" d:IsHidden="True"/>
        <HyperlinkButton Content="链接按钮" HorizontalAlignment="Left" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" d:IsHidden="True"/>
        <HyperlinkButton Content="链接按钮" HorizontalAlignment="Center" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="1" d:IsHidden="True"/>
        <HyperlinkButton Content="链接按钮" HorizontalAlignment="Center" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="2" d:IsHidden="True"/>
        <HyperlinkButton Content="链接按钮" HorizontalAlignment="Right" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="3" d:IsHidden="True"/>
    </Grid>

 

Canvas

Canvas被称为最简单的布局控件，其使用绝对位置控制对象的位置。声明定义Canvas后，对象使用附加属性Canvas.Left 和 Canvas.Top设置相对左距离和上距离，以达到控制对象显示位置的目的。另外Canvas还提供了ZIndex属性定义控件Z坐标，如果有两个控件重叠覆盖，则ZIndex值越大的控件显示在上方。

实例代码:

<Canvas Margin="0" Grid.Row="1">
            <Button Content="布局按钮" Canvas.Left="785" Canvas.Top="427"/>
            <TextBlock Canvas.Left="814" TextWrapping="Wrap" Text="布局文本" Canvas.Top="248" FontSize="24"/>
            <TextBlock Canvas.Left="355" TextWrapping="Wrap" Text="布局文本" Canvas.Top="203" FontSize="24" />
            <TextBlock Canvas.Left="420" TextWrapping="Wrap" Text="布局文本" Canvas.Top="450" FontSize="24"/>
            <Rectangle Fill="Red" Height="50" Width="70" Canvas.Top="319" Canvas.Left="241" />
            <Ellipse Fill="Yellow" Height="75" Width="75" Canvas.Top="202" Canvas.Left="611" />
        </Canvas>

 

StackPanel

StackPanel控件被称为堆栈面板，也被称为列表控件，该控件没有行或者列的概念，只有水平对齐和垂直对齐的概念。在StackPanel中使用Orientation属性设置内部对象的对齐方式。

但是由于StackPanel对于内部对象位置控制较为直接和简单，通常来说，需要使用Margin属性调节对象的间距。

实例代码:

<StackPanel Margin="0" Grid.Row="1">
            <Button Content="头部" HorizontalAlignment="Stretch"/>
            <Button Content="垂直对齐按钮" HorizontalAlignment="Center"/>
            <Button Content="垂直对齐按钮" HorizontalAlignment="Center"/>
            <Button Content="垂直对齐按钮" HorizontalAlignment="Center"/>
            <Button Content="垂直对齐按钮" HorizontalAlignment="Center"/>
            <Button Content="垂直对齐按钮" HorizontalAlignment="Center"/>
            <Button Content="底部" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="平行对齐" Margin="20,50,0,50" FontSize="20"/>
                <TextBlock Text="平行对齐" Margin="20,50,0,50" FontSize="20"/>
                <TextBlock Text="平行对齐" Margin="20,50,0,50" FontSize="20"/>
                <TextBlock Text="平行对齐" Margin="20,50,0,50" FontSize="20"/>
            </StackPanel>
        </StackPanel>

 

 

WrapGrid

WrapGrid可以理解为特殊的Grid，普通的Grid是通过行和列制定对象的位置，而WrapGrid是根据对象集合的尺寸的不同显示不同的效果。WrapGrid的子控件集合类型是ItemsControl，按照从左到右，从上到下的顺序展示集合中的子元素到用户界面，当元素到达WrapGrid最右边或者最下边，将自动开始新的行或者列继续展示剩余的子元素，直到列举所有元素完成。

在WrapGrid中，使用Orientation控制子元素显示方向，默认情况下，将以垂直的方式展示。

<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation = "Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>

实例代码：

<ItemsControl x:Name="xItems">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

 

VariableSizedWrapGrid

VariableSizedWrapGrid控件和StackPanel非常类似，其布局效果是从左到右从上到下展示布局内子元素。

与StackPanel不同的是VariableSizedWrapGrid控件子元素到达右边界或下边界是将自动切换新行或者列继续展示子元素，直到达到MaximumRowsOrColumns值或者所有子元素展示完毕。

该控件可以通过VariableSizedWrapGrid.RowSpan 和 VariableSizedWrapGrid.ColumnSpan附加属性跨行或跨列显示子对象元素。

另外值得注意的是，正如VariableSizedWrapGrid名字所言，VaribaleSized，其含义是每个Cell单元会根据子控件内容的不同动态填充尺寸。

<VariableSizedWrapGrid Orientation = "Horizontal">
<TextBlock> 文本1</TextBlock>
<TextBlock> 文本2</TextBlock>
<TextBlock> 空</TextBlock>
<TextBlock> 测试文本1</TextBlock>
</VariableSizedWrapGrid>

实例代码：

 

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue" Height="80" 
               VariableSizedWrapGrid.RowSpan="2"/>
            <Rectangle Fill="Green" Width="80" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
            <Rectangle Fill="Yellow" Height="80" Width="80" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
        </VariableSizedWrapGrid>

 

VirtualizingStackPanel

VirtualizingStackPanel是一款同样类似于StackPanel的布局控件，与StackPanel不同的是VirtualizingStackPanel在数据绑定后仅显示当前绑定项，而并非全部数据集合。这样的绑定显示方式在载入超大数据量时，性能差异非常明显，VirtualizingStackPanel数据载入比StackPanel快出数十倍，其内存占有率非常低。

VirtualizingStackPanel很少被用于独立控件效果，经常会配合ListBox，ComboBox等ItemsControl使用，主要用于大数据量绑定。

  <ComboBox x:Name="comboboxList1" VerticalAlignment="Top">
            <ComboBox x:Name="comboboxList2" VerticalAlignment="Top">
                <ComboBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel />
                    </ItemsPanelTemplate>
                </ComboBox.ItemsPanel>
            </ComboBox>
        </ComboBox>

代码实例：

        <StackPanel>

            <StackPanel.Resources>
                <local:LotsOfItems x:Key="data"/>
            </StackPanel.Resources>

            <ListBox Height="150" ItemsSource="{StaticResource data}"
                     VirtualizingStackPanel.VirtualizationMode="Recycling">
            </ListBox>

        </StackPanel>

 

Border

Border是最后要提及的布局控件，由于它不是派生自Panel类，所以放在最后讲述。Border是Windows store应用中常见的布局控件之一，主要目的是显示一个边框在一个或者多个对象外围。

开发人员可通过Border属性控制其边框效果以及显示位置等。

<Border BorderBrush="Red" BorderThickness="2" Width="150"
            Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5">
   <TextBlock Text="边框演示" />
</Border>

实例代码：

<Border BorderBrush="Yellow"
                BorderThickness="3"
                Width="220"
                Height="100"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Margin="549,363,0,0">
            <StackPanel Orientation="Vertical">
                <TextBlock Text="边框演示:Windows 8实例教程 - 银光中国" />
                <TextBlock Text="Http://www.silverlightchina.net" />
            </StackPanel>
        </Border>

 

本篇就讨论到这里，欢迎大家一起讨论学习。

源代码下载

 

 

欢迎大家留言讨论学习Windows 8应用开发，希望能够看到更多优秀的Windows store应用。

欢迎大家加入QQ技术群，一起学习讨论Windows 8&Silverlight&WPF&Widnows Phone开发技术。 
22308706(一群) 超级群500人 
37891947(二群) 超级群500人 
100844510(三群) 高级群200人 
32679922(四群) 超级群500人 
23413513(五群) 高级群200人 
32679955(六群) 超级群500人 
88585140(八群) 超级群500人 
128043302(九群 企业应用开发推荐群) 高级群200人 
101364438(十群) 超级群500人