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中的数据绑定。

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