×
Namespaces

Variants
Actions
Revision as of 13:48, 3 December 2012 by renlin (Talk | contribs)

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

兼容于
文章
WS_YiLunLuo 在 31 May 2012 创建
最后由 renlin 在 03 Dec 2012 编辑

本文翻译自 Simpler Page Navigation Framework for WP7

本文介绍了如何实现在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

122 page views in the last 30 days.
×