如何在 Windows Phone 中执行页面导航

2012/2/9

本主题将向您演示如何在应用程序的不同页面内容之间进行前后导航。

注意注意:

以下过程中的步骤用于 Visual Studio 2010 Express for Windows Phone。 当您使用用于 Visual Studio 2010 Professional 或 Visual Studio 2010 Ultimate 的插件时,您可能会看到菜单命令或窗口布局中的一些微小改变。  本主题基于 C# 开发;但也提供 Visual Basic 代码。 

在本节中,将创建您可以从应用程序主页导航到的其他内容页面。

创建其他页面

  1. 通过选择“文件|新项目”菜单命令创建一个新项目。

  2. 将显示“新建项目”窗口。展开“Visual C#”模板,然后选择“Silverlight for Windows Phone”模板。

  3. 选择“Windows Phone 应用程序”模板。填写所需的项目名称。

  4. MainPage.xaml 的设计器视图中,选择“页面标题”,然后在“文本”属性中或直接在 XAML 中将该标题文本更改为“mail page”

    AP_Con_mainpage
  5. “解决方案资源管理器”中右键单击您的项目名称,从菜单中选择“添加”,然后选择“新建项”

  6. 选择“Windows Phone 纵向页面”,并将名称更改为“SecondPage”,然后选择页面底部的“添加”

  7. SecondPage.xaml 的设计器视图中,选择“页面标题”,然后在“文本”属性中或直接在 XAML 中将该标题文本更改为“second page”

本节将向您演示如何在 MainPage.xamlSecondPage.xaml 之间进行前后导航。

在页面之间导航

  1. MainPage.xaml 中,将“工具箱”中的 HyperlinkButton 控件拖动到设计器界面。选择该控件并将“内容”属性更改为“Navigate to Second Page”,或者直接在 XAML 中进行更改。您可能需要扩展控件宽度才能看到所有文本。

  2. 双击超链接按键以便添加超链接点击事件的事件处理程序。将打开 MainPage.xaml.cs 文件。

  3. hyperlinkButton1_Click 事件处理程序添加以下代码:

    private void hyperlinkButton1_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
            }
    
    注意注意:

    您还可以在 MainPage.xaml 中,通过将超链接控件的“NavigateUri”属性设置为第二页来完成上述操作。例如:

    NavigateUri = “/SecondPage.xaml”

  4. SecondPage.xaml 中,将 Button 控件拖动到设计器界面。选择该控件并将“内容”属性更改为“Navigate Back to Main Page”,或者直接在 XAML 中进行更改。您可能需要扩展控件宽度才能看到所有文本。

  5. 双击按键以便添加按键点击事件的事件处理程序。将打开 SecondPage.xaml.cs 文件。

  6. button1_Click 事件处理程序添加以下代码:

    
      private void button1_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.GoBack();
            }
    
  7. 通过选择“调试 | 启动调试”菜单命令运行该应用程序。这将打开模拟器窗口并启动该应用程序。

在运行应用程序时,您会看到应用程序包含两个页面:main page 和 second page。您可以使用包含已在其事件处理程序中配置的目标 URI 的超链接来从 main page 导航到 second page。通过使用导航服务的 GoBack() 方法,您可以从 second page 返回 main page。

注意注意:

尽管本示例中使用了 GoBack() 方法,硬件“返回”按钮也有返回到上一页的作用。

AP_Con_mainnav

AP_Con_secnav

在本节中,将从一个页面获取文本,并将文本添加到另一个页面的文本块控件。将使用上一个项目完成下面的过程。

在页面之间传递字符串数据

  1. MainPage.xaml 中,将“工具箱”中的 TextBox 控件和 Button 控件拖动到设计器界面,并且将控件并列放置。清除控件属性内的 TextBox 控件的已有文本。对于 Button 控件,将控件重新命名为 passParam,并在控件属性中或直接在 XAML 中将按钮文本更改为“Go”

  2. 双击 Go 按键以便添加按键点击事件的事件处理程序。将打开 MainPage.xaml.cs 文件。

  3. passParam_Click 事件处理程序添加以下代码:

    
        private void passParam_Click(object sender, RoutedEventArgs e)
            {
                
                NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" + textBox1.Text, UriKind.Relative));
            }
    
    注意注意:

    本行代码将用于导航到第二页内容,并传递在新建的 TextBox 中输入的字符串数据。

  4. SecondPage.xaml 中,将“工具箱”中的 TextBlock 控件拖动到设计器界面。清除控件属性内的 TextBlock 控件的已有文本。为了方便查看,可能需要扩展控件的高度和宽度并选择更大的字体大小。另外,对于本示例,将已创建的 TextBlock 命名为“textBlock1”

  5. SecondPage.xaml.cs 中,创建以下方法:

       protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
    
                string msg = "";
                
                if (NavigationContext.QueryString.TryGetValue("msg", out msg))
    
                    textBlock1.Text = msg;
    
               
            }
    
  6. 通过选择“调试 | 启动调试”菜单命令运行该应用程序。这将打开模拟器窗口并启动该应用程序。

    main page 中,在 TextBox 控件中输入一些文本,然后点按“Go”。当到达 second page 时,您键入的文本将显示在 second pageTextBlock 控件中。

    AP_Con_mainpasstxt

    AP_Con_secondpasstxt

显示: