前言：在该系列的上一篇教程之后就一直没有更新，最近大家学习工作都有点忙。看到很多人都挺喜欢我们的博客，win8y的队友们感到异常欣慰，正因如此，我们才有动力继续更新教程，不负众望。另外，由于网站改版，由原来的“Win8应用商店”改成了“Win8Y开发高手博客”，所以从这一篇教程开始，我们的教程附上的工程源文件的图标、标题等都将改成最新版本的，请原来保存有前5篇教程的工程源文件的童鞋把它们删掉，因为我们的工程源文件是包含以前的教程内容的。或者你自己留作纪念。
首先向各位童鞋介绍什么叫做分屏技术。在Windows8系统中，如果你的屏幕分辨率在1366*768以上，当你把鼠标放在应用的上方，出现手掌时，按住鼠标左键向左或向右移动，你就能把你的应用变为snapped模式（触屏设备是按住屏幕上方向左或向右拖动，这些手势作为Win8系统的使用者应该有所了解），具体请看下图。
1.full screen：应用占满整个屏幕
2.snapped：应用占据屏幕的小部分
3.filled：应用填充snapped模式以外的部分
通过图片相信大家也看的一清二楚，这样用户就可以同时运行两个应用。作为开发者，我们就要对这3种模式做不同的布局和响应以提供最好的用户体验。
在上一节的工程里的Pages文件夹下新建一个空白页ViewState.xaml，如图：
ViewState.xaml文件的Grid标签中添加：
<Grid.RowDefinitions>
<RowDefinition Height=”80″/>
<RowDefinition Height=”35″/>
<RowDefinition/>
<RowDefinition Height=”80″/>
<RowDefinition Height=”30″/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”15*”/>
<ColumnDefinition Width=”*”/>
</Grid.ColumnDefinitions>
<TextBlock x:Name=”txtTitle” Grid.Row=”0″ Grid.Column=”1″ Text=”Win8Y开发高手博客” FontSize=”48″ VerticalAlignment=”Bottom”/>
<TextBlock x:Name=”txtDescription” Grid.Row=”1″ Grid.Column=”1″ Text=”Windows Store App Sample” FontSize=”24″/>
<TextBlock x:Name=”txtText” Grid.Row=”2″ Grid.Column=”1″ Text=”Hello Win8Y” HorizontalAlignment=”Center” VerticalAlignment=”Center” FontSize=”72″/>
<HyperlinkButton x:Name=”hplLink” Grid.Row=”3″ Grid.Column=”1″ HorizontalAlignment=”Right” NavigateUri=”http://www.win8y.com” BorderThickness=”0″ FontSize=”24″ Content=”www.win8y.com” FontWeight=”Normal” FontStyle=”Italic”/>
<Grid HorizontalAlignment=”Left” Grid.Row=”3″ Grid.Column=”1″>
<Grid.RowDefinitions>
<RowDefinition Height=”2*”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
<TextBlock x:Name=”txtWin8Y” Grid.Row=”0″ Text=”Win8y” FontSize=”36″ FontStyle=”Italic”/>
<TextBlock x:Name=”txtFootnote” Grid.Row=”2″ Text=”© 2012 Win8应用商店 Beta 6.28. All Rights Reserved” FontSize=”18″/>
</Grid>
在App.xaml.cs里将启动页面改为Pages.ViewState，运行可以看到如下效果：
你会发现一些文字显示不全，总体来说效果不好看，这时我们就需要改变一下文字大小和位置了。
ViewState.xaml.cs文件添加一个方法：
private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{
//获取当前视图状态
var currentViewState = Windows.UI.ViewManagement.ApplicationView.Value;
//Snapped模式
if (currentViewState == Windows.UI.ViewManagement.ApplicationViewState.Snapped)
{
txtTitle.FontSize = 32;
txtDescription.FontSize = 22;
txtText.FontSize = 48;
txtWin8Y.FontSize = 24;
txtFootnote.FontSize = 12;
hplLink.Margin = new Thickness(0, 0, 0, 35);
}
//Filled模式
else if (currentViewState == Windows.UI.ViewManagement.ApplicationViewState.Filled)
{
txtTitle.FontSize = 48;
txtDescription.FontSize = 24;
txtText.FontSize = 72;
txtWin8Y.FontSize = 36;
txtFootnote.FontSize = 18;
hplLink.Margin = new Thickness(0, 0, 0, 0);
}
//横向全屏模式
else if (currentViewState == Windows.UI.ViewManagement.ApplicationViewState.FullScreenLandscape)
{
txtTitle.FontSize = 48;
txtDescription.FontSize = 24;
txtText.FontSize = 72;
txtWin8Y.FontSize = 36;
txtFootnote.FontSize = 18;
hplLink.Margin = new Thickness(0, 0, 0, 0);
}
//纵向全屏模式
else if(currentViewState==Windows.UI.ViewManagement.ApplicationViewState.FullScreenPortrait)
{ }
}
然后在初始化页面的方法里添加一句
Window.Current.SizeChanged += Current_SizeChanged;
用来监听页面视图状态的改变。
这里只对snapped、Filled和横向的Full Screen三种模式做了调整，还有一种是纵向的Full Screen模式，你可以根据需要做出相应的调整。
四种模式下的效果图：
（注：由于在后台代码中监听了页面视图状态的改变，当变为Snapped模式时，改变了字体大小使得所有文字都能完整显示，可以对比一下未做改变时的效果图。）
本节教程到此结束，下一节Win8Y团队将为大家讲解Windows Store App中的数据绑定。
附上本节工程源代码，点击下载。