WP8学习笔记:如何在页面显示前自动转向到其他页面
在本次修练开始之前,我们除了预设的 MainPage页面外,也另外新增了一个 Login页面,如下图示:
MainPage.xaml页面长这样
Login.xaml页面长这样
因为我们的需求是要求使用者第一次使用 App时就先登入,所以我们必须在 MainPage显示之前就要强迫使用者导向到 Login页面。从我上一篇修练文章中可以看到我曾经用过 NavigationService来实作转向功能,如果你将转向的程式写在 Loaded事件 (如下程式码),那么使用者还是会先看到 MainPage的完整页面内容,然后才转向到 Login页面,虽然显示的时间非常短暂,只有 100 ~ 200ms而已,但使用者体验还是非常差,我们必须在页面显示前就转向到其他页面才行!
{
InitializeComponent(); this.Loaded += new System.Windows.RoutedEventHandler(MainPage_Loaded);
} void MainPage_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/Login.xaml", UriKind.Relative)); }
接着你一定会想说把程式码搬进 MainPage建构子不就好了?很抱歉!在 MainPage 建构子执行的这个时间点,NavigationService是无法使用的,如果你硬要这么做,就会出现以下错误:
我研究了一段时间后,其结论就是,这类「页面显示前就要转向」的需求不能在「页面层级」实现,必须到「应用程式」层级的地方来实现「显示前转向」需求,也就是在 App.xaml与 App.xaml.cs这个档案撰写一些程式码。
如果你曾经研究过 Silverlight的 Navigation框架,有可能会知道有个 UriMapper类别,可以用来做一些网址的路由对应,要在 WP7实现这样的功能,请参考以下设定步骤:
1.首先,我们先开起 App.xaml档案,并先新增一个 UriMapper命名空间
xmlns:UriMapper="clr-namespace:System.Windows.Navigation;assembly=Microsoft.Phone"
如下图示:
2.在应用程式资源的区段 ( )加入一个 UriMapper的定义,并且命名为 LoginPageMapper,而在其中唯一的一笔 UriMapper定义有两个属性需要设定,一个 Uri是属性,用来定义比对的网址;另一个是 MappedUri属性,用来定义当网址比对成功后应该转向到哪个网址。
3.虽然已经定义了一笔 UriMapper定义,并不代表 UriMapper的规则已经正式启用,这我们所建立的只是一个「应用程式资源」而已,所以还必须开启 App.xaml.cs并在 App()建构子最后加上以下程式:
1RootFrame.UriMapper =Resources["LoginPageMapper"] as UriMapper;
此时我们的 UriMapper就正式生效了,如果你按下 F5执行,就会发现首页 ( MainPage.xaml )事实上并没有被导向,而是网址被改写 (Rewrite)成 /Login.xaml了,但我们看起来却好像是被导向的感觉!
接下来就是如何灵活运用 UriMapper的时刻,你可以在 App()建构子透过程式码动态修改 MappedUri位址,好让页面能够转向 (虽然是改写网址,但我还是写转向比较容易理解 )到其他页面。
例如说以下程式码,我可以读取在隔离储存区的应用程式设定中是否已经设定过 Username这个键值,如果有的话我就视为此人已经登入过,并动态的把 MappedUri属性修改成 /MainPage.xaml这个位址:
请注意:若要使用 IsolatedStorageSettings类别必须引用 System.IO.IsolatedStorage命名空间才行喔!
1using System.IO.IsolatedStorage;
当然,你也可以定义多笔 UriMapper定义,来宣告其他页面的网址对应规则,或撰写更复杂的判断规则,如此一来整个 WP7 App的各种页面显示前转向的功能与判断逻辑就可以集中管理,也不失为一种好方法。
学习总结:
原来在 WP7的开发模式,要实作出「页面显示前就转向」也有这么些学问,果然跟我们一般在做网页开发时差异颇大。透过 UriMapper的操作技巧着实非常方便,如能更深入研究 Silverlight的巡览框架 (Navigation Framework)相信还能有其他的体悟。
本文来自xutingzhou的博客,原文地址:http://blog.csdn.net/xutingzhou/article/details/8437219