win8分屏

前言：在该系列的上一篇教程之后就一直没有更新，最近大家学习工作都有点忙。看到很多人都挺喜欢我们的博客，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中的数据绑定。

附上本节工程源代码，点击下载。