Silverlight实用窍门系列：39.Silverlight中使用Frame和Page控件制作导航【附带实例源码】...

        在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 下载。