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

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

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

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

①彻底支持metro 布局

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

<Page
 x:Class="MetroGrocer.Pages.DetailPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:MetroGrocer.Pages"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d">
 <Grid x:Name="GridLayout" Background="#71C524">
   <Grid.RowDefinitions>
     <RowDefinition/>
     <RowDefinition/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
     <ColumnDefinition/>
     <ColumnDefinition/>
   </Grid.ColumnDefinitions>
   <StackPanel x:Name="TopLeft" Background="#3E790A">
     <TextBlock x:Name="TopLeftText"
        Style="{StaticResource DetailViewLabelStyle}"
        Text="Top-Left"/>
   </StackPanel>
   <StackPanel x:Name="TopRight" Background="#70a524" Grid.Column="1" Grid.Row="0">
     <TextBlock x:Name="TopRightText"
        Style="{StaticResource DetailViewLabelStyle}"
        Text="Top-Right"/>
   </StackPanel>
<!--不同的support的方式-->
   <StackPanel x:Name="BottomLeft" Background="#1E3905" Grid.Row="1">
     <TextBlock x:Name="BottomLeftText"
        Style="{StaticResource DetailViewLabelStyle}" Text="Bottom-Left"/>
   </StackPanel>
   <StackPanel x:Name="BottomRight" Background="#45860B" Grid.Column="1"
        Grid.Row="1">
     <TextBlock x:Name="BottomRightText"
          Style="{StaticResource DetailViewLabelStyle}"
          Text="Bottom-Right"/>
   </StackPanel>
 </Grid>
</Page>

<Page
 x:Class="MetroGrocer.Pages.DetailPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:MetroGrocer.Pages"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d">
 <Grid x:Name="GridLayout" Background="#71C524">
   <Grid.RowDefinitions>
     <RowDefinition/>
     <RowDefinition/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
     <ColumnDefinition/>
     <ColumnDefinition/>
   </Grid.ColumnDefinitions>
   <StackPanel x:Name="TopLeft" Background="#3E790A">
     <TextBlock x:Name="TopLeftText"
        Style="{StaticResource DetailViewLabelStyle}"
        Text="Top-Left"/>
   </StackPanel>
   <StackPanel x:Name="TopRight" Background="#70a524" Grid.Column="1" Grid.Row="0">
     <TextBlock x:Name="TopRightText"
        Style="{StaticResource DetailViewLabelStyle}"
        Text="Top-Right"/>
   </StackPanel>
<!--不同的support的方式-->
   <StackPanel x:Name="BottomLeft" Background="#1E3905" Grid.Row="1">
     <TextBlock x:Name="BottomLeftText"
        Style="{StaticResource DetailViewLabelStyle}" Text="Bottom-Left"/>
   </StackPanel>
   <StackPanel x:Name="BottomRight" Background="#45860B" Grid.Column="1"
        Grid.Row="1">
     <TextBlock x:Name="BottomRightText"
          Style="{StaticResource DetailViewLabelStyle}"
          Text="Bottom-Right"/>
   </StackPanel>
 </Grid>
</Page>

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

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

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