构建基于WinRT的WP8.1 App 01:页面导航及页面缓存模式

本篇博文主要阐述基于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函数保存页面状态。

参考文章

  1. 在页面之间导航 (XAML)
  2. 快速入门:在页面之间导航 (XAML)
  3. Building Apps for Windows Phone 8.1: (03) Page Navigation and Data Binding in Windows Runtime Apps

构建基于WinRT的WP8.1 App 01:页面导航及页面缓存模式

时间: 2024-10-06 00:41:12

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

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

基于WinRT的Windows Phone 8.1以及Windows 8.1中Xaml数据绑定增加了一些新特性. FallBackValue属性:FallBackValue在绑定的值属性值不存在时,可以指定一个代替的属性和值显示. 1: <TextBlock Text="{Binding Path=badPath, 2: FallbackValue='this is a fallback value'}" 3: Grid.Column="1"> <

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

摘要:wp8.1与wp8中很多API是不一样了,wp8.1把以前wp7.x时的api去掉了,更多与win8.1的API相似.比如以下的页面导航和页面之间的值传递 1.页面导航 利用Frame.Navigate() 方法,C#语句如下: 1 Frame.Navigate(typeof(Page2));//Page2为一个页面的名称 这里需要注意的是此方法是可以重载的,即后面介绍的页面间值传递方法. 2.页面间值传递 这里利用Frame.Navigate()重载方法,进行单个值传递和多个值传递 1)

构建基于Javascript的移动web CMS——Hello,World

在一篇构建基于Javascript的移动web CMS入门--简介中简单的介绍了关于墨颀CMS的一些原理,其极框架组成,于是开始接着应该说明一下这个CMS是如何一步步搭建起来. RequireJS 使用 库及依赖 这里用的是bower的JS来下载库,详细可以参考一下bower install js使用bower管理js 这篇文章. 需要下载的库有 RequireJS Backbone Underscore Mustache jQuery 使用RequireJS 引用官网的示例 <!DOCTYPE

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

在上一篇<构建基于Javascript的移动CMS--Hello,World>讲述了墨颀 CMS的大概组成,并进行了一个简单的演示样例,即Hello,World.这一次,我们将把CMS简单的放到一个能够执行的服务器环境中,也就是说我们须要一个简单的执行环境,以便于进行更有意思的东西--加入?模板. 開始之前 环境准备 类Unix系统 由于电脑上已经装有python了,这里便用python起一个简单的server,对于GNU/Linux.Mac OS等类unix系统来说,都能够这样执行: pyt

构建基于Javascript的移动web CMS——加载JSON文件

在上一篇中说到了如何创建一个Django Tastypie API给移动CMS用,接着我们似乎也应该有一个本地的配置文件用于一些简单的配置,如"获取API的URL"."产品列表"."SEO"(在一开始的时候发现这是不好的,后面又发现Google的爬虫可以运行Javascript,不过也是不推荐的.)这些东西是不太需要修改的,直接写在代码中似乎又不好,于是放到了一个叫作configure.json的文件里. RequireJS Plugins 网上

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

maven-bundle-plugin 2.4.0以下版本导出META-INF中的内容到MANIFEST.MF中 今天终于把maven-bundle-plugin不能导出META-INF中的内容到Export-Package中的问题解决了,因为产品用的是OSGI框架,用到的第三方JAR包需要加载META-INF/XX/XX.xml这个内容,但在运行的时候getResource返回null. 经一番调查发现META-XX.XX这个包名没有导出,手动去修改MANIFEST.MF可以解决问题.但产品的

构建基于Javascript的移动CMS——添加滑动

在和几个有兴趣做移动CMS的小伙伴讨论了一番之后,我们觉得当前比较重要的便是统一一下RESTful API.然而最近持续断网中,又遭遇了一次停电,暂停了对API的思考.在周末无聊的时光了看了<人间失格>,又看了会<一个人流浪,不必去远方>.开始思考所谓的技术以外的事情,或许这将是下一篇讨论的话题. 正在我对这个移动CMS的功能一筹莫展的时候,帮小伙伴在做一个图片滑动的时候,便想着将这个功能加进去,很顺利地找到了一个库. 移动CMS滑动 我们所需要的两个功能很简单 当用户向右滑动的时

构建基于Javascript的移动CMS——生成博客(二).路由

在有了上部分的基础之后,我们就可以生成一个博客的内容--BlogPosts Detail.这样就完成了我们这个移动CMS的几乎主要的功能了,有了上节想必对于我们来说要获取一个文章已经不是一件难的事情了. 获取每篇博客 于是我们照猫画虎地写了一个BlogDetail.js define([ 'jquery', 'underscore', 'mustache', 'text!/blog_details.html' ],function($, _, Mustache, blogDetailsTempl

css013 构建基于浮动的布局

css013 构建基于浮动的布局 基于浮动的布局时利用float属性是网页上的元素并排,并创建列 float有三个值:left .right .none 1.假设要把一张图片浮动到网页的左侧 .float-left{ float:eft; } 假如要把一个装满内容的<div>浮动到一边,形成一个侧边栏 .sidebar{ float:left; width:150px; } 2.设计一个简单的两列布局需要的几个步骤 a. 把每列都包在一个带有ID或class属性的<div>标签里面