EP 14: The MenuItem of ListView binds Command in itself Model

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

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

在上个 EP13 的部分我们已经针对联络人的资料完成 "检视"、"新增"、"修改" 等功能，接着再本篇 EP14 要来继续谈谈 "删除" 的事情。

本篇 EP14 先来介绍简单的作法来 "处理" 完成这功能吧!

开始罗~~~

首先，先针对 Models 资料夹底下的 Person 类别设计来下手，在 EP13 的时候有针对 Person 有需要跟 UI 互动的资料属性撰写成 NotifyProperty。
Person 类别设计 NotifyProperty

接着在这个 Person 继续像过去增加 Command 的方式一样，来增加一个 DeleteCommand 的 Command 撰写。
Person 类别设计 DeleteCommand

接着再到 PeoplePage.xaml 找到先前所撰写的 ListView 标记。
PeoplePage.xaml 的 ListView

在其中的 ViewCell 标记，再继续撰写 ViewCell.ContextActions 的成对标记。
ListView 当中的 ViewCell.ContextActions 设计

并於其中设计 MenuItem 的标记设定其 Text 属性的文字，与设定其 Command 去 Binding 到本篇前段在 Person 类别中设计的 DeleteCommand。
MenuItem 设计 1

当这个 MenuItem 标记设计这样完成时，在 iOS 平台呈现的效果会是如此。
iOS 平台在 ListView 中透过 MenuItem 呈现 ViewCell.ContextActions 的效果 1

使用者对 ListView 的某笔选项往左滑动，就会出现该 MenuItem 的效果。

所以通常会在针对需要特别提醒的选项设定 IsDestructive 的属性为 "True"。
MenuItem 设计 2

出现该 MenuItem 时的效果就有些不同，会变成红色的选项呈现。
iOS 平台在 ListView 中透过 MenuItem 呈现 ViewCell.ContextActions 的效果 2

而若是在 Android 平台的呈现的效果会是如此，对 ListView 的某笔选项长点击，在上方会出现一个选单列，选单列上就会有所设计的 MenuItem 选项出现。
Android 平台在 ListView 中透过 MenuItem 呈现 ViewCell.ContextActions 的效果

而刚刚所设定的 IsDestructive 的属性为 "True" ，在 Android 平台上透过选单呈现效果，其实看不出太大的 UI 变化性。

回到先前设计的 DeleteCommand。
Person 类别当中的 DeleteCommand 程序撰写

继续完成内部的程序运作。

完成後，来执行看看双平台(iOS、Android)整体上所呈现的效果。

针对 ListView 当中的联络人列表选取其中某笔联络人做删除的动作。
透过 ListView 设计与处理联络人删除 1

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

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

Oh~~似乎就这样完成了耶?

是没错，这样确实有达到本篇 EP14 想要完成的功能。

由於在 ListView 当中已经透过 ItemsSource 系结到 People 这个集合物件，所以在 ListView 中的每个项目则都系结到了一个 Person 的物件来呈现其资讯。

也因为这样，则才能透过系结其 Person 类别当中所设计的 DeleteCommand 来执行删除。

但这样的设计可能就有点破坏了本来的 MVVM 框架应有的区分职责概念，而导致於感觉上怎看都怪怪的，这...就让我们在下下一篇的 EP16 来续谈罗^_<

下一篇 EP15 先来谈谈 ListView 项目当中所设计的 "Button 打电话" 要如何设计其功能，掰~~~

乾虾搭架!