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

posted @ 2011-05-05 10:08  程兴亮  阅读(4791)  评论(18编辑  收藏