这章,我们来探讨一下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像素的空间让应用程序不会造成破坏大多数程序美观,这要使你沾满了整个屏幕、很显然,你要调整他的布局的方式,在接下来的篇幅中,我将讲解的他的机制以及有所不同。