本篇博文主要阐述基于Windows Runtime的Windows Phone 应用页面间导航相关知识,主要分为以下几个方面:

  • Window、Frame和Page概览
  • 页面间实现跳转
  • 处理物理后退键
  • 页面的缓存

Window、Frame和Page概览

基于WinRT的Windows Phone 8.1,每个App只有一个Window。

每个Window都有自己的Frame和导航栈, 以及自己的Page。

Window中有一个Frame,并且100%撑满可视区域,通常Frame也是100%撑满Window的可视区域。

所有的Page都被包含在Frame中,Frame负责页面间的导航。Page中包含的就是自己的内容了,包括Xaml文件和相关联的code-behind代码。

虽然应用的窗口一般都只会包含一个Frame,但是我们可以通过在Page中嵌入Frame,但是这种情况在手机应用上并不常见。

通常Frame在应用启动时创建,可以参考下面代码:

来简单分析一下上述代码,OnLaunched函数存在于App.xaml.cs文件中,包含一些启动的逻辑代码。OnLaunched函数中将Frame对象当前Window中,然后调用Frame.Navigate(Type,object)函数,创建一个Page的实例,并把Page放进Frame中。当向前或向后跳转Page时,Frame会记录跳转的历史,可以通过Frame.BackStack属性(返回类型:IList<PageStackEntry>)查看跳转导航的历史。

页面间实现跳转

当需要跳转到另一个页面时,调用Frame的Navigate函数。该函数把当前页面放到后退栈中,并且可以传递任何参数给新的页面。

另外我们可以在页面中放置Buttons, hyperlinks, appbar buttons 或者其他控件,通过代码移除当前Page,让用户跳转回到之前的页面。我们可以利用Frame.GoBack()函数实现。

下面来分析具体实现的原理:通常Windows Phone应用会维护一个跳转的历史栈,就像Web浏览器一样。应用通常启动至MainPage.xaml,所以它是栈的第一个项,当跳转到SecondPage.xaml后,SecondPage.xaml就被放进栈中,当调用Frame.GoBack时,SecondPage就会被从栈中弹出来,然后回到MainPage。

处理物理后退键

基于Silverlight的Windows Phone 用户体验中一个典型的特性是:当用户按下Back键时,用户知道这样会取消当前视图并回到之前的视图。在Windows Phone Silverlight中,物理Back键会引起App内部的向回跳转。如果用户当前在启动页面,基于Silverlight框架的Windows Phone App会被关闭。

而在基于Windows Runtime的Windows Phone App中,行为稍微有点不一样,默认情况下按下物理Back键会引起向后跳转到之前的App,而跟用户当前在哪个App的页面上没有关系。因此开发者需要重写这种默认的行为让它在App内部跳转。另外,如果用户在App的启动页面,按下物理Back键会引起跳转到之前的App,但是与Silverlight框架不同的是当前的App是被挂起,而不是被关闭

关于上述的内容,那么我们该如何对Back键进行处理呢?

如果使用空项目模板,那么新建的项目文件中没有任何Back键的处理代码,如果想实现简单的后退跳转,可以利用下面代码。

上述代码中,在App.xaml.cs文件中重写了BackPressed事件,在BackPressed事件中判断是否可以向前进行跳转,如果可以,返回到前一个页面。

如果使用非空项目模板进行创建项目(例如:Hub App或者Pivot App),新建的项目以及包含了正确的Back键处理,我们可以在项目的Common文件夹中的NavigationHelper类中找到相应处理函数。

另外也可以在某一个页面上单独处理Back键,具体处理方法和上述代码类似,这里就不再累赘重述了。

页面的缓存

首先我们来描述一个常用场景:当用户第一次访问某个页面时,页面是新的,没有数据带入。用户与页面交互,会填充一些数据。当向前导航到另一个页面然后再导航回来。通常用户期望页面和离开时是一样的状态。那么我们该如何保证页面和离开时是一样的状态呢?

我们可以利用Page的NavigationCacheMode属性。

当使用NavigationCacheMode.Disabled时,向前跳转时创建一个新的实例,原始页面的状态丢失。

当使用NavigationCacheMode.EnabledRequired时,缓存的页面可以重用,原始页面的状态保留。

下面详细描述一下NavigationCacheMode属性三个值的作用:

  • NavigationCacheMode.Disabled:不管向回还是向前跳转都会生成页面新的实例;
  • NavigationCacheMode.Enabled:页面被缓存,但是达到缓存上限时,缓存的实例还是会被丢弃(上限由Frame.CacheSize属性决定,默认情况下为10);
  • NavigationCacheMode.Required:页面被缓存,并且缓存的实例不受数量限制;

另外也可以使用NavigationHelper类保存/恢复页面状态。通常我们在Page的OnNavigatedTo函数事件中调用NavigationHelper的LoadState函数恢复页面状态,在Page的OnNavigatedFrom函数事件中调用NavigationHelper的SaveState函数保存页面状态。

参考文章

