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

时间: 2016-04-11

Silverlight实用窍门系列:39.Silverlight中使用Frame和Page控件制作导航【附带实例源码】的相关文章

Silverlight实用窍门系列:48.DataGrid行详细信息的绑定--DataGrid.RowDetailsTemplate【附带实例源码】

在Silverlight中的DataGrid控件使用中我们想点击其中一行并且看这一行的详细信息应该如何做呢?而且这个详细信息是多行的数据,而非简单的几个属性. 在这里我们使用DataGrid.RowDetailsTemplate来设置或者获取行详细信息.首先我们准备一个DataGrid命名为A,设置其RowDetailsVisibilityMode="VisibleWhenSelected" (行详细信息模板的显示模式是当这行被选中的时候展开这行的详细信息.)然后再为A设置DataGr

Silverlight实用窍门系列:40.Silverlight中捕捉视频,截图保存到本地【附带实例源码】

在Silverlight中我们可以捕捉视频设备以制作视频会议系统,或者通过视频设备截图功能上传头像等功能. 下面我们通过一个简单的实例来访问视频设备,并且截取图像下载该截图文件至本地. 一.在Silverlight运行界面中我们检查系统默认摄像头和麦克风是否可用如下图: 二.我们看Xaml代码如下所示: <Grid x:Name="LayoutRoot" Background="White"> <Border BorderBrush="S

Silverlight实用窍门系列:37.Silverlight和ASP.NET相互传参的两种常用方式(QueryString,Cookie)【附带实例源码】

在本节中将讲述Silverlight和ASP.NET页面的相互传参的两种常用方式:Cookie和QueryString.首先我们新建一个名为SLConnectASP.NET的Silverlight应用程序,然后在SLConnectASP.NET.web项目中添加一个Index.aspx的页面. 一.Silverlight和ASPX页面的QueryString传参 实现思路:在Silverlight端跳转到页面到Index.aspx并且传递一个QueryString参数ID,在该Index.asp

C/S模式开发中如何利用WebBrowser控件制作导航窗体

原文:C/S模式开发中如何利用WebBrowser控件制作导航窗体 转自: CSDN 相信不少同学们都做过MIS系统的开发,今天这里不讨论B/S模式开发的问题.来谈谈winform开发.用过市面上常见进销存系统的同学肯定知道,在进入系统之后一般在mdi窗体中系统自动打开一个导航子窗体.将一些常见的功能以非常直观的图形展示给用户.观察市面上的此类产品,该功能基本是所有mdi窗体开发的管理系统中必备的功能窗体.下面我们就来分析一下如何在.net中实现这个功能.幸好我上次做了一个类似的系统,里面也用到

Silverlight实用窍门系列:49.Silverlight中管理独立存储--Isolated Storage【附带实例源码】

Silverlight中的独立存储是其内部的可信任的可访问文件空间,在这里你可以使用Silverlight随意的创建.读取.写入.删除目录和文件,它有一些类似于Cookie,但是它可以在客户端保存大量的数据.这个空间默认是1M,如果不够的时候可以申请扩大容量. 网站+用户+应用程序定位一个独立存储,也就是说必须得相同网站,相同用户,相同应用程序才能够访问这个独立的存储空间.独立存储是IsolatedStorageFile密封类来进行设置的,这个类分布在命名空间System.IO.Isolated

Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别

 问题一:在某一些情况下,我们使用MVVM模式的时候,对于某一个字段(AgeField)需要在前台的很多个控件(A.B.C.D.E)进行绑定,但是如何能够让我们后台字段名改变的时候能够非常方便的改变所有使用了这个字段的控件呢?         回答:使用Element to Element Binding,将AgeFiled绑定到A控件,然后再让B.C.D.E控件绑定A控件的使用AgeField字段的属性.         例如:字段(AgeField)的数据是年龄大小,A.B.C.D.E控件分

Silverlight实用窍门系列:44.Silverlight 4.0中进行单元测试 【附带源码实例】

在Silvelight 4.0的项目中我们也需要制作单元测试以保证项目的质量,本节将讲诉如何创建一个项目进行单元测试. 一.创建一个名为SL4UnitAPP的Silverlight 应用程序,不需要Web承载网站. 二.然后鼠标右键点击SL4UnitAPP解决方案,添加一个名为SL4UnitTest的Silverlight Unit Test Application. 三.在平时VS2010 创建项目时无法添加一个Silverlight Unit Test Application,所以我们需要将

Silverlight实用窍门系列:36.Silverlight中播放视频和打印文档【附带源码实例】

在silverlight实际项目中时常会需要播放视频和打印文档,在本节中我们将制作一个最简单的播放视频和打印文档的实例. 一.播放WMV视频 首先我们创建一个Silverlight应用程序SLShowVideo,然后放一个示例Wmv视频在SLShowVideo.web项目的根目录下面. 然后我们在Xaml文档中放入一个MediaElement控件,并写入以下代码: <MediaElement Height="377" HorizontalAlignment="Left&

Silverlight实用窍门系列:41.Silverlight中调用麦克风模拟录音机设备,存储为WAV音频【附带实例源码】

   在Silverlight 4中支持了麦克风设置的调用,在本节中我们将调用麦克风设备,然后进行录音,并且将录制的声音存取为Wav音频文件.         第一步.首先我们从AudioSink类派生一个音频接收器类:WavAudioSink.其代码如下所示: public class WavAudioSink:AudioSink { // 设置需要记录的内存流 private MemoryStream _stream; // 设置当前的音频格式 private AudioFormat _fo