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 見囉!

骰唷奈奈~~~~