在Silverlight中有时需要进入不同的XAML页面，但是一般情况下是不能实现“前进”和“后退”的，在这里我们可以使用Frame+Page控件制作导航功能实现上一页和下一页的跳转功能。

        在本文中我们制作一个实例如下：添加一个Frame控件，然后点击“加载UC”和“加载PageShow”按钮加载UC.xaml和 PageShow.xaml页面。在加载后我们可以通过鼠标右键菜单中的“上一页”和“下一页”按钮进入上下页，可以访问到历史页面。在UC页面中有一个 按钮，点击该按钮“测试按钮”即可进入PageDemo.xaml并且跟入参数，在该页面接收参数显示出来。

        首先我们在MainPage.xaml页面中添加一个Frame控件（注意引入System.Windows.Controls.Navigation.dll），并且设置UriMapping映射地址，其XAML地址如下：

1. <UserControl x:Class="SLna.MainPage" 
2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
6. xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit" 
7. xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
8. xmlns:uriMap="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation" 
9. mc:Ignorable="d" 
10. d:DesignHeight="500" d:DesignWidth="600"> 
11.  
12. <Grid x:Name="LayoutRoot" Background="White"> 
13. <!--设置一个Frame控件--> 
14. <navigation:Frame Height="402" HorizontalAlignment="Left" 
15. Name="frame1" VerticalAlignment="Top" Width="600" > 
16. <navigation:Frame.UriMapper> 
17. <uriMap:UriMapper> 
18. <!--设置一个UriMapping映射URL地址栏地址--> 
19. <uriMap:UriMapping Uri="/{addr}" MappedUri="/{addr}.xaml"/> 
20. </uriMap:UriMapper> 
21. </navigation:Frame.UriMapper> 
22. </navigation:Frame> 
23. <Button Content="加载UC" Height="30" HorizontalAlignment="Left" 
24. Margin="180,429,0,0" Name="button1" VerticalAlignment="Top" 
25. Width="117" Click="button1_Click" /> 
26. <Button Content="加载PageShow" Height="30" HorizontalAlignment="Left" 
27. Margin="318,429,0,0" Name="button2" VerticalAlignment="Top" 
28. Width="117" Click="button2_Click" /> 
29. <my:ContextMenuService.ContextMenu> 
30. <my:ContextMenu Name="mymenu"> 
31. <my:MenuItem Header="上一页" Click="MenuItem_Click"/> 
32. <my:Separator/> 
33. <my:MenuItem Header="下一页" Click="MenuItem_Click"/> 
34. <my:Separator/> 
35. <my:MenuItem Header="进入全屏" Click="MenuItem_Click"/> 
36. </my:ContextMenu> 
37. </my:ContextMenuService.ContextMenu> 
38.  
39. </Grid> 
40. </UserControl> 

        然后再MainPage.xaml.cs页面中判断Frame的CanGoForward和CanGoBack属性来决定是否可以上一页或者下一页跳转。

1. using System; 
2. using System.Collections.Generic; 
3. using System.Linq; 
4. using System.Net; 
5. using System.Windows; 
6. using System.Windows.Controls; 
7. using System.Windows.Documents; 
8. using System.Windows.Input; 
9. using System.Windows.Media; 
10. using System.Windows.Media.Animation; 
11. using System.Windows.Shapes; 
12.  
13. namespace SLna 
14. { 
15. public partial class MainPage : UserControl 
16. { 
17. public MainPage() 
18. { 
19. InitializeComponent(); 
20. } 
21. private void button1_Click(object sender, RoutedEventArgs e) 
22. { 
23. //本来应该写为以下语句，但是经过UriMapping跳转 
24. // this.frame1.Navigate(new Uri("/UC.xaml", UriKind.Relative)); 
25. //所以写为以下语句 
26. this.frame1.Navigate(new Uri("/UC", UriKind.Relative)); 
27. } 
28.  
29. private void button2_Click(object sender, RoutedEventArgs e) 
30. { 
31. this.frame1.Navigate(new Uri("/PageShow", UriKind.Relative)); 
32. } 
33.  
34. private void MenuItem_Click(object sender, RoutedEventArgs e) 
35. { 
36. MenuItem menuItem = (MenuItem)sender; 
37. switch (menuItem.Header.ToString()) 
38. { 
39. case "上一页": 
40. //CanGoBack是否可以后退 
41. if (this.frame1.CanGoBack == true) 
42. { 
43. //后退 
44. this.frame1.GoBack(); 
45. } 
46. break; 
47. case "下一页": 
48. //CanGoForward设置是否可以向前d 
49. if (this.frame1.CanGoForward == true) 
50. { 
51. //向前 
52. this.frame1.GoForward(); 
53. } 
54. break; 
55. case "进入全屏": 
56. menuItem.Header = FullScreens(menuItem.Header.ToString()); 
57. break; 
58. case "取消全屏": 
59. menuItem.Header = FullScreens(menuItem.Header.ToString()); 
60. break; 
61. default: 
62. break; 
63. } 
64. mymenu.IsOpen = false; 
65. } 
66. private string FullScreens(string IsScreen) 
67. { 
68. if (IsScreen == "进入全屏") 
69. { 
70. IsScreen = "取消全屏"; 
71. } 
72. else 
73. { 
74. IsScreen = "进入全屏"; 
75. } 
76. Application.Current.Host.Content.IsFullScreen = 
77. !Application.Current.Host.Content.IsFullScreen; 
78. return IsScreen; 
79. } 
80. } 
81. } 

        在UC.xaml.cs中是一个按钮，该按钮可以通过NavigationService.Navigate(new Uri("/PageDemo?Pid=3&Sid=15320", UriKind.Relative));跳转到PageDemo.xaml页面，并且跟入Pid和Sid参数：

1. public partial class UC : Page 
2. { 
3. public UC() 
4. { 
5. InitializeComponent(); 
6. } 
7.  
8. private void button1_Click(object sender, RoutedEventArgs e) 
9. { 
10. NavigationService.Navigate(new Uri("/PageDemo?Pid=3&Sid=15320", UriKind.Relative)); 
11. } 
12. } 

        在PageDemo.xaml.cs代码中是通过NavigationContext类显示UC.xaml页面传递过来的Pid和Sid值：

1. //重载当用户导航至此控件时，会调用如下方法 
2. protected override void OnNavigatedTo(NavigationEventArgs e) 
3. { 
4. // this.NavigationContext.QueryString.ContainsKey - 判断是否有某个参数 
5. // NavigationContext.QueryString["Pid"] - 获取某个参数的值 
6. LBText.Text += "导航地址：" + e.Uri.ToString() + "---"; 
7. if (this.NavigationContext.QueryString.ContainsKey("Pid")) 
8. LBText.Text += "参数PID：" + NavigationContext.QueryString["Pid"] + "---"; 
9. if (this.NavigationContext.QueryString.ContainsKey("Sid")) 
10. LBText.Text += "参数SID：" + NavigationContext.QueryString["Sid"]; 
11. } 

         下面我们来看看本Demo的实例效果如下，注意URL栏#/UC即跳转到UC.xaml页面，按“上一页”和“下一页”即可进入历史页面：

        在按上面的“测试按钮”时可以进入以下界面，并且传入参数Pid和Sid。

        在按上图的“加载PageShow”按钮时即可进入以下界面：

        本实例采用VS2010+Silverlight 4.0编写，如需源码请点击 SLna.rar 下载。

本文转自程兴亮 51CTO博客，原文链接:http://blog.51cto.com/chengxingliang/826430