iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Mobile Development

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

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 程式碼剪下。
Person 類別設計 DeleteCommand

再到 PeoplePageViewModel 類別中把這段 DeleteCommand 給貼上,貼上之後要稍微修正一下,將 DeleteCommand 設計成可傳參數的 Command 設計,並且執行集合刪除的部分改成該參數的名稱。
PeoplePageViewModel 類別增加 DeleteCommand

接著進到 PeoplePage.xaml 找到 ListView 標記,並在其 ViewCell.ContextActions 中的 MenuItem 標記中的 Command 撰寫給刪除。
PeoplePage 中的 MenuItem 標記刪除 DeleteCommand

替換成 Clicked 的事件註冊並設計其中的事件處理常式為 DeleteMenuItem_Clicked
PeoplePage 中的 MenuItem 標記增加 Clicked 事件與 DeleteMenuItem_Clicked 處理常式的註冊

接著到 PeoplePage.xaml.cs 當中,找到剛剛建立的 DeleteMenuItem_Clicked 事件處理常式。
PoplePage.xaml.cs 當中的 DeleteMenuItem_Clicked 事件處理常式

編纂其 DeleteMenuItem_Clicked 事件處理常式的程式碼。
編纂 DeleteMenuItem_Clicked 事件處理常式中的程式碼

由於此為 MenuItem 的事件處理常式的事件處理常式,其設計的引數 sender 即會是 MenuItem 被當作物件參數傳入,因此可以將 sender 轉回 MenItem 並取得其 BindingContext,再將此 BindingContext 當作參數傳入 DeleteCommand 的執行當中。

接下來就試著在雙平台 (iOS、Android) 來執行看看。

針對 ListView 當中的聯絡人列表選取其中某筆聯絡人做刪除的動作。
透過 ListView 設計與處理聯絡人刪除 1

此動作會透由前面所設計的 DeleteMenuItem_Clicked 去呼叫 PeoplePageViewModel 裡所撰寫的 DeleteCommand 來執行。

執行 DeleteCommand 所設計的程式,並且出現 Alert 詢問使用者是否真的要刪除該筆聯絡人資訊。
透過 ListView 設計與處理聯絡人刪除 2

如果使用者選擇確定,則該筆資料從 MockData 的聯絡人當中刪除,並從 ListView 的畫面呈現中消失。
透過 ListView 設計與處理聯絡人刪除 3

以上的執行,跟在 EP14 所完成的結果是不是都一樣呢,哈!

如果是的話,那這樣就將 Models 當中的 Person 類別所撰寫的 DeleteCommand,成功的轉移到 ViewModels 裡的 PeoplePageViewModel 當中囉~~~

那...本篇 EP16 的部分就介紹到這邊囉!

下篇 EP17 見唷~~~


上一篇
EP 15: The Button of item in ListView binds Command to ViewModel
下一篇
EP 17: The MenuItem of ListView binds Command in ViewModel - Way 2
系列文
Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言