构建基于WinRT的WP8.1 App 01:页面导航及页面缓存模式的更多相关文章

  1. 构建基于WinRT的WP8.1 App 03:Page控件

    单页面模板 通常利用Visual Studio 2013创建的最简单的WP8.1应用是Blank App,它只包含一个不带任何UI的页面,并且没有任何状态管理的逻辑. 该不带任何UI的页面称为Blan ...

  2. 构建基于WinRT的WP8.1 App 02:数据绑定新特性

    基于WinRT的Windows Phone 8.1以及Windows 8.1中Xaml数据绑定增加了一些新特性. FallBackValue属性:FallBackValue在绑定的值属性值不存在时,可 ...

  3. wp8.1 Study1: 页面导航&页面间值传递

    摘要:wp8.1与wp8中很多API是不一样了,wp8.1把以前wp7.x时的api去掉了,更多与win8.1的API相似.比如以下的页面导航和页面之间的值传递 1.页面导航 利用Frame.Navi ...

  4. 基于Html5的移动端APP开发框架

    快速增长的APP应用软件市场,以及智能手机的普及,手机应用:Native(原生)APP快速占领了APP市场,成为了APP开发的主流,但其平台的不通用性,开发成本高,多版本开发等问题,一直困扰着专业AP ...

  5. maven-bundle-plugin插件, 用maven构建基于osgi的web应用

    maven-bundle-plugin 2.4.0以下版本导出META-INF中的内容到MANIFEST.MF中 今天终于把maven-bundle-plugin不能导出META-INF中的内容到Ex ...

  6. 构建基于Javascript的移动web CMS——模板

    在上一篇<构建基于Javascript的移动CMS--Hello,World>讲述了墨颀 CMS的大概组成,并进行了一个简单的演示样例,即Hello,World.这一次,我们将把CMS简单 ...

  7. 开发一个基于 Android系统车载智能APP

    很久之前就想做一个车载相关的app.需要实现如下功能: (1)每0.2秒更新一次当前车辆的最新速度值. (2)可控制性记录行驶里程. (3)不连接网络情况下获取当前车辆位置.如(北京市X区X路X号) ...

  8. 使用PowerApps快速构建基于主题的轻业务应用 —— 入门篇

    作者:陈希章 发表于 2017年12月12日 前言 在上一篇文章 基于Office 365的随需应变业务应用平台 中我提到,随着随需应变的业务需要,以及技术的发展,业务应用的开发的模式也有了深刻的变化 ...

  9. 构建基于阿里云OSS文件上传服务

    转载请注明来源:http://blog.csdn.net/loongshawn/article/details/50710132 <构建基于阿里云OSS文件上传服务> <构建基于OS ...

随机推荐

  1. .NET跨平台:再见dnx,你好dotnet cli

    昨天在github上dnx的一个issue中看到这样一段话: we're retiring dnx/dnu/dnvm toolchain and will move to dotnet CLI in ...

  2. [Hyper-V]使用操作系统模板创建新的虚拟机

    描述: 为了节省空间和时间的目的,先在Hyper-V里创建一个干净的操作系统,以后再创建虚拟机时都基于此操作系统,节省了安装Windows的时间 另外创建其它虚拟机的时候,也以上述虚拟机的磁盘为基础盘 ...

  3. [OpenCV] 1、读取图片

    >_<" 安装及配置请看http://www.cnblogs.com/zjutlitao/p/4042074.html >_<" 这篇是一个简单的在VS20 ...

  4. Spring声明式事务配置与使用

    1.配置: <context:component-scan base-package="com.vrvwh.wh01" /><bean id="data ...

  5. 为什么不能把委托(delegate)放在一个接口(interface)当中?

    stackoverflow上有人问,为什么不能把委托放在一个接口当中? 投票最多的第一个答案第一句话说,“A Delegate is just another type, so you don't g ...

  6. Nodejs学习笔记(十)--- 与MongoDB的交互(mongodb/node-mongodb-native)、MongoDB入门

    目录 简介 MongoDB安装(windows) MongoDB基本语法和操作入门(mongo.exe客户端操作) 库操作 插入 查询 修改 删除 存储过程 nodejs操作MongoDB 插入 查询 ...

  7. atitit.跨平台gui 概览

    atitit.跨平台gui 概览 为什么需要跨平台gui 国际上那些跨平台的GUI程序,除了像Firefox之类的大型项目会重写界面外,中小型的项目基本上都是用GTK+或WxWidgets为多.毕竟要 ...

  8. Atitit.auto complete 自动完成控件的实现总结

    Atitit.auto complete  自动完成控件的实现总结 1. 框架选型 1 2. 自动完成控件的ioc设置 1 3. Liger  自动完成控件问题 1 4. 官网上的code有问题,不能 ...

  9. MultiTouch————多点触控,伸缩图片,变换图片位置

    前言:当今的手机都支持多点触控功能(可以进行图片伸缩,变换位置),但是我们程序员要怎样结合硬件去实现这个功能呢? 跟随我一起,来学习这个功能 国际惯例:先上DEMO免费下载地址:http://down ...

  10. Maven学习总结(七)——eclipse中使用Maven创建Web项目

    一.创建Web项目 1.1 选择建立Maven Project 选择File -> New ->Project,如下图所示: