Windows Phone 7 - 页面导航

阿酷 发布于 2011/12/29 17:29
阅读 500
收藏 0

用于Windows Phone 的SilverLight 提供了 PhoneApplicationFrame 和PhoneApplicationPage类,这两个类是微软针对Silverlight for Windows Phone另外封装的,它为导航提供了使得。

PhoneApplicationPage 控件代表了内容相互分离的区段,一个应用程序可以有多个PhoneApplicationPage 。

PhoneApplicationFrame扮演了页面控件容器的角色,对页面之间的导航提供了便利,一个应用程序有一个独立的PhoneApplicationFrame。

Windows Phone 7是通过 使用URI【通用资源标志符(Uniform Resouce Identifier)】映射进行页面导航的。下面通过 DEMO 来了解一下Windows Phone 7的各种导航的写法吧。

第一种通过使用NavigationService 进行导航控制,如下代码:

NavigationService.Navigate(new Uri("/Layout/SecondPage.xaml", UriKind.Relative));
UriKind 是一个枚举类型,自带有三种类型,这里我们使用相对路径。

第二种通过直接使用控件自带功能,即使用微软的HyperLink控件,直接导航,代码如下:
<HyperlinkButton Content="点转" NavigateUri="/Layout/SecondPage.xaml" Height="30" HorizontalAlignment="Left" Margin="101,68,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" />
第三种我们可以为我们的URI路径起一个别名,然后在调用时调用别名即可,可以方便我们管理,使用步骤如下:

a).在App.xaml的文件上注册Windows.Navigation命名空间,该空间位于Reference目录下的Microsoft.Phone组件,代码如下:
xmlns:nav="clr-namespace:System.Windows.Navigation;assembly=Microsoft.Phone"
b).为应用程序添加资源,代码如下:
<Application.Resources>
<nav:UriMapper x:Key="UriMapper">
<nav:UriMapping Uri="SecondPage" MappedUri="/Layout/SecondPage.xaml"/>

</nav:UriMapper>
</Application.Resources>
c).添加完成后,进入 App.xaml.cs 在它的构造函数里面为应用程序的RootFrame下所在的UriMapper赋值,这用的话我们应用程序就可以通过它去映射我们传给它的URI 别名。代码如下:
this.RootFrame.UriMapper = Resources["UriMapper"] as UriMapper;
Tip:这里的Resources 是一个字典型数据,键值必须跟上面App.xaml 添加资源的UriMapper Key要相对应。

d).注册好别名之后,我们就可以在程序中如下使用:
NavigationService.Navigate(new Uri("SecondPage",UriKind.Relative)); 
或者在HyperLinkButton 中如下使用:
<HyperlinkButton Content="点转" NavigateUri="SecondPage" Height="30" HorizontalAlignment="Left" Margin="101,68,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" />
好了,说完如何通过URI导航到指定Page 页面,下面来尝试一下如何通过URI导航传递数据吧。

做过Asp.Net 的童鞋相信对地址栏传值不陌生,比如我现在在博客园写文章的路径如下:



后面的“?”跟着的就是相关的参数或者要表达的某些请求,这种写法很好,又直接。做过WEB的又好理解,不过庆幸的是微软把这个非常棒的功能加入到Windows phone 7的页面传递中来,这真是一大另人兴奋的事,怎么样呢?就这样用:
NavigationService.Navigate(new Uri("/Layout/SecondPage.xaml opt=1", UriKind.Relative));
或者
<HyperlinkButton Content="点转" NavigateUri="/Layout/SecondPage.xaml opt=1" Height="30" HorizontalAlignment="Left" Margin="101,68,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" />
简单明了,不带一丝拖拉看来WEB开发人员进入Windows Phone 7开发也可以哟。。。呵呵~!!

我们刚才的缩写也是同样直接这种URI带参数的写法的,同样还是来到App.xaml页面,写法如下:
<Application.Resources>
<nav:UriMapper x:Key="UriMapper">
<nav:UriMapping Uri="SecondPage" MappedUri="/Layout/SecondPage.xaml"/>
<nav:UriMapping Uri="SecondPage/{content}" MappedUri="/Layout/SecondPage.xaml name={content}"/>
</nav:UriMapper>
</Application.Resources>
这里要注意三点:
  • SecondPage/{content}与后面name={content}这两个content一定要相同
  • content
    不可以写数字0,写数字0会报运行时错误。可以为数字1,但不可以为其他数字。为“1”时编译器解析正常,但为其他数字时虽不会报运行时错误,但编译器解 析出错,不能够正确解析传进来的参数,会直接打印比如SecondPage/{111}在另外的页面就直接打印{111}。
  • MappedUri 后面“?”的查询字段区分大小写。
    添加资源完成后,在页面使用如下方法即可调用缩写并传参数:
    NavigationService.Navigate(new Uri("SecondPage/terry",UriKind.Relative));
    试试效果吧,在页面中的按钮点击然后跳转到第二页,看会不会显示“terry”,如图:



    获取参数跟Asp.net 差不多,见下方代码:
    if (NavigationContext.QueryString.Count>0)
    {
    UriTextBox.Text = NavigationContext.QueryString["name"].ToString();
    }
    Windows Phone 7 的NavigationContext.QueryString是不支持传递对象的,那么如果我们现在有个对象需要传递该如何实现呢?看了Jake Lin 老师的视频后才知道可以在App里面定义一个对象属性,然后这个属性就可以提供全局访问。是不是我可以理解成这个属性其实也可以放在一个公用的静态类上 呢?呵呵,下面看如何实现吧。

    步骤一:

    声明一个对象名为Model写下如何函数:
    public class Model
    {
    public string name { get; set; }
    public string file { get; set; }
    }
    然后在App.xaml.cs 里面将Model 声明为一个公用的静态属性:
    public static Class.Model MyAppModel { get; set; }
    余下的功夫就是为其赋值和取值的操作了,点击跳往下一页的按钮时,为App.Model 赋值。在第二页时取出App.Model的值,代码编写见下方:
    private void button1_Click(object sender, RoutedEventArgs e)
    {
    App.MyAppModel= new Class.Model { name="terry",file="my"};
    NavigationService.Navigate(new Uri("SecondPage/terry",UriKind.Relative));
    }
    第二页Loaded完毕后:
    private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
    {
    if (NavigationContext.QueryString.Count>0)
    {
    UriTextBox.Text = NavigationContext.QueryString["name"].ToString();
    }
    Class.Model model = App.MyAppModel;
    
    Debug.WriteLine(model.name+"===>>>"+model.file);
    }
    见输出日志信息:



    我们还可以通过别名传参的方法,动态的指定页面跳转,先看看界面:



    页面上有三个单选按钮,然后工程中对应有三个页面:



    选择后,点击按钮将会通过下标动态跳转到不同的页面,代码编写看下方。

    首先,App.xaml的资源添加:
    <Application.Resources>
    <nav:UriMapper x:Key="UriMapper">
    <nav:UriMapping Uri="SecondPage" MappedUri="/Layout/SecondPage.xaml"/>
    <nav:UriMapping Uri="SecondPage/{content}" MappedUri="/Layout/SecondPage.xaml name={content}"/>
    <nav:UriMapping Uri="page/{number}" MappedUri="/Layout/Page{number}.xaml"/>
    </nav:UriMapper>
    </Application.Resources>
    然后,在主页上声明一个全局索引,接着编写如下代码,即可完成:
    private void firstRb_Checked(object sender, RoutedEventArgs e)
    {
    index = 1;
    }
    
    private void secondRb_Checked(object sender, RoutedEventArgs e)
    {
    index = 2;
    }
    
    private void threeRb_Checked(object sender, RoutedEventArgs e)
    {
    index = 3;
    }
    
    private void chooseButton_Click(object sender, RoutedEventArgs e)
    {
    NavigationService.Navigate(new Uri("page/"+index,UriKind.Relative));
    }
    页面导航和数据传递的课程学习完毕到这里先,如果你觉得对你有帮助,别忘了推荐一下,谢谢。

    ------点击发布,才记起忘了发源码:导航DEMO
加载中
返回顶部
顶部