`
赵雅智
  • 浏览: 97517 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

使用mvvmlight for win8 让GridViewItem项 实现动态命令导航

 
阅读更多

前言：

该技术前提是 已经掌握一定程度的mvvmlight for win8 技巧

实现思路：

通过Messenger 机制 动态发送导航参数 到 需要导航的page 完成导航

导航参数：

[csharp] view plaincopyprint?
  1. public class NavigateParameter
  2. {
  3. private string pageType;
  5. public string PageType
  6. {
  7. get { return pageType; }
  8. set { pageType = value; }
  9. }
  11. private object parameter;
  13. public object Parameter
  14. {
  15. get { return parameter; }
  16. set { parameter = value; }
  17. }
  18. }


在 OnNavigated 到首页的地方 加入以下方法 注册 该处理通道

[csharp] view plaincopyprint?
  1. protected override void OnNavigatedTo(NavigationEventArgs e)
  2. {
  3. base.OnNavigatedTo(e);
  4. this.prContent.IsIndeterminate = true;
  5. this.ContentFrame.Navigate(typeof(MainPage));
  6. this.TopFrame.Navigate(typeof(VideosPage));
  8. #region Messengers 消息处理中心
  9. Messenger.Default.Register<NavigateParameter>(this, "MenuNavigate", async s =>
  10. {
  11. var type = await Task.Run<Type>(() =>
  12. {
  13. var fullName = "IntTourism.View." + s.PageType;
  14. return Type.GetType(fullName);
  15. });
  16. if (null != s.Parameter)
  17. await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.High, () =>
  18. this.ContentFrame.Navigate(type, s.Parameter));
  19. else
  20. await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.High, () =>
  21. this.ContentFrame.Navigate(type));
  22. });
  24. Messenger.Default.Register<NavigateParameter>(this, "TopFrameNavigate", async s =>
  25. {
  26. var type = await Task.Run<Type>(() =>
  27. {
  28. var fullName = "IntTourism.View." + s.PageType;
  29. return Type.GetType(fullName);
  30. });
  31. await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.High, () =>
  32. {
  33. if (!TopFrame.CurrentSourcePageType.Equals(type))
  34. if (null != s.Parameter)
  35. this.TopFrame.Navigate(type, s.Parameter);
  36. else
  37. this.TopFrame.Navigate(type);
  38. });
  39. });
  41. #endregion
  42. }


Unloaded 注销

[csharp] view plaincopyprint?
  1. private void LayoutAwarePage_Unloaded(object sender, RoutedEventArgs e)
  2. {
  3. Messenger.Default.Unregister<NavigateParameter>(this, "MenuNavigate");
  4. Messenger.Default.Unregister<LogBean>(this, "LogError");
  5. Messenger.Default.Unregister<LogBean>(this, "TopBusy");
  6. Messenger.Default.Unregister<LogBean>(this, "ContentBusy");
  7. Messenger.Default.Unregister<LogBean>(this, "TopFrame");
  8. this.btnCancel.PointerPressed -= SendError;
  9. this.btnSend.PointerPressed -= SendError;
  10. }

以下为xaml 里 gridview 菜单的binding方式

注意：ItemClick 此处通过eventTocommand 将事件与 viewmodel中相应的命令进行了binding处理 请结合我上一篇文章 对EventTocomand这一概念进行理解

[html] view plaincopyprint?
  1. <common:LayoutAwarePage x:Class="IntTourism.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:i="using:IntTourism.Com.Transvalue.Tools"
  7. xmlns:ignore="http://www.ignore.com"
  8. xmlns:common="using:IntTourism.Common"
  9. xmlns:cmd="using:IntTourism"
  10. mc:Ignorable="d ignore"
  11. d:DesignHeight="1080"
  12. d:DesignWidth="1080"
  13. DataContext="{Binding Main, Source={StaticResource Locator}}"
  14. NavigationCacheMode="Required">
  15. <Viewbox>
  16. <Grid Width="1080" Height="1080" x:Name="root">
  17. <GridView HorizontalAlignment="Left"
  18. VerticalAlignment="Top"
  19. Width="1080"
  20. Height="1080"
  21. CanDragItems="false"
  22. IsRightTapEnabled="False"
  23. ScrollViewer.HorizontalScrollBarVisibility="Hidden"
  24. IsSwipeEnabled="False"
  25. x:Name="gv"
  26. ItemsSource="{Binding MenuItems}"
  27. SelectionMode="None"
  28. >
  29. <GridView.Transitions>
  30. <TransitionCollection>
  31. <EntranceThemeTransition/>
  32. </TransitionCollection>
  33. </GridView.Transitions>
  34. <GridView.ItemContainerTransitions>
  35. <TransitionCollection>
  36. <EntranceThemeTransition/>
  37. </TransitionCollection>
  38. </GridView.ItemContainerTransitions>
  39. <GridView.HeaderTransitions>
  40. <TransitionCollection>
  41. <EntranceThemeTransition/>
  42. </TransitionCollection>
  43. </GridView.HeaderTransitions>
  44. <GridView.ItemTemplate>
  45. <DataTemplate>
  46. <GridViewItem>
  47. <Image Height="280" Width="280" Source="{Binding IconUrl}"/>
  48. <i:EventToCommandCollection.Items>
  49. <i:EventToCommand Command="{Binding MenuCMD}"
  50. CommandParameter="{Binding NavigateParameter}"
  51. NavigateUrl="{Binding NavigateUrl}"
  52. Event="ItemClick"/>
  53. </i:EventToCommandCollection.Items>
  54. </GridViewItem>
  55. </DataTemplate>
  56. </GridView.ItemTemplate>
  57. <GridView.ItemsPanel>
  58. <ItemsPanelTemplate>
  59. <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"
  60. ItemWidth="300" ItemHeight="300" MaximumRowsOrColumns="10"/>
  61. </ItemsPanelTemplate>
  62. </GridView.ItemsPanel>
  63. </GridView>
  64. </Grid>
  65. </Viewbox>
  67. </common:LayoutAwarePage>

下面这一段是ViewModel中对命令的处理，以及菜单的动态加载

[csharp] view plaincopyprint?
  1. using GalaSoft.MvvmLight;
  3. using IntTourism.Com.Transvalue.Service;
  4. using GalaSoft.MvvmLight.Command;
  5. using System.Diagnostics;
  6. using Windows.UI.Xaml.Controls;
  7. using System.Collections;
  8. using System.Collections.ObjectModel;
  9. using IntTourism.Com.Transvalue.Model;
  10. using GalaSoft.MvvmLight.Messaging;
  11. using System;
  12. using System.ComponentModel;
  13. using System.Collections.Generic;
  14. using IntTourism.Com.Transvalue.Bean;
  15. using IntTourism.Com.Transvalue.Tools;
  16. using IntTourism.Com.Transvalue.Const;
  17. using System.Threading.Tasks;
  19. namespace IntTourism.ViewModel
  20. {
  21. /// <summary>
  22. /// This class contains properties that the main View can data bind to.
  23. /// <para>
  24. /// See http://www.galasoft.ch/mvvm
  25. /// </para>
  26. /// </summary>
  27. public class MainViewModel : ViewModelBase
  28. {
  29. private readonly IMainPageSerivce _dataService;
  31. #region Command
  32. private RelayCommand<ExCommandParameter> _menuCMD;
  34. /// <summary>
  35. /// Gets the MenuCMD.
  36. /// </summary>
  37. public RelayCommand<ExCommandParameter> MenuCMD
  38. {
  39. get
  40. {
  41. return _menuCMD ?? (_menuCMD = new RelayCommand<ExCommandParameter>(
  42. ExecuteMenuCMD,
  43. CanExecuteMenuCMD));
  44. }
  45. }
  47. private async void ExecuteMenuCMD(ExCommandParameter url)
  48. {
  49. await Task.Run(() =>
  50. {
  51. var nav = new NavigateParameter();
  52. nav.Parameter = url.Parameter;
  53. nav.PageType = url.NavigateUrl;
  54. if (null != url.NavigateUrl)
  55. {
  56. Messenger.Default.Send<bool>(true, "ContentBusy");
  57. Messenger.Default.Send<NavigateParameter>(nav, "MenuNavigate");
  58. }
  59. });
  60. }
  62. private bool CanExecuteMenuCMD(ExCommandParameter url)
  63. {
  64. if (null != url && !"".Equals(url))
  65. return true;
  66. else return false;
  67. }
  68. #endregion
  70. #region DataProperties
  72. #region MenuItems
  73. /// <summary>
  74. /// The <see cref="MenuItems" /> property's name.
  75. /// </summary>
  76. public const string MenuItemsPropertyName = "MenuItems";
  78. private ObservableCollection<MenuItem> _menuItems;
  80. /// <summary>
  81. /// Sets and gets the MenuItems property.
  82. /// Changes to that property's value raise the PropertyChanged event.
  83. /// This property's value is broadcasted by the MessengerInstance when it changes.
  84. /// </summary>
  85. public ObservableCollection<MenuItem> MenuItems
  86. {
  87. get
  88. {
  89. return _menuItems;
  90. }
  92. set
  93. {
  94. if (_menuItems == value)
  95. {
  96. return;
  97. }
  99. RaisePropertyChanging(() => MenuItems);
  100. var oldValue = _menuItems;
  101. _menuItems = value;
  102. RaisePropertyChanged(() => MenuItems, oldValue, value, true);
  103. }
  104. }
  105. #endregion
  107. /// <summary>
  108. /// The <see cref="WelcomeTitle" /> property's name.
  109. /// </summary>
  110. public const string WelcomeTitlePropertyName = "WelcomeTitle";
  112. private string _welcomeTitle;
  114. /// <summary>
  115. /// Sets and gets the WelcomeTitle property.
  116. /// Changes to that property's value raise the PropertyChanged event.
  117. /// This property's value is broadcasted by the MessengerInstance when it changes.
  118. /// </summary>
  119. public string WelcomeTitle
  120. {
  121. get
  122. {
  123. return _welcomeTitle;
  124. }
  126. set
  127. {
  128. if (_welcomeTitle == value)
  129. {
  130. return;
  131. }
  133. RaisePropertyChanging(WelcomeTitlePropertyName);
  134. var oldValue = _welcomeTitle;
  135. _welcomeTitle = value;
  136. RaisePropertyChanged(WelcomeTitlePropertyName, oldValue, value, true);
  137. }
  138. }
  139. #endregion
  141. /// <summary>
  142. /// Initializes a new instance of the MainViewModel class.
  143. /// </summary>
  144. public MainViewModel(IMainPageSerivce dataService)
  145. {
  146. _dataService = dataService;
  147. InitPropertyChanged();
  148. _dataService.GetItemData(
  149. async (items, error) =>
  150. {
  151. if (await Pollute.ReportError(error, "GetItemData", ErrorDesc._E01))
  152. {
  153. Messenger.Default.Send<bool>(false, "ContentBusy");
  154. return;
  155. }
  156. var data = await items;
  157. foreach (var item in data)
  158. item.MenuCMD = MenuCMD;
  159. MenuItems = data;
  160. Messenger.Default.Send<bool>(false, "ContentBusy");
  161. });
  162. }
  165. #region PropertyChangeMethods
  167. /// <summary>
  168. /// 初始化相关方法
  169. /// </summary>
  170. private void InitPropertyChanged()
  171. {
  172. PropertyChanging += PropertyChangingMethod;
  173. PropertyChanged += PropertyChangedMethod;
  174. }
  176. //private static Dictionary<Predicate<string>, Action> PropertyChangingActions;
  177. //private static Dictionary<Predicate<string>, Action> PropertyChangedActions;
  178. private void PropertyChangedMethod(object sender, PropertyChangedEventArgs e)
  179. {
  182. }
  184. private void PropertyChangingMethod(object sender, PropertyChangingEventArgs e)
  185. {
  187. }
  188. #endregion
  191. public override void Cleanup()
  192. {
  193. // Clean up if needed
  194. base.Cleanup();
  195. }
  197. }
  198. }

菜单实例数据：

[csharp] view plaincopyprint?
  1. using System;
  2. using System.Collections.ObjectModel;
  3. using System.Threading.Tasks;
  4. using IntTourism.Com.Transvalue.Bean;
  5. using IntTourism.Com.Transvalue.Model;
  6. using IntTourism.Com.Transvalue.Service;
  8. namespace IntTourism.Com.Transvalue.Service.Impl
  9. {
  10. public class MainPageService : IMainPageSerivce
  11. {
  12. public void GetData(Action<DataItem, Exception> callback)
  13. {
  14. var item = new DataItem("Welcome to MVVM Light");
  15. callback(item, null);
  16. }
  19. public void GetItemData(Action<Task<ObservableCollection<MenuItem>>, Exception> callback)
  20. {
  21. var result = Task.Run(() =>
  22. {
  23. var items = new ObservableCollection<MenuItem>();
  24. var menu1 = new MenuItem();
  25. menu1.IconUrl = "../Assets/ICON/交通.png";
  26. menu1.NavigateUrl = "IntMaps";
  27. items.Add(menu1);
  28. var menu2 = new MenuItem();
  29. menu2.IconUrl = "../Assets/ICON/娱乐.png";
  30. menu2.NavigateUrl = "IntMaps";
  31. menu2.NavigateParameter = "Play";
  32. items.Add(menu2);
  33. var menu3 = new MenuItem();
  34. menu3.IconUrl = "../Assets/ICON/景点.png";
  35. menu3.NavigateUrl = "SceneViewGroup";
  36. items.Add(menu3);
  37. var menu4 = new MenuItem();
  38. menu4.IconUrl = "../Assets/ICON/购物.png";
  39. menu4.NavigateUrl = "IntMaps";
  40. menu4.NavigateParameter = "Buy";
  41. items.Add(menu4);
  42. var menu5 = new MenuItem();
  43. menu5.IconUrl = "../Assets/ICON/专题旅游.png";
  44. menu5.NavigateUrl = "SceneViewGroup";
  45. menu5.NavigateParameter = "Travel";
  46. items.Add(menu5);
  47. var menu6 = new MenuItem();
  48. menu6.IconUrl = "../Assets/ICON/实用信息.png";
  49. items.Add(menu6);
  50. var menu7 = new MenuItem();
  51. menu7.IconUrl = "../Assets/ICON/武汉之最.png";
  52. items.Add(menu7);
  53. var menu8 = new MenuItem();
  54. menu8.IconUrl = "../Assets/ICON/住宿.png";
  55. menu8.NavigateUrl = "IntMaps";
  56. menu8.NavigateParameter = "Rest";
  57. items.Add(menu8);
  58. var menu9 = new MenuItem();
  59. menu9.IconUrl = "../Assets/ICON/推荐线路.png";
  60. items.Add(menu9);
  61. //var menu10 = new MenuItem();
  62. //menu10.IconUrl = "../Assets/ICON/武汉介绍.png";
  63. //items.Add(menu10);
  64. var menu11 = new MenuItem();
  65. menu11.IconUrl = "../Assets/ICON/周边旅游.png";
  66. menu11.NavigateUrl = "IntMaps";
  67. menu11.NavigateParameter = "AllTravel";
  68. items.Add(menu11);
  69. var menu12 = new MenuItem();
  70. menu12.IconUrl = "../Assets/ICON/旅游动态.png";
  71. items.Add(menu12);
  72. var menu13 = new MenuItem();
  73. menu13.IconUrl = "../Assets/ICON/美图欣赏.png";
  74. items.Add(menu13);
  75. var menu14 = new MenuItem();
  76. menu14.IconUrl = "../Assets/ICON/天气预报.png";
  77. items.Add(menu14);
  78. var menu15 = new MenuItem();
  79. menu15.IconUrl = "../Assets/ICON/旅游咨询.png";
  80. items.Add(menu15);
  81. var menu16 = new MenuItem();
  82. menu16.IconUrl = "../Assets/ICON/美食.png";
  83. menu16.NavigateUrl = "IntMaps";
  84. menu16.NavigateParameter = "Eat";
  85. items.Add(menu16);
  86. return items;
  87. });
  88. callback(result, null);
  89. }
  90. }
  91. }


以上sample 数据 可以存入数据库中 进行动态配置，完成菜单的动态显示，降低了程序的耦合，增加了可配置性。

分享到：
| 手把手教你制作 Windows8 应用程序内部的 h ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics