在Silverlight中有时需要进入不同的XAML页面，但是一般情况下是不能实现“前进”和“后退”的，在这里我们可以使用Frame+Page控件制作导航功能实现上一页和下一页的跳转功能。
在本文中我们制作一个实例如下：添加一个Frame控件，然后点击“加载UC”和“加载PageShow”按钮加载UC.xaml和 PageShow.xaml页面。在加载后我们可以通过鼠标右键菜单中的“上一页”和“下一页”按钮进入上下页，可以访问到历史页面。在UC页面中有一个 按钮，点击该按钮“测试按钮”即可进入PageDemo.xaml并且跟入参数，在该页面接收参数显示出来。
首先我们在MainPage.xaml页面中添加一个Frame控件（注意引入System.Windows.Controls.Navigation.dll），并且设置UriMapping映射地址，其XAML地址如下：
- <UserControl x:Class="SLna.MainPage"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"
- xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
- xmlns:uriMap="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
- mc:Ignorable="d"
- d:DesignHeight="500" d:DesignWidth="600">
- <Grid x:Name="LayoutRoot" Background="White">
- <!--设置一个Frame控件-->
- <navigation:Frame Height="402" HorizontalAlignment="Left"
- Name="frame1" VerticalAlignment="Top" Width="600" >
- <navigation:Frame.UriMapper>
- <uriMap:UriMapper>
- <!--设置一个UriMapping映射URL地址栏地址-->
- <uriMap:UriMapping Uri="/{addr}" MappedUri="/{addr}.xaml"/>
- </uriMap:UriMapper>
- </navigation:Frame.UriMapper>
- </navigation:Frame>
- <Button Content="加载UC" Height="30" HorizontalAlignment="Left"
- Margin="180,429,0,0" Name="button1" VerticalAlignment="Top"
- Width="117" Click="button1_Click" />
- <Button Content="加载PageShow" Height="30" HorizontalAlignment="Left"
- Margin="318,429,0,0" Name="button2" VerticalAlignment="Top"
- Width="117" Click="button2_Click" />
- <my:ContextMenuService.ContextMenu>
- <my:ContextMenu Name="mymenu">
- <my:MenuItem Header="上一页" Click="MenuItem_Click"/>
- <my:Separator/>
- <my:MenuItem Header="下一页" Click="MenuItem_Click"/>
- <my:Separator/>
- <my:MenuItem Header="进入全屏" Click="MenuItem_Click"/>
- </my:ContextMenu>
- </my:ContextMenuService.ContextMenu>
- </Grid>
- </UserControl>
然后再MainPage.xaml.cs页面中判断Frame的CanGoForward和CanGoBack属性来决定是否可以上一页或者下一页跳转。
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Net;
- using System.Windows;
- using System.Windows.Controls;
- using System.Windows.Documents;
- using System.Windows.Input;
- using System.Windows.Media;
- using System.Windows.Media.Animation;
- using System.Windows.Shapes;
- namespace SLna
- {
- public partial class MainPage : UserControl
- {
- public MainPage()
- {
- InitializeComponent();
- }
- private void button1_Click(object sender, RoutedEventArgs e)
- {
- //本来应该写为以下语句，但是经过UriMapping跳转
- // this.frame1.Navigate(new Uri("/UC.xaml", UriKind.Relative));
- //所以写为以下语句
- this.frame1.Navigate(new Uri("/UC", UriKind.Relative));
- }
- private void button2_Click(object sender, RoutedEventArgs e)
- {
- this.frame1.Navigate(new Uri("/PageShow", UriKind.Relative));
- }
- private void MenuItem_Click(object sender, RoutedEventArgs e)
- {
- MenuItem menuItem = (MenuItem)sender;
- switch (menuItem.Header.ToString())
- {
- case "上一页":
- //CanGoBack是否可以后退
- if (this.frame1.CanGoBack == true)
- {
- //后退
- this.frame1.GoBack();
- }
- break;
- case "下一页":
- //CanGoForward设置是否可以向前d
- if (this.frame1.CanGoForward == true)
- {
- //向前
- this.frame1.GoForward();
- }
- break;
- case "进入全屏":
- menuItem.Header = FullScreens(menuItem.Header.ToString());
- break;
- case "取消全屏":
- menuItem.Header = FullScreens(menuItem.Header.ToString());
- break;
- default:
- break;
- }
- mymenu.IsOpen = false;
- }
- private string FullScreens(string IsScreen)
- {
- if (IsScreen == "进入全屏")
- {
- IsScreen = "取消全屏";
- }
- else
- {
- IsScreen = "进入全屏";
- }
- Application.Current.Host.Content.IsFullScreen =
- !Application.Current.Host.Content.IsFullScreen;
- return IsScreen;
- }
- }
- }
在UC.xaml.cs中是一个按钮，该按钮可以通过NavigationService.Navigate(new Uri("/PageDemo?Pid=3&Sid=15320", UriKind.Relative));跳转到PageDemo.xaml页面，并且跟入Pid和Sid参数：
- public partial class UC : Page
- {
- public UC()
- {
- InitializeComponent();
- }
- private void button1_Click(object sender, RoutedEventArgs e)
- {
- NavigationService.Navigate(new Uri("/PageDemo?Pid=3&Sid=15320", UriKind.Relative));
- }
- }
在PageDemo.xaml.cs代码中是通过NavigationContext类显示UC.xaml页面传递过来的Pid和Sid值：
- //重载当用户导航至此控件时，会调用如下方法
- protected override void OnNavigatedTo(NavigationEventArgs e)
- {
- // this.NavigationContext.QueryString.ContainsKey - 判断是否有某个参数
- // NavigationContext.QueryString["Pid"] - 获取某个参数的值
- LBText.Text += "导航地址：" + e.Uri.ToString() + "---";
- if (this.NavigationContext.QueryString.ContainsKey("Pid"))
- LBText.Text += "参数PID：" + NavigationContext.QueryString["Pid"] + "---";
- if (this.NavigationContext.QueryString.ContainsKey("Sid"))
- LBText.Text += "参数SID：" + NavigationContext.QueryString["Sid"];
- }
下面我们来看看本Demo的实例效果如下，注意URL栏#/UC即跳转到UC.xaml页面，按“上一页”和“下一页”即可进入历史页面：
在按上面的“测试按钮”时可以进入以下界面，并且传入参数Pid和Sid。
在按上图的“加载PageShow”按钮时即可进入以下界面：
本实例采用VS2010+Silverlight 4.0编写，如需源码请点击 SLna.rar 下载。
本文转自程兴亮 51CTO博客，原文链接:http://blog.51cto.com/chengxingliang/826430
