Windows Phone 7 不温不火学习之《页面导航》

用于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