×
Namespaces

Variants
Actions
Revision as of 13:55, 17 July 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

WP7简单页面导航架构

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata

兼容于
文章
翻译:
最后由 hamishwillee 在 17 Jul 2013 编辑

本文介绍了如何实现在Windows Phone 7应用程序的页面间轻松导航。

Contents

简介

这个示例应用程序用来演示如何在你的应用程序中轻松导航。随着你的应用程序的增长,你程序里页面数量也同样增长。在一段时间后,如果一个页面的名字有任何一点变化时,要去改变所有地方的引用将会变得非常乏味。所以,这里有一个简单的解决方案。

在我们创建一个简单应用程序时,将逐步介绍这种方法。

实现

步骤1:创建一个新项目,命名这个项目为“PhonePageNavigation”

CreatePage.jpg

步骤2:添加2个页面Page1和Page2到你的项目里。这些页面将在wp7中演示导航。

AddNewPages.JPG

步骤3:在你的解决方案里创建一个文件夹并命名为“Code”。在这个文件夹中添加一个新类,命名为“Navigation.cs”。

Navigation.JPG

步骤4:在同一个文件中添加一个“enum”清楚的声明每一个页面。你的文件结构会是这样(没有显示using语句以节省空间)

namespace PhonePageNavigation.Code
{
public enum ApplicationPages
{
MainPage,
Page1,
Page2,
}
 
public static class Navigation
{
}
}

步骤5:添加一个用于导航到一个页面的扩展方法。扩展是很有用的,在你的应用程序中所有页面控件都可以使用它。

public static void GoToPage(this PhoneApplicationPage phoneApplicationPage, ApplicationPages applicationPage)
{
switch (applicationPage)
{
case ApplicationPages.MainPage:
phoneApplicationPage.NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
break;
case ApplicationPages.Page1:
phoneApplicationPage.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));
break;
case ApplicationPages.Page2:
phoneApplicationPage.NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
break;
}
}

步骤6:在你的导航Uri(如果你想在你的Uri传递一些参数)中添加另外一个重载扩展来传参。

public static void GoToPage(this PhoneApplicationPage phoneApplicationPage, ApplicationPages applicationPage, string parameter)
{
switch (applicationPage)
{
case ApplicationPages.MainPage:
phoneApplicationPage.NavigationService.Navigate(new Uri("/MainPage.xaml?key=" + parameter, UriKind.Relative));
break;
case ApplicationPages.Page1:
phoneApplicationPage.NavigationService.Navigate(new Uri("/Page1.xaml?key=" + parameter, UriKind.Relative));
break;
case ApplicationPages.Page2:
phoneApplicationPage.NavigationService.Navigate(new Uri("/Page2.xaml?key=" + parameter, UriKind.Relative));
break;
}
}

步骤7:在你的主页上添加4个按钮来演示这些代码的功能。

MainPagePageNavigation.JPG

步骤8:添加这些代码到MainPage.xaml.cs来处理一些事件。

private void btnGotoPg1_Click(object sender, System.Windows.RoutedEventArgs e)
{
this.GoToPage(ApplicationPages.Page1);
}
 
private void btnGotoPg2_Click(object sender, System.Windows.RoutedEventArgs e)
{
this.GoToPage(ApplicationPages.Page2);
}
 
private void btnGotoPg1Param_Click(object sender, System.Windows.RoutedEventArgs e)
{
this.GoToPage(ApplicationPages.Page1, "Text from Page 1");
}
 
private void btnGotoPg2Param_Click(object sender, System.Windows.RoutedEventArgs e)
{
this.GoToPage(ApplicationPages.Page2, "Text from Page 1");
}

步骤9:在page.xaml.cs和page2.xaml.cs上添加这块代码来处理一些事件。

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
try
{
IDictionary<string, string> parameters = this.NavigationContext.QueryString;
if (parameters.ContainsKey("key"))
{
tbxSampleText.Text = parameters["key"];
}
}
catch(Exception)
{
 
}
}
 
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
if (NavigationService.CanGoBack)
NavigationService.GoBack();
}

运行示例

  1. 现在到vs2010在手机模拟器中运行这个程序。
  2. 在你的程序主页按第一个按钮“go to page1”,它将跳转到“page1”并显示默认的文本。同样当按下第二个按钮“go to page2”时“page2”会加载。
  3. 按下按钮3和4即“go to page1 uri”和“go to page2 uri”将加载从主页接收的文本并显示在“page1”和“page2”屏幕上。
  4. 按下各自页面上的“go back”按钮,将跳转到主页。

说明

基本上在步骤5和6,我们已经创建了两个在每个页面上可用的Extension Methods。这些扩展方法在每一页上可通过关键字访问。使用这些扩展方法,我们可以导航到任何页面。只要每一次在新页面添加到我们的项目时更新这些方法。

一个完整的示例附在下面的链接上 link

This page was last modified on 17 July 2013, at 13:55.
109 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×