EP 15: The Button of item in ListView binds Command to ViewModel

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

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

在上篇 EP14 的部分已经有针对在 PeoplePage 当中的 ListView 呈现的联络人的资料，若透过设计其 ViewCell.ContaxtActions 中的 MenuItem 来完成 "删除" 某笔联络人资料的事情。

本篇 EP15 先来进一步的 "讨论"，针对在 ListView 当中设计的 ViewCell 里面有放置的辣个 Button，要如何实践它的 "打电话" 功能实作唷。

开始罗~~~

首先，打开 PeoplePage.xaml 并且找到当初在 ListView 其中所设计的 ViewCell 当中 Button 标记。

(为了方便截图，将其它的 XAML 标记先缩编起来。)

接着要针对这个 Button 设计两个属性，一个叫做 Command；一个叫做 CommandParameter。

并且设计其系结的 Command 到 PeoplePageViewModel 当中所要再新增的 CallTelCommand。

(注意此 Command 的撰写是有引数设计的。)

而这个 CallTelCommand 就透过 Xamarin.Essentials 当中所设计的 PhoneDialer 来执行 Open 方法转跳到拨打电话的部分。

接着针对 Button 标记再撰写 Command 并且指定其 Binding 的 Source 为一个 RelativeSource 的设计处理，而 Binding 的 Path 为 CallTelCommand。

完成之後再继续撰写 CommandParameter 设计其 Binding 的 Source 为一个 RelativeSource 的设计处理，而 Binding 的 Path 为 BindingContext。

当完成之後，就可以来测试执行看看，其双平台(Android、iOS)的执行结果如何。

Android:

iOS:

大概可以看出其效果为直接从 TopStore App 进行转跳，转跳到该平台装置上预设拨打电话的 App，并且把该联络人的 Tel 资讯带入到拨打电话的 App 当中。

完工~~~

请继续往下收看 EP16 罗

哈~~~若是这样本篇就太骗了些。

还是来针对上述完成的功能来理解一下发生了什麽事情。

第一，可能有朋友会想应该对於 Command 的设定应是如此的写法。

只能说，如果有了解 Binding(系结) 观点的话，在这边对於 Button 标记的 Command 我们是无法直接指定设计在 PeoplePageViewModel 的 CallTelCommand，如果注意一下 Visual Studio 在 XAML 当中的即时提示就会发现。

由於现在 Button 是设计在 ListView 当中的 ItemTemplate 当中的 DataTemplate 当中的 ViewCell，该 ViewCell 所 Binding(系结) 到的 BindingContext 会是一个 Person 的物件。

因此是无法直接撰写 Button 的 Command 其 Binding 设定为 CallTelCommand 的。

所以在这边的 Binding 是透过 Source 的指定其 RelativeSource 的设计，来取得 PeoplePageViewModel 并且指定其 Path 为 CallTelCommand。

第二，那个 CommandParameter 又是在做什麽?

如果各位有注意到，这个 Button 是需要带 Person 里的 Tel 给 "拨打电话" 的 App，所以在设计 CallTelCommand 的处理上，是有设定一个引数提供带入参数资料的。

那为何又要这样做?

因为 Button 目前的 Command 已经在第一点指定要执行 PeoplePageViewModel 当中的 CallTelCommand，且 Button 的 BindingContext 就是 Person 的物件。

所以这里就透过将其 Binding 的 Source 指定其 RelativeSource 的设计为 Self，就能把该 Person 当参数，把资料传递给 CallTelCommand 所设计的引数设计。

希望透过以上两点补充，能对理解本篇 EP15 对於 Button 实作 "拨打电话" 的 Command 处理，有更进一步的了解唷~~~

好的，就介绍到这边，下篇 EP16 见罗!

骰唷奈奈~~~~