Windows Store apps开发[8]处理Fullscreen, Snapped和Filled状态

注：本系列学习帖子我在DevDiv.com移动开发社区原创首发
转载请注明出处：BeyondVincent(破船)@DevDiv.com
如果你有什么问题也可以前往交流
下面是首发地址：

[DevDiv原创]Windows
8 Metro App开发Step by Step---(13个学习帖子)

在Windows 8 Metro App中定义了三种视图状态：full screen, snapped, filled。这三种状态在程序中都比较常见，也会经常用到，在这里我就跟大家分享一下相关视图状态的知识点。

通过本次学习，你将掌握以下内容：

1、视图状态的介绍

2、如何在程序中实现三种视图状态的切换

3、最后附上程序运行截图和程序



更多内容请查看下面的帖子


Windows 8 Metro App开发Step by Step

1、视图状态的介绍

在Windows 8 Metro App中，我们可以处理三种视图状态：full
screen, snapped, filled。

full screen是Metro App默认的状态，而snapped和fill视图状态只能显示在水平分辨率为1366像素或者更高的屏幕中。因为snapped 视图宽度为320像素，可以摆放在屏幕的左边或者右边。剩余的1046像素分别分配为：分割线（22像素）和fill视图，fill视图的水平像素必须为1024或者更高。

如下面的三个图所示：

full screen（程序填满整个屏幕）



snapped（应用程序只占据了整个屏幕的一小部分）



Fill（应用程序占据了snapped宽度剩余的区域）



这样用户就可以同时使用2个应用程序，那么作为开发者，就需要提供相应的布局和用户响应以满足三种视图状态。

下面我就会根据视图状态的变化，在对我的程序进行编程控制，以适应相应的布局和用户响应。

2、如何在程序中实现三种视图状态的切换

a、首先我使用BlankApp创建了一个名为DevDiv_SnapView的工程，并在工程中添加Pages文件夹，然后使用空模版创建了3个xaml文件，分别为：FillView.xaml，FullView.xaml和SnapView.xaml，并把MainPage.xaml也移动到Pages目录中。

b、由于三种视图状态可以显示三种不同的视图，那么我就利用上面创建的三个页面以在不同视图状态进行显示。首先我把这三个视图的布局和内容进行了编写，在这里不是关键的，所以就不上代码了，具体内容可以下载后面我提供的代码附件进行查看。



c、在MainPage.xaml中为了进行相关页面的导航，我使用了一个Frame控件，在MainPage.xaml文件中也可以看到想要的代码。这里不列出来了。



d、监听视图状态改变事件，以进行相应的处理

这一步是最重要的。在此需要监听视图状态的改变，具体代码如下所示[文件MainPage.xaml.cs]：其中 SizeChanged
+= MainView_SizeChanged;是注册事件。

ApplicationView.value是获取当前视图状态的值。值类型定义如下：

摘要:
//     指定可以处理的应用程序视图状态更改集。
[Version(100794368)]
public enum ApplicationViewState
{
    // 摘要:
    //     当前应用程序的视图为全屏（没有预期相邻的对齐的应用程序）并且已更改为横向。
    FullScreenLandscape = 0,
    //
    // 摘要:
    //     当前应用程序视图已缩小到部分屏幕视图作为另一个应用程序对齐的结果。
    Filled = 1,
    //
    // 摘要:
    //     当前应用程序的视图已对齐。
    Snapped = 2,
    //
    // 摘要:
    //     当前应用程序的视图为全屏（没有预期相邻的对齐的应用程序）并且已更改为纵向。
    FullScreenPortrait = 3,
}

下面是文件MainPage.xaml.cs
代码：其中方法MainView_SizeChanged 根据不同的视图状态切换到不同的视图，以为用户提供不同的布局

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at <a href="\"http://go.microsoft.com/fwlink/?LinkId=234238\"" target="\"_blank\"">http://go.microsoft.com/fwlink/?LinkId=234238</a>

namespace DevDiv_SnapView.Pages
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            SizeChanged += MainView_SizeChanged;
        }

        void MainView_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            if (ApplicationView.Value == ApplicationViewState.Filled)
            {
                MainFrame.Navigate(typeof(FillView));
            }
            else if (ApplicationView.Value == ApplicationViewState.Snapped)
            {
                MainFrame.Navigate(typeof(SnapView));
            }
            else if (ApplicationView.Value == ApplicationViewState.FullScreenLandscape)
            {
                MainFrame.Navigate(typeof(FullView));
            }
            else if (ApplicationView.Value == ApplicationViewState.FullScreenPortrait)
            {
            }
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }
}

代码编写至此结束，下面我们来运行程序，看看实际效果

3、最后附上程序运行截图和程序

Full视图



Snap视图（左边）



Fill视图（左边）



最后附上代码


DevDiv_SnapView.rar