手把手玩转win8开发系列课程（25）

这章，我们来探讨一下metro app一个特别的特点——瓦片

在这章中，我们来探讨了微软为了更好的满足用户体验所提供的两大特征。第一大特征就是允许了metro app填满和折断。以此于他能够紧挨着出现了。我就告诉你怎么自由的停靠app的位置，满足他的布局方式。

第二点，就是一个metro app与众不同的布局的方式瓦片。这是windows的经典菜单的极大的替代品。这简单的实现这个方式， 就是放几个静态的按钮能解决这个问题。但这需要捕捉这个程序的状态了。这不好，在这章中，你讲看到如何动态的创建title  、下图展示本章的内容提要：

①彻底支持metro 布局

就目前而言，这个app程序能够充分整个屏幕上。但是，我们要设置他的数量，以至于他能够铺满整个屏幕，普通的app占用了320像素。我们一个全屏的app能不布满了屏幕其他部分。我能达到这个效果，我的源代码如下：

 1 <Page
 2  x:Class="MetroGrocer.Pages.DetailPage"
 3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5  xmlns:local="using:MetroGrocer.Pages"
 6  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8  mc:Ignorable="d">
 9  <Grid x:Name="GridLayout" Background="#71C524">
10    <Grid.RowDefinitions>
11      <RowDefinition/>
12      <RowDefinition/>
13    </Grid.RowDefinitions>
14    <Grid.ColumnDefinitions>
15      <ColumnDefinition/>
16      <ColumnDefinition/>
17    </Grid.ColumnDefinitions>
18    <StackPanel x:Name="TopLeft" Background="#3E790A">
19      <TextBlock x:Name="TopLeftText"
20         Style="{StaticResource DetailViewLabelStyle}"
21         Text="Top-Left"/>
22    </StackPanel>
23    <StackPanel x:Name="TopRight" Background="#70a524" Grid.Column="1" Grid.Row="0">
24      <TextBlock x:Name="TopRightText"
25         Style="{StaticResource DetailViewLabelStyle}"
26         Text="Top-Right"/>
27    </StackPanel>
28 <!--不同的support的方式-->
29    <StackPanel x:Name="BottomLeft" Background="#1E3905" Grid.Row="1">
30      <TextBlock x:Name="BottomLeftText"
31         Style="{StaticResource DetailViewLabelStyle}" Text="Bottom-Left"/>
32    </StackPanel>
33    <StackPanel x:Name="BottomRight" Background="#45860B" Grid.Column="1"
34         Grid.Row="1">
35      <TextBlock x:Name="BottomRightText"
36           Style="{StaticResource DetailViewLabelStyle}"
37           Text="Bottom-Right"/>
38    </StackPanel>
39  </Grid>
40 </Page>

1 <Page
 2  x:Class="MetroGrocer.Pages.DetailPage"
 3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5  xmlns:local="using:MetroGrocer.Pages"
 6  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8  mc:Ignorable="d">
 9  <Grid x:Name="GridLayout" Background="#71C524">
10    <Grid.RowDefinitions>
11      <RowDefinition/>
12      <RowDefinition/>
13    </Grid.RowDefinitions>
14    <Grid.ColumnDefinitions>
15      <ColumnDefinition/>
16      <ColumnDefinition/>
17    </Grid.ColumnDefinitions>
18    <StackPanel x:Name="TopLeft" Background="#3E790A">
19      <TextBlock x:Name="TopLeftText"
20         Style="{StaticResource DetailViewLabelStyle}"
21         Text="Top-Left"/>
22    </StackPanel>
23    <StackPanel x:Name="TopRight" Background="#70a524" Grid.Column="1" Grid.Row="0">
24      <TextBlock x:Name="TopRightText"
25         Style="{StaticResource DetailViewLabelStyle}"
26         Text="Top-Right"/>
27    </StackPanel>
28 <!--不同的support的方式-->
29    <StackPanel x:Name="BottomLeft" Background="#1E3905" Grid.Row="1">
30      <TextBlock x:Name="BottomLeftText"
31         Style="{StaticResource DetailViewLabelStyle}" Text="Bottom-Left"/>
32    </StackPanel>
33    <StackPanel x:Name="BottomRight" Background="#45860B" Grid.Column="1"
34         Grid.Row="1">
35      <TextBlock x:Name="BottomRightText"
36           Style="{StaticResource DetailViewLabelStyle}"
37           Text="Bottom-Right"/>
38    </StackPanel>
39  </Grid>
40 </Page>

这样子，创建一个简单五彩的grid方式。你可以看到他的布局的方式。其他有一段placeholder的空白，效果如图所示：

温馨提示，这个程序的遮断的方式只能在屏幕横放才能显示。 在win8消费者版本中，只有1366或者更大的分辨率中才能使用。另外，你要更好做实验的话，请在水平状态下使用吧。

损失的320像素的空间让应用程序不会造成破坏大多数程序美观，这要使你沾满了整个屏幕、很显然，你要调整他的布局的方式，在接下来的篇幅中，我将讲解的他的机制以及有所不同。