EP 16: The MenuItem of ListView binds Command in ViewModel - Way 1

Hello, 各位 iT邦帮忙 的粉丝们大家好~~~

本篇是 Re: 从零开始用 Xamarin 技术来复刻过去开发的一个 App: TopStore 系列文的 EP16。

在本系列的 EP14 当中已经能让使用者在 PeoplePage 在 ListView 当中，透过点选设计在 ViewCell.ContextActions 的 "MenuItem 删除"，并且透过Binding(系结) 自行设计的 Command 的方式，来完成 PeoplePage 当中的一笔联络人资料从联络人列表当中删除。

在本系列的 EP15 当中则是已经能让使用者在 PeoplePage 点选联络人列表的 ListView 当中某笔联络人的 "Button 打电话"，透过 Xamarin.Essentials 的 PhoneDialer 所设计的 Open 方法，转跳进入到行动装置预设的拨打电话的 App，并且带入该笔联络人电话。

接下来本回 EP16 要来讨论一个问题，当在 EP14 设计的给 "MenuItem 删除" 所 Binding (系结)到的 DeleteCommand，其 DeleteCommand 的撰写是在 Models 底下的 Person 类别当中。

如果就 MVVM 框架的定义上来看，Models 当中又设计了 Command 来执行，也就是除了有跟 View 互动外还涉及了其他程序的功能执行，就框架的职责上来看感觉就比较怪一些。

所以该怎麽调整，让该 Command 能放在该页面所设计的 ViewModel 呢?

整体来说算是有两种 "作法" 可以处理此问题，我们就透过 EP16 与 EP17 两篇的篇幅来进行这个讨论吧~~~

GoGo!!!

在本系列文章的 EP10 当中，有提到在 ListView 当中设计 ItemTapped 的事件，并且在其事件注册的事件处理常式当中撰写了呼叫 ViewModel 当中所设计的 EditCommand 方法。

在本篇 EP16 就要来介绍类似的手法来完成喔!

首先，先找到再 Models 底下的 Person 类别，并且把先前 EP14 设计的 DeleteCommand 程序码剪下。

再到 PeoplePageViewModel 类别中把这段 DeleteCommand 给贴上，贴上之後要稍微修正一下，将 DeleteCommand 设计成可传参数的 Command 设计，并且执行集合删除的部分改成该参数的名称。

接着进到 PeoplePage.xaml 找到 ListView 标记，并在其 ViewCell.ContextActions 中的 MenuItem 标记中的 Command 撰写给删除。

替换成 Clicked 的事件注册并设计其中的事件处理常式为 DeleteMenuItem_Clicked

接着到 PeoplePage.xaml.cs 当中，找到刚刚建立的 DeleteMenuItem_Clicked 事件处理常式。

编纂其 DeleteMenuItem_Clicked 事件处理常式的程序码。

由於此为 MenuItem 的事件处理常式的事件处理常式，其设计的引数 sender 即会是 MenuItem 被当作物件参数传入，因此可以将 sender 转回 MenItem 并取得其 BindingContext，再将此 BindingContext 当作参数传入 DeleteCommand 的执行当中。

接下来就试着在双平台 (iOS、Android) 来执行看看。

针对 ListView 当中的联络人列表选取其中某笔联络人做删除的动作。

此动作会透由前面所设计的 DeleteMenuItem_Clicked 去呼叫 PeoplePageViewModel 里所撰写的 DeleteCommand 来执行。

执行 DeleteCommand 所设计的程序，并且出现 Alert 询问使用者是否真的要删除该笔联络人资讯。

如果使用者选择确定，则该笔资料从 MockData 的联络人当中删除，并从 ListView 的画面呈现中消失。

以上的执行，跟在 EP14 所完成的结果是不是都一样呢，哈!

如果是的话，那这样就将 Models 当中的 Person 类别所撰写的 DeleteCommand，成功的转移到 ViewModels 里的 PeoplePageViewModel 当中罗~~~

那...本篇 EP16 的部分就介绍到这边罗!

下篇 EP17 见唷~~~