`
foo
  • 浏览: 25076 次
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

页面导航与参数传递

阅读更多

在学习过程中,大致的总结一些页面导航与参数传递的知识。

通常我们的应用程序是由多个应用页面构成的,于是就有一个十分重要的行为——页面间的切换。在这里成为页面间的导航。我们需要注意的问题是:怎么实现切换和怎么传递参数。
我们要了解的信息是:

  • 每个页面都有一个独立的URI;
  • 每一个页面都是无状态的,也就是每次加载完页面后,需要重新加载这个页面中所必须的所有参数和数据;
  • 每个页面可以像Web一样,通过链接地址的方式导航。

显而易见,我们实现页面切换的必要数据就是每一个页面的URI,这和我们Web中的Uri的书写是相仿的,我们一样可以通过“?id=‘’”的形式来传递参数。

我们创建一个项目,叫做“NavigationPractice”,添加一个页面叫做“MyPage.xaml”,这是主页面MainPage需要导航到的页面。

四种页面切换的方式 

使用HyperlinkButton来实现

这也是HyperlinkButton的一个重要的应用方式,通过指定HyperlinkButton的NavigateUri属性,实现导航,具体实现:

            <HyperlinkButton Content="点击跳转" Height="30" 
                             HorizontalAlignment="Left" Margin="28,41,0,0" 
                             Name="myHyperlinkButton" VerticalAlignment="Top" 
                             Width="200" NavigateUri="/MyPage.xaml"/>

 

在代码中进行导航

通过页面的NavigationService来实现,NavigationService在这里是页面PhoneApplicationPage的一个属性,取主机用于导航到此页的服务,实际是返回一个NavigationService类型的值,相当于是实例化一个NavigationService的对象。同理,用于接收参数的NavigationContext也是PhoneApplicationPage的一个属性,获取包含有关导航请求的信息的对象,实际上是返回一个NavigationContext类型的属性值,相当于是创建了一 个NavigationContext 的实例。

具体实现:定义一个按钮,给按钮添加Click事件,以实现导航。

 this.NavigationService.Navigate(new Uri("/MyPage.xaml", UriKind.Relative));

 

返回操作

就是当在一个页面中操作完成后,返回到前一个页面中进行操作。

方法一:

使用代码:NavigationService.GoBack()。

方法二:

使用返回键实现返回操作。

补充:禁用返回按键的返回操作。给当前页面添加BackKeyPress事件,使用e.Cancel=true;的方式来禁用返回按键。

 

别名导肮

即定义系统资源,使用别名来实现导航。WP7页面导航可以使用路径别名,是从Silverlight继承来的。使用的方法涉及到资源的定义。方法如下:
首先,在App.xaml的文件中添加Windows.Navigation 命名空间:mlns:navigate="clr-namespace:System.Windows.Navigation;assembly=Microsoft.Phone"。
其次,书写资源代码:

<Application.Resources>
<navigate:UriMapper x:Key="UriMapper">
<navigate:UriMapping Uri="MyNewPage" MappedUri="/MyPage.xaml"/>
</navigate:UriMapper>
</Application.Resources>

最后,给Frame添加UriMapper :this.RootFrame.UriMapper = Resources["UriMapper"] as UriMapper;即将这句代码写到App类的构造函数中。

在使用的时候,就像之前的应用一般,只是在路径名中直接书写路径别名就行了。

NavigationService.Navigate(new Uri("NewPage", UriKind.Relative));

 

 

五种页面间参数传递的方法

直接在Uri中添加

类似于web中的参数的传递方法,在Uri中使用”?id=‘’&name=‘’“的方式添加需要传递的参数。当然这不会局限于后台代码或者是HyperlinkButton的NavigateUri属性中,如:

            this.NavigationService.Navigate(new Uri("/MyPage.xaml?flag=test",UriKind.Relative));

或:

 <HyperlinkButton Content="点击跳转" Height="30" 
                             HorizontalAlignment="Left" Margin="28,41,0,0" 
                             Name="myHyperlinkButton" VerticalAlignment="Top" 
                             Width="200" NavigateUri="/MyPage.xaml?flag=test"/>

 

使用路径别名中传递参数

在资源的定义中,我们可以定义这样的资源:

<Application.Resources>
<navigate:UriMapper x:Key="UriMapper">
<navigate:UriMapping Uri="NewPage/{param}" MappedUri="/MyPage.xaml?ID={param}"/>
</navigate:UriMapper>
</Application.Resources>

这样通过定义之后,在使用的时候new Uri("NewPage/10", UriKind.Relative));就行了,在实际使用中,如果我们在定义资源Uri的时候,使用的名称和将要转到的页面的名称一致的话,会出现以下三种效果功能相同的使用方式:

/NewPage.xaml?ID=10

NewPage?ID=10

NewPage/ID=10

对于以上两种传递参数的方式,在接受的时候,使用NavigationContext。具体方法:

 if (NavigationContext.QueryString.Keys.Contains("flag"))
            {
                NavigationContext.QueryString.TryGetValue("flag", out flag);
                myTextBlock1.Text=flag;
            }

为了很好的使用参数,避免异常等情况发生,在获取数据的时候最好先判断参数是不是存在。

 

配合独立存储传递参数

在导航的时候,配合独立存储,将需要传递的参数保存在独立存储中,由于一般传递的参数不会很大,笔者觉得使用IsolatedStorageSetting就行了。如在传递的时候:

        private void btnNavigate5_Click(object sender, RoutedEventArgs e)
        {
            IsolatedStorageSettings iss = IsolatedStorageSettings.ApplicationSettings;
            iss["ID2"] = 10;
            NavigationService.Navigate(new Uri("NewPage", UriKind.Relative));
        }

而在接受的时候:

            IsolatedStorageSettings iss = IsolatedStorageSettings.ApplicationSettings;
            if (iss.Contains("ID2"))
            {
               this.myTextBlock1.Text=iss["ID2"].ToString();
            }

这样也算是很方便的实现了数据的传递。

 

PhoneApplicationService传递参数

这个类提供对应用程序生存期各个方面的访问。这包括对应用程序空闲行为的管理以及当应用程序变为活动或不活动时对应用程序状态的管理。在这里主要是用到了它的state属性,获取用于调用之间传递应用程序状态的词典,用来存储数据。方法:

在将要跳转的页面中重写方法OnNavigatedFrom,将需要传递的参数保存在State中:

        PhoneApplicationService myService = PhoneApplicationService.Current;

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            myService.State["name"] = "sky";
            base.OnNavigatedFrom(e);
        }

在将要跳转到的页面中重写方法OnNavigatedTo,从State中读取字典数据:

        PhoneApplicationService myService = PhoneApplicationService.Current;
        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            object name;
            if (myService.State.ContainsKey("name"))
            {
                if (myService.State.TryGetValue("name", out name))
                {
                    this.myTextBlock3.Text = name.ToString();
                }
            }
            base.OnNavigatedTo(e);
        }

 

共享数据传递参数

 

另一种常用的页面间共享数据的方法是使用公共资源App.xaml。在其后台代码中加入相应属性,即可使用。这种方法最经常用来传递对象,可以采用的办法是创建两个页面都可以访问到的静态对象。
具体实现:
public string Name{set;get;}
public string Number{set;get;}
在使用的时候:
(Application.Current as App).Name
(Application.Current as App).Number

如定义属性MyName,把需要传递的参数保存在共享数据中:

        private void myTextBox_TextChanged(object sender, TextChangedEventArgs e)
        {
            (Application.Current as App).MyName = this.myTextBox.Text.ToString();
        }

取得数据:

            if ((Application.Current as App).MyName != "")
            {
                this.myTextBlock2.Text = (Application.Current as App).MyName;
            }

 

以上的各种方法,在我们的项目中最这样的布局,其实就是简单地实现:

实现结果为:

项目地址:http://files.cnblogs.com/waitingsky/NavigationPractice.rar

分享到:
评论

相关推荐

    wpf相互调用传递参数

    wpf编译生成的exe文件在其他文件调用时传递参数的实现方式

    JetpackNavigation 导航组件 ④ ( Fragment 跳转中使用 safe args 安全传递参数 )

    4、重新编译生成参数传递相关代码 5、调用 FragmentBArgs 类生成参数 Bundle 6、FragmentA 中获取参数 三、两种传参方式的完整代码示例 1、Gradle 构建脚本 I、根目录下 settings.gradle 构建脚本 II、根目录下 ...

    WPF 实现导航通过Frame的Navigate函数实现导航

    打开即可演示,功能简洁明了,适合初学者 Frame的NavigationUIVisibility属性设置为Hidden:

    Flutter学习笔记(三)——页面导航及传参

    页面间导航 页面间传参 页面返回时传参 页面间导航 跳转到另一个页面及返回 首先,定义主页面。 编写第一个界面FirstScreen。 界面上有一个button,点击会跳转到第二个界面。跳转后第一个页面不会消失,相当于把第...

    使用vue-router在Vue页面之间传递数据的方法

    几周前,我写了关于 Vue 路由的使用和在 Vue 页面导航的文章。这是在应用程序中探索的一个基本例子。 通常,在将导航构建到应用程序中时,您会发现需要将数据从一个页面传递到另一个页面。(不通顺)例如,您遵循 ...

    标签(Tabs)实现多页面切换

    用js实现的多页面切换功能,应用到ajax,动态加载所需要的页面及所传递参数,有滚动条,很好的东西哦 因为用到ajax,需要在server下才能看到正常加载状态

    Xalami:一种启动Xamarin Forms项目的好方法

    导航服务,其中包装Xamarin表单NavigationPage,支持参数传递以及按View类型或ViewModel类型进行导航。 几个有用的XAML标记扩展 ItemsStack控件 和更多! 平台类 Xalami支持:iOS,Android和UWP。 Xalami入门 在...

    TSDQQ网址导航系统带后台带特制版 v2017.01.20.rar

    TSDQQ网址导航系统带后台带手机版前台页面 TSDQQ网址导航系统带后台带手机版后台管理 后台路径:域名/tsdqq 用户:wwwtsdqqnet 密码:www.tsdqq.org 后台页面 相关阅读 同类推荐:搜索/网址导航源码

    JS 参数传递的实际应用代码分析

    在项目中,有一个Ajax加载的区域,是一个Div标签,id为msg_box,这个控制链接包含在一个左侧的导航中,当从其他页面链接到这个页面时,该JS代码就失效了。

    java自动分页程序

    通常的处理方法比较烦,特别是需要在页面中传递查询参数的表单,比较繁烦,当对记录进行操作时,往往要临时转到其它处理页面,然后再返回浏览页面,这时往往要预先保留大量表单的参数,以便返回时重新查询,更为繁烦...

    灵迅企业网站系统 v1.1.rar

    主要功能: 基本设置:站点常规属性设置。 导航管理:添加/删除导航菜单,隐藏与显示。 ...重写了产品展示页面中的参数传递,现在不用传参也可以直接打开产品展示页面,默认情况下显示全部产品。

    XPAGER分页标记 v2.0

    通常的处理方法比较烦,特别是需要在页面中传递查询参数的表单,比较繁烦,当对记录进行操作时,往往要临时转到其它处理页面,然后再返回浏览页面,这时往往要预先保留大量表单的参数,以便返回时重新查询,更为繁烦...

    在vue中实现简单页面逆传值的方法

     在 ios 开发中,页面跳转 A -&gt; B -&gt; C,到 C 页面后,内存中一直存储着 A 和 B 页面的数据和状态,通过导航堆栈遍历数组可以拿到之前的页面进行修改赋值等,另外还有代理,block传值等操作。   vue是一个单页...

    Vue 页面状态保持页面间数据传输的一种方法(推荐)

    vue router给我们提供了两种页面间传递参数的方式,一种是动态路由匹配,一种是编程式导航,接下来通过本文给大家介绍Vue 页面状态保持页面间数据传输的一种方法,需要的朋友可以参考下

    alfnavigator:单页应用程序导航器

    航海家 单页应用程序的导航器,在实现中提供最大的自由。 页面导航必须在“contentRegister”中注册,它将 url 中使用的导航名称... contentView 将其 el 添加到作为参数传递的内容容器中。 导航器提供了创建 content

    XPage一个非常方便的 fragment 页面框架

    支持 Fragment 页面间参数传递。 支持 Fragment 页面属性保存。 支持 Fragment 页面的 onKeyDown、onFragmentResult 等生命周期 支持 Fragment 和 Fragment 页面自由跳转以及数据交互。 支持导航栏通过注解的方式...

    TSDQQ网址导航系统带后台 v2.161014 UTF-8版.zip

    2016年10月14日修改 ...TSDQQ网址导航系统前台页面: TSDQQ网址导航系统后台管理  后台地址:tsdqq 用户:wwwtsdqqnet 密码:www.tsdqq.org 后台页面:   相关阅读 同类推荐:网址导航源码

    路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。

    在页面导航之间提供更快的加载时间 行为更像传统的桌面应用程序 在本课程中,您将学习有关 Vue 路由器的所有信息,以创建快速原型或 ımpressive、成熟的 Vue.js SPA。 在本课程结束时,您将掌握 如何构建新的 Vue...

Global site tag (gtag.js) - Google Analytics