iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Mobile Development

Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore系列 第 15

EP 15

Hello, 各位 iT邦幫忙 的粉絲們大家好~~~

本篇是 Re: 從零開始用 Xamarin 技術來複刻過去開發的一個 App: TopStore 系列文的 EP15。

在上篇 EP14 的部分已經有針對在 PeoplePage 當中的 ListView 呈現的聯絡人的資料,若透過設計其 ViewCell.ContaxtActions 中的 MenuItem 來完成 "刪除" 某筆聯絡人資料的事情。

本篇 EP15 先來進一步的 "討論",針對在 ListView 當中設計的 ViewCell 裡面有放置的辣個 Button,要如何實踐它的 "打電話" 功能實作唷。

開始囉~~~


首先,打開 PeoplePage.xaml 並且找到當初在 ListView 其中所設計的 ViewCell 當中 Button 標記。

在 ListView 其中所設計的 ViewCell 當中 Button 標記
(為了方便截圖,將其它的 XAML 標記先縮編起來。)

接著要針對這個 Button 設計兩個屬性,一個叫做 Command;一個叫做 CommandParameter。

並且設計其繫結的 Command 到 PeoplePageViewModel 當中所要再新增的 CallTelCommand。
PeoplePageViewModel 當中設計 CallTelCommand
(注意此 Command 的撰寫是有引數設計的。)

而這個 CallTelCommand 就透過 Xamarin.Essentials 當中所設計的 PhoneDialer 來執行 Open 方法轉跳到撥打電話的部分。
PeoplePageViewModel 當中設計 CallTelCommand

接著針對 Button 標記再撰寫 Command 並且指定其 Binding 的 Source 為一個 RelativeSource 的設計處理,而 Binding 的 Path 為 CallTelCommand。
Button 標記當中的 Command 設定

完成之後再繼續撰寫 CommandParameter 設計其 Binding 的 Source 為一個 RelativeSource 的設計處理,而 Binding 的 Path 為 BindingContext。
Button 標記當中的 CommandParameter 設定

當完成之後,就可以來測試執行看看,其雙平台(Android、iOS)的執行結果如何。

Android:
Android : Button 點選後執行 CallTelCommand

iOS:
iOS : Button 點選後執行 CallTelCommand

大概可以看出其效果為直接從 TopStore App 進行轉跳,轉跳到該平台裝置上預設撥打電話的 App,並且把該聯絡人的 Tel 資訊帶入到撥打電話的 App 當中。

完工~~~

請繼續往下收看 EP16 囉

哈~~~若是這樣本篇就太騙了些。

還是來針對上述完成的功能來理解一下發生了什麼事情。

第一,可能有朋友會想應該對於 Command 的設定應是如此的寫法。
Button 的 Command 指定 1

只能說,如果有了解 Binding(繫結) 觀點的話,在這邊對於 Button 標記的 Command 我們是無法直接指定設計在 PeoplePageViewModel 的 CallTelCommand,如果注意一下 Visual Studio 在 XAML 當中的即時提示就會發現。
Button 的 Command 指定 2

由於現在 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 的處理上,是有設定一個引數提供帶入參數資料的。
PeoplePageViewModel 當中設計 CallTelCommand 有設計引數

那為何又要這樣做?

因為 Button 目前的 Command 已經在第一點指定要執行 PeoplePageViewModel 當中的 CallTelCommand,且 Button 的 BindingContext 就是 Person 的物件。

所以這裡就透過將其 Binding 的 Source 指定其 RelativeSource 的設計為 Self,就能把該 Person 當參數,把資料傳遞給 CallTelCommand 所設計的引數設計。

希望透過以上兩點補充,能對理解本篇 EP15 對於 Button 實作 "撥打電話" 的 Command 處理,有更進一步的了解唷~~~

好的,就介紹到這邊,下篇 EP16 見囉!

骰唷奈奈~~~~


上一篇
EP 14
下一篇
EP 16
系列文
Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore31

尚未有邦友留言

立即登入留言