在WP开发中点击列表项跳转到详情页是一个很常用的功能，但是有可能项模板中还有其他的区域，比如点击标题跳转到详情页，点击"赞"图标送一个赞，点击"踩"图标踩一下，那如何处理同一个项的不同点击区域呢？
在WP7时代我是这么做的，先在cs代码中处理点击事件，然后判断sender是项模板里的哪个控件，根据不同控件来做不同的处理。感觉弱爆了！
后来使用了MVVM-Sidekick之后，实现这种目的变得方便多了！（韦恩卑鄙快给广告费！）
我会在以下的Demo里演示这种高大上的用法。
首先新建一个WP8.1的MVVM-Sidekick项目，我手头没有Win10的开发机，建Win10的也一样。
1.建立Model
在项目中添加Models文件夹，添加一个UserInfoItem类，继承于BindableBase<UserInfoItem>，代码如下：
public class UserInfoItem : BindableBase<UserInfoItem> { public string UserName { get { return _UserNameLocator(this).Value; } set { _UserNameLocator(this).SetValueAndTryNotify(value); } } #region Property string UserName Setup protected Property<string> _UserName = new Property<string> { LocatorFunc = _UserNameLocator }; static Func<BindableBase, ValueContainer<string>> _UserNameLocator = RegisterContainerLocator<string>("UserName", model => model.Initialize("UserName", ref model._UserName, ref _UserNameLocator, _UserNameDefaultValueFactory)); static Func<string> _UserNameDefaultValueFactory = () => { return default(string); }; #endregion public int Age { get { return _AgeLocator(this).Value; } set { _AgeLocator(this).SetValueAndTryNotify(value); } } #region Property int Age Setup protected Property<int> _Age = new Property<int> { LocatorFunc = _AgeLocator }; static Func<BindableBase, ValueContainer<int>> _AgeLocator = RegisterContainerLocator<int>("Age", model => model.Initialize("Age", ref model._Age, ref _AgeLocator, _AgeDefaultValueFactory)); static Func<int> _AgeDefaultValueFactory = () => { return default(int); }; #endregion }
之前已经说过了，使用propvm代码段可以快速生成以上的属性。
2.初始化数据源
打开MainPage_Model.cs文件，使用propvm代码段添加一个ObservableCollection列表：
public ObservableCollection<UserInfoItem> UserInfoItemList { get { return _UserInfoItemListLocator(this).Value; } set { _UserInfoItemListLocator(this).SetValueAndTryNotify(value); } } #region Property ObservableCollection<UserInfoItem> UserInfoItemList Setup protected Property<ObservableCollection<UserInfoItem>> _UserInfoItemList = new Property<ObservableCollection<UserInfoItem>> { LocatorFunc = _UserInfoItemListLocator }; static Func<BindableBase, ValueContainer<ObservableCollection<UserInfoItem>>> _UserInfoItemListLocator = RegisterContainerLocator<ObservableCollection<UserInfoItem>>("UserInfoItemList", model => model.Initialize("UserInfoItemList", ref model._UserInfoItemList, ref _UserInfoItemListLocator, _UserInfoItemListDefaultValueFactory)); static Func<ObservableCollection<UserInfoItem>> _UserInfoItemListDefaultValueFactory = () => { return new ObservableCollection<UserInfoItem>(); }; #endregion
注意在_UserInfoItemListDefaultValueFactory里我改成了返回了一个new出来的ObservableCollection<UserInfoItem>，避免直接使用时因没有初始化而报错。这一步也可以放在MainPage_Model的构造函数里。
然后找到下面被注释掉的OnBindedViewLoad方法，初始化数据源：
///<summary> /// This will be invoked by view when the view fires Load event and this viewmodel instance is already in view's ViewModel property ///</summary> ///<param name="view">View that firing Load event</param> ///<returns>Task awaiter</returns> protected override Task OnBindedViewLoad(MVVMSidekick.Views.IView view) { if (!UserInfoItemList.Any()) { UserInfoItemList.Add(new UserInfoItem { UserName = "Jack", Age = 20 }); UserInfoItemList.Add(new UserInfoItem { UserName = "Tom", Age = 21 }); UserInfoItemList.Add(new UserInfoItem { UserName = "Lily", Age = 18 }); UserInfoItemList.Add(new UserInfoItem { UserName = "Jim", Age = 20 }); UserInfoItemList.Add(new UserInfoItem { UserName = "Bob", Age = 22 }); } return base.OnBindedViewLoad(view); }
随便写上几个就好。
3.绑定数据
为了方便使用Blend，还需要增加设计视图支持。把以上初始化数据的代码，加到MainPage_Model的构造函数里，放在if (IsInDesignMode )里面：
public MainPage_Model() { if (IsInDesignMode ) { Title = "Title is a little different in Design mode"; UserInfoItemList.Add(new UserInfoItem { UserName = "Jack", Age = 20 }); UserInfoItemList.Add(new UserInfoItem { UserName = "Tom", Age = 21 }); UserInfoItemList.Add(new UserInfoItem { UserName = "Lily", Age = 18 }); UserInfoItemList.Add(new UserInfoItem { UserName = "Jim", Age = 20 }); UserInfoItemList.Add(new UserInfoItem { UserName = "Bob", Age = 22 }); } }
然后编译一下，用Blend打开。
在MainPage中添加一个ListView，绑定ItemsSource属性：
刚绑定上是这个样子：
接下来需要设置项模板，具体步骤就不说了，能显示出内容就行：
4.添加详情页
添加一个UserInfoDetailPage，在UserInfoDetailPage_Model文件中添加属性：
public UserInfoItem CurrentUserInfoItem { get { return _CurrentUserInfoItemLocator(this).Value; } set { _CurrentUserInfoItemLocator(this).SetValueAndTryNotify(value); } } #region Property UserInfoItem CurrentUserInfoItem Setup protected Property<UserInfoItem> _CurrentUserInfoItem = new Property<UserInfoItem> { LocatorFunc = _CurrentUserInfoItemLocator }; static Func<BindableBase, ValueContainer<UserInfoItem>> _CurrentUserInfoItemLocator = RegisterContainerLocator<UserInfoItem>("CurrentUserInfoItem", model => model.Initialize("CurrentUserInfoItem", ref model._CurrentUserInfoItem, ref _CurrentUserInfoItemLocator, _CurrentUserInfoItemDefaultValueFactory)); static Func<UserInfoItem> _CurrentUserInfoItemDefaultValueFactory = () => { return default(UserInfoItem); }; #endregion
然后修改UserInfoDetailPage_Model的构造函数，注意，每个VM必须有一个无参的构造函数，如果要传值的话，要手动把无参的构造函数也加上。同时别忘了把CurrentUserInfoItem绑定到页面上。
public UserInfoDetailPage_Model() { } public UserInfoDetailPage_Model(UserInfoItem item) { CurrentUserInfoItem = item; }
5. 使用InvokeCommandAction导航到详情页面
接下来就要实现我们的目的，点击User列表的时候，导航到详情页。首先看第一种方式，使用InvokeCommandAction：
在Blend中编辑MainPage，拖一个InvokeCommandAction到ListView上：
Behavior事件选择SelectionChanged：
在MainPage_Model中添加一个 Command，使用propcmd代码段来生成：
public CommandModel<ReactiveCommand, String> CommandNavToDetailByInvokeCommand { get { return _CommandNavToDetailByInvokeCommandLocator(this).Value; } set { _CommandNavToDetailByInvokeCommandLocator(this).SetValueAndTryNotify(value); } } #region Property CommandModel<ReactiveCommand, String> CommandNavToDetailByInvokeCommand Setup protected Property<CommandModel<ReactiveCommand, String>> _CommandNavToDetailByInvokeCommand = new Property<CommandModel<ReactiveCommand, String>> { LocatorFunc = _CommandNavToDetailByInvokeCommandLocator }; static Func<BindableBase, ValueContainer<CommandModel<ReactiveCommand, String>>> _CommandNavToDetailByInvokeCommandLocator = RegisterContainerLocator<CommandModel<ReactiveCommand, String>>("CommandNavToDetailByInvokeCommand", model => model.Initialize("CommandNavToDetailByInvokeCommand", ref model._CommandNavToDetailByInvokeCommand, ref _CommandNavToDetailByInvokeCommandLocator, _CommandNavToDetailByInvokeCommandDefaultValueFactory)); static Func<BindableBase, CommandModel<ReactiveCommand, String>> _CommandNavToDetailByInvokeCommandDefaultValueFactory = model => { var resource = "NavToDetailByInvokeCommand"; // Command resource var commandId = "NavToDetailByInvokeCommand"; var vm = CastToCurrentType(model); var cmd = new ReactiveCommand(canExecute: true) { ViewModel = model }; //New Command Core cmd.DoExecuteUIBusyTask( vm, async e => { //Todo: Add NavToDetailByInvokeCommand logic here, or await MVVMSidekick.Utilities.TaskExHelper.Yield(); var item = e.EventArgs.Parameter as UserInfoItem; if(item != null) { await vm.StageManager.DefaultStage.Show(new UserInfoDetailPage_Model(item)); } }) .DoNotifyDefaultEventRouter(vm, commandId) .Subscribe() .DisposeWith(vm); var cmdmdl = cmd.CreateCommandModel(resource); cmdmdl.ListenToIsUIBusy( model: vm, canExecuteWhenBusy: false); return cmdmdl; }; #endregion
注意看红色的部分，首先获取Command的参数，然后使用StageManager去导航到详情页，并在详情页的构造函数里传递一个参数。
然后编译一下，在Blend里把Command绑定到Action上：
Command的参数绑定到ListView的SelectedItem上：
这样在Command里面就可以获取到点击的是哪个item了。
运行一下看看，可以根据点击项来导航了。
6.使用SendToEventRouterAction来导航到详情页面
看了上面的大家觉得也太简单了，下面给大家介绍一个好东西，MVVM-Sidekick里的SendToEventRouterAction。
这个Action顾名思义就是将Event发送到一个 Router里来处理，Router可以是当前VM的，也可以是全局的，我一般喜欢使用全局的方式，比如在好多页面可能都有文章列表，这些列表点击后的动作都是相同的，都是导航到文章详情页面，使用全局的Router，只需要处理一次就可以了。
在MainPage里再添加一个ListView，也绑定到相同的数据源UserInfoItemList上，项模板复制一下之前的，命名为SendToRouterUserInfoItemDataTemplate，两个ListView用的是不同的项模板，不要弄混了。
这次我们不用InvokeCommandAction了，在项模板里做文章。编辑SendToRouterUserInfoItemDataTemplate项模板，拖一个SendToEventRouterAction到根Grid上 ：
Behavior的事件选择Tapped：
EventRoutingName设置为NavToDetailByEventRouter，选中IsEventFiringToAllBaseClassesChannels，EventData自定义表达式输入{Binding}:
在XAML里看起来是这样的：
<Interactivity:Interaction.Behaviors> <Core:EventTriggerBehavior EventName="Tapped"> <Behaviors:SendToEventRouterAction EventRoutingName="NavToDetailByEventRouter" IsEventFiringToAllBaseClassesChannels="True" EventData="{Binding}"/> </Core:EventTriggerBehavior> </Interactivity:Interaction.Behaviors>
然后来处理Router，在MainPage_Model里添加一个订阅命令的方法：
private void SubscribeCommand() { //一般列表项点击事件 MVVMSidekick.EventRouting.EventRouter.Instance.GetEventChannel<Object>() .Where(x => x.EventName == "NavToDetailByEventRouter") .Subscribe( async e => { var item = e.EventData as UserInfoItem; if (item != null) { await StageManager.DefaultStage.Show(new UserInfoDetailPage_Model(item)); } } ).DisposeWith(this); }
注意看红色的部分，通过EventData来获取绑定的Model，进行下一步操作。
别忘了在Load事件中调用此方法。调用的时候注意最好加个flag避免重复订阅。
现在运行一下看看，下面的ListView也可以导航到详情页了。
需要说明的是，当前VM也有个EventRouter，如果要绑定到当前VM的EventRouter，XAML里要写明绑定到当前的EventRouter：
<Behaviors:SendToEventRouterAction EventRoutingName="NavToArticle" EventData="{Binding}" EventRouter="{Binding ElementName=LayoutRoot, Path=DataContext.EventRouter}" />
订阅的时候这样写：
this.LocalEventRouter.GetEventChannel<Object>()。。。。后面的一样
和全局的相比就是如果离开当前的VM此订阅就无效了。
7.处理不同区域的点击事件
下面更进一步，实现点击项的不同区域分别进行处理。
在项模板里添加两个按钮，想实现这样的功能，点击一个按钮可以增加Age，点击另一个减少Age。
项模板改成这样：
分别拖两个Action到按钮上，XAML变成这样：
<StackPanel Grid.Row="2" Orientation="Horizontal"> <AppBarButton HorizontalAlignment="Stretch" Icon="Like" Label="Good" VerticalAlignment="Stretch"> <Interactivity:Interaction.Behaviors> <Core:EventTriggerBehavior EventName="Click"> <Behaviors:SendToEventRouterAction EventData="{Binding}" IsEventFiringToAllBaseClassesChannels="True" EventRoutingName="AddAge"/> </Core:EventTriggerBehavior> </Interactivity:Interaction.Behaviors> </AppBarButton> <AppBarButton HorizontalAlignment="Stretch" Icon="Dislike" Label="boo" VerticalAlignment="Stretch"> <Interactivity:Interaction.Behaviors> <Core:EventTriggerBehavior EventName="Click"> <Behaviors:SendToEventRouterAction EventData="{Binding}" EventRoutingName="RemoveAge" IsEventFiringToAllBaseClassesChannels="True"/> </Core:EventTriggerBehavior> </Interactivity:Interaction.Behaviors> </AppBarButton> </StackPanel>
订阅事件：
MVVMSidekick.EventRouting.EventRouter.Instance.GetEventChannel<Object>() .Where(x => x.EventName == "AddAge") .Subscribe( e => { var item = e.EventData as UserInfoItem; if (item != null) { item.Age++; } } ).DisposeWith(this); MVVMSidekick.EventRouting.EventRouter.Instance.GetEventChannel<Object>() .Where(x => x.EventName == "RemoveAge") .Subscribe( e => { var item = e.EventData as UserInfoItem; if (item != null) { item.Age--; } } ).DisposeWith(this);
跑一下试试，竟然点击按钮的时候也触发了导航事件，那需要把导航的Action从根Grid转移一下，和按钮的Action分开即可。
打完收工！
你们过节，我写博客……
最后附上demo下载：链接：http://pan.baidu.com/s/1dD51Fax 密码：ymdn