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: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(); 

case "進入全屏": 

menuItem.Header = FullScreens(menuItem.Header.ToString()); 

case "取消全屏": 

default: 

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() 

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頁面，按“上一頁”和“下一頁”即可進入曆史頁面：

<a target="_blank" href="http://blog.51cto.com/attachment/201204/220051391.jpg"></a>

        在按上面的“測試按鈕”時可以進入以下界面，并且傳入參數Pid和Sid。

<a target="_blank" href="http://blog.51cto.com/attachment/201204/220032508.jpg"></a>

        在按上圖的“加載PageShow”按鈕時即可進入以下界面：

<a target="_blank" href="http://blog.51cto.com/attachment/201204/220012149.jpg"></a>

本文轉自程興亮 51CTO部落格，原文連結:http://blog.51cto.com/chengxingliang/826430