iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0

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 打電話" 要如何設計其功能,掰~~~

乾蝦搭架!


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

尚未有邦友留言

立即登入留言