Windows Phone7天初学(2):页面导航
PhoneApplicationPage代表了内容不同的页面,PhoneApplicationFrame是页面控件容器，是框架，一个应用程序只有一个框架Frame,是唯一的，不同的页面之间需要进行导航，导航以页面为基础进行导航的。
导航主要有XAML直接导航和后台代码导航方式。
一、XAML
直接导航方式
XAML
方式使用HyperLinkButton按钮，定义其的NavigateUri属性，如下：
NavigateUri="/MyPic/Shanghai.xaml"
二、后台
代码
导航
方式
代码方式，使用类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 x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="50" HorizontalAlignment="Left" Margin="39,47,0,0" Name="textBlock1" Text="
昆明旅游" VerticalAlignment="Top" Width="135" FontSize="32" />
<TextBlock FontSize="32" Height="50" HorizontalAlignment="Left" Margin="39,124,0,0" Name="textBlock3" Text="
桂林旅游" VerticalAlignment="Top" Width="135" />
<TextBlock FontSize="32" Height="50" HorizontalAlignment="Left" Margin="39,211,0,0" Name="textBlock2" Text="
北京旅游长城" VerticalAlignment="Top" Width="196" />
<HyperlinkButton Content="
查看" Height="50" HorizontalAlignment="Left" Margin="278,47,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="109" />
<Button Content="
查看" Height="76" HorizontalAlignment="Left" Margin="278,113,0,0" Name="button1" VerticalAlignment="Top" Width="109" />
<HyperlinkButton Content="
查看" Height="50" HorizontalAlignment="Left" Margin="278,212,0,0" Name="hyperlinkButton2" VerticalAlignment="Top" Width="109" />
<TextBlock FontSize="32" Height="50" HorizontalAlignment="Left" Margin="39,301,0,0" Name="textBlock4" Text="
海南旅游海边" VerticalAlignment="Top" Width="196" />
<Button Content="
查看" Height="76" HorizontalAlignment="Left" Margin="278,288,0,0" Name="button2" VerticalAlignment="Top" Width="109" />
</Grid>
（3）
在项目资源管理器，新建旅游目录旅游Lvyou，并添加对应四个竖屏Page，添加照片目录Photos，并拷进相应的示例照片。如图2-2：
图2-2
（4）
更改各导航页面的标题，并加进一旅游图片，如Kunming.xaml,效果如图2-3：
图2-3
XAML
代码为：
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="
我的相册" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="
长城" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Height="505" HorizontalAlignment="Left" Margin="32,34,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="361" Source="/WindowsPhoneApplication2-1;component/Photos/changchen.jpg" />
</Grid>
（5）回到主页面MainPage，“昆明旅游”使用
XAML
直接导航方式，就是定义
NavigateUri
属性，如下
：
<HyperlinkButton Content="
查看" Height="50" HorizontalAlignment="Left" Margin="278,47,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="109" NavigateUri="/lvyou/Kunming.xaml" />
（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