Winphone开发之页面导航

在两个XAML之间可以实现导航跳转的，在导航过程中可以携带数据。

下面介绍一种简单的跳转方法，是使用Uri进行跳转，其中注意的是数据信息是可以携带在Uri里面的。比如我要跳转到根目录下面的Page1.xaml，携带一个String类型数据“hello”，用data进行标示，那么Uri的组装可以如下：

/Page1.xaml?data=hello

如果有多个数据进行携带，那么使用&进行分割，比如/Page1.xaml?data=hello&name=Sirius

注意的是这种方法标示是不能相同的，比如不能有两个data的标示。在另外一个页面重载OnNavigatedTo进行数据的接收

下面是例子：

页面1的XAML：

<phone:PhoneApplicationPage
    x:Class="QYTASK.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <TextBox Name="Tb" HorizontalAlignment="Left" VerticalAlignment="Top" Height="85" TextWrapping="Wrap" Text="TextBox"  Width="186" Margin="157,261,0,0"/>
        <Button Content="Button" HorizontalAlignment="Left" Margin="188,395,0,0" VerticalAlignment="Top" Click="Button_Click"/>
    </Grid>

</phone:PhoneApplicationPage>

页面1的code behind：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using QYTASK.Resources;
using System.Diagnostics;

namespace QYTASK
{
    public partial class MainPage : PhoneApplicationPage
    {
        // 构造函数
        public MainPage()
        {
            InitializeComponent();

        }

        private void TextBlock_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
        {
            Debug.WriteLine("touch!");
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            String uri = "/Page1.xaml?data=" + Tb.Text;
            NavigationService.Navigate(new Uri(uri, UriKind.Relative));

        }

    }
}

页面2（也就是待跳转页面）的XAML：

<phone:PhoneApplicationPage
    x:Class="QYTASK.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel 包含应用程序的名称和页标题-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">

            <TextBlock Name="Title" Text="页面名称" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - 在此处放置其他内容-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

页面2的code behind：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace QYTASK
{
    public partial class Page1 : PhoneApplicationPage
    {
        public Page1()
        {
            InitializeComponent();
        }
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            String text = this.NavigationContext.QueryString["data"];
            Title.Text = text;
        }
    }
}

这样就可以实现在页面1的文本框内输入文字，按下按钮跳转到页面2，页面2显示出页面1的输入文字的效果了。

这里加上一个小的知识点，当按照上面的方法跳转之后按back键会返回页面1，那是因为这样做页面是一个栈的结构，如果要屏蔽掉back键，使得返回键返回无效的话，可以这样写代码：

在构造函数里面

// 构造函数
        public MainPage()
        {
            InitializeComponent();
            this.BackKeyPress += (sender, e) =>
                {
                    e.Cancel = true;
                };

        }

注意这样做要慎重，因为有可能使得应用程序无法退出。

上面说过，页面之间是一种栈的关系，如果跳转到页面2的时候（页面2还没有加到栈）把栈顶元素去掉，那么页面2按back键就不会跳转到页面1了。

下面是代码，修改一下page1的一个函数而已。

protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            if (this.NavigationService.CanGoBack)
            {
                this.NavigationService.RemoveBackEntry();
            }

            String text = this.NavigationContext.QueryString["data"];
            Title.Text = text;
        }