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地址如下:


 
 
  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. public partial class MainPage : UserControl 
  15. public MainPage() 
  16. InitializeComponent(); 
  17. private void button1_Click(object sender, RoutedEventArgs e) 
  18. //本来应该写为以下语句,但是经过UriMapping跳转 
  19. // this.frame1.Navigate(new Uri("/UC.xaml", UriKind.Relative)); 
  20. //所以写为以下语句 
  21. this.frame1.Navigate(new Uri("/UC", UriKind.Relative)); 
  22.  
  23. private void button2_Click(object sender, RoutedEventArgs e) 
  24. this.frame1.Navigate(new Uri("/PageShow", UriKind.Relative)); 
  25.  
  26. private void MenuItem_Click(object sender, RoutedEventArgs e) 
  27. MenuItem menuItem = (MenuItem)sender; 
  28. switch (menuItem.Header.ToString()) 
  29. case "上一页"
  30. //CanGoBack是否可以后退 
  31. if (this.frame1.CanGoBack == true
  32. //后退 
  33. this.frame1.GoBack(); 
  34. break; 
  35. case "下一页"
  36. //CanGoForward设置是否可以向前d 
  37. if (this.frame1.CanGoForward == true
  38. //向前 
  39. this.frame1.GoForward(); 
  40. break; 
  41. case "进入全屏"
  42. menuItem.Header = FullScreens(menuItem.Header.ToString()); 
  43. break; 
  44. case "取消全屏"
  45. menuItem.Header = FullScreens(menuItem.Header.ToString()); 
  46. break; 
  47. default
  48. break; 
  49. mymenu.IsOpen = false
  50. private string FullScreens(string IsScreen) 
  51. if (IsScreen == "进入全屏"
  52. IsScreen = "取消全屏"
  53. else 
  54. IsScreen = "进入全屏"
  55. Application.Current.Host.Content.IsFullScreen = 
  56. !Application.Current.Host.Content.IsFullScreen; 
  57. return IsScreen; 

        在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. public UC() 
  3. InitializeComponent(); 
  4.  
  5. private void button1_Click(object sender, RoutedEventArgs e) 
  6. NavigationService.Navigate(new Uri("/PageDemo?Pid=3&Sid=15320", UriKind.Relative)); 

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


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

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

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

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

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



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

相关文章
Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象
原文:Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象 原创文章,如需转载,请注明出处。   最近在一直研究Silverlight下的数据绑定控件,发现有这样两个接口IEditableObject 和IEditableCollectionView,记录一下结论,欢迎交流指正。
869 0
|
前端开发 C#
silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发) 这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来。 1.新建一个usercontrol,命名为menu. 2.按照下图设置一下属性。
1244 0

热门文章

最新文章