Windows Phone7天初学(2):页面导航

时间 2020-01-19

标签 windows phone7 phone 初学页面导航栏目 Windows 繁體版

原文原文链接

PhoneApplicationPage表明了内容不一样的页面,PhoneApplicationFrame是页面控件容器，是框架，一个应用程序只有一个框架Frame,是惟一的，不一样的页面之间须要进行导航，导航以页面为基础进行导航的。

导航主要有XAML直接导航和后台代码导航方式。

1、XAML 直接导航方式

XAML 方式使用HyperLinkButton按钮，定义其的NavigateUri属性，以下：

NavigateUri="/MyPic/Shanghai.xaml"

2、后台代码导航方式

代码方式，使用类NavigationService,以下

NavigationService.Navigate(new Uri(" /MyPic/Shanghai.xaml ", UriKind.Relative));

实际开发中，为避免使用一串的长地址，特别是网站有多层结构时，为简化、方便使用导航网址，使用别名导航：

<Application.Resources>

<daohang:UriMapper x:Key="MyMapper">

<daohang:UriMapping Uri="MyPage" MappedUri="/MyPic/MyPage.xaml"/>

</ daohang:UriMapper>

</Application.Resources>

别名使用：

NavigateUri=" MyPage "

或

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

当需传递参数时，导航相应的表示为：

（1） XAML 直接导航：

NavigateUri="/MyPic/Shanghai.xaml ？city=1"

(2) 后台代码导航：

NavigationService.Navigate(new Uri(" /MyPic/Shanghai.xaml?city=1 ", UriKind.Relative));

(3) 使用别名地址导航。

<daohang:UriMapping Uri="MyPage/{MyCity}" MappedUri="/MyPic/MyPage.xaml?city={MyCity}"/>

案例2-1:个人相册：My Photos

建立一个针对Windows Phone导航的应用，完成一个个人相册“My Photos”应用程序。

(1) 启动Visual Studio 2010，建立“Windows Phone Application”。

(2) 设计程序界面，效果如图2-1所示：

图2-1

XAML主要代码以下：

</Grid>

（3）在项目资源管理器，新建旅游目录旅游Lvyou，并添加对应四个竖屏Page，添加照片目录Photos，并拷进相应的示例照片。如图2-2：

图2-2

（4）更改各导航页面的标题，并加进一旅游图片，如Kunming.xaml,效果如图2-3：

图2-3

XAML代码为：

</StackPanel>

</Grid>

（5）回到主页面 MainPage，“昆明旅游”使用 XAML 直接导航方式，就是定义 NavigateUri属性，以下：

（6）“桂林旅游”使用后台代码方式导航。在MainPage设计视图中，双击“桂林旅游”对应的“查看”按扭，定义事件处理程序，实现导航，代码以下：

private void button1_Click(object sender, RoutedEventArgs e)

{

NavigationService.Navigate(new Uri ("/lvyou/guilin.xaml",UriKind.Relative ));

}

（7）“北京旅游”使用别名地址导航。首先在App.xmal中新增命名空间的支持，以下：

xmlns:mm="clr-namespace:System.Windows.Navigation;assembly=Microsoft.Phone"

在资源块中添加定义Uri映射关系

<Application.Resources>

<navig:UriMapper x:Key="LvyouMapper" >

<navig:UriMapping Uri="beijing" MappedUri="/Lvyou/Changchen.xaml"></navig:UriMapping>

</navig:UriMapper>

</Application.Resources>

在App.xaml.cs定义的映射资源数据放入应用程序框架RootFrame 的UriMapper对象中，代码以下：

this.RootFrame.UriMapper = Resources["LvyouMapper"] as UriMapper;

回到MainPage.xaml中，现只需定义别名便可实现导航，在“北京旅游”对应的“查看”控件，定义NavigateUri属性为相应的别名，形式以下：

NavigateUri="beijing"

如用后台代码方式，可表示为：

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

(8) “海南旅游”导航带参数方式，在对应单击事件处理程序中，定义带参数，以下：

private void button2_Click(object sender, RoutedEventArgs e)

{

NavigationService.Navigate(new Uri("/lvyou/Haikou.xaml?photo= 海边风景", UriKind.Relative));

}

（9）打开Haikou.xaml定义Loaded事件，读取参数处理程序以下：

if (NavigationContext.QueryString.Count > 0) //如带参数，则处理

{

this.PageTitle.Text = NavigationContext.QueryString["photo"] ;

}

（10）运行后，显示首页，效果以下：

图2-4

可查看相应旅游照片,如单击北京旅游长城边的“查看”，显示对应的效果，如图2-5：

图2-5

查看“海南旅游”，传递参数后，更改标题为“海边风景”，效果如图2-6：

图2-6