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

2016-08-20 11:06:56来源:http://wanxl.blog.51cto.com/2129901/567695作者:wanxl人点击


<?xml:namespace prefix = o /> PhoneApplicationPage代表了内容不同的页面,PhoneApplicationFrame是页面控件容器,是框架,一个应用程序只有一个框架Frame,是唯一的,不同的页面之间需要进行导航,导航以页面为基础进行导航的。

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

一、XAML直接导航方式<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
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所示:
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />

图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

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台