EP 12: Implement and Use a Custom ValueConveter

2021 iThome 鐵人賽

DAY 12

Mobile Development

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

13th鐵人賽 xamarin xamarin.forms maui visual studio

James Tsai

2021-09-20 01:45:17

680 瀏覽

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

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

在 EP11 已經仰賴 Shell 利用 URI 的 Navigation 模式轉跳到 PersonDetailPage 時透過傳遞的參數，去判斷是否需要將該 PersonDetailPage 的 Entry 設定為可編輯的模式。

但若是點選某個聯絡人進入到 PersonDetailPage 的時候，我們在 PersonDetailPage 若沒有設計一些 ToolbarItem 的改變，以目前狀況來看無論是如何轉跳進來到 PersonDetailPage 的，其 ToolbarItem 就都是 "儲存" 的功能。

所以本篇 EP12 就要來針對該 ToolbarItem 來產生出 "儲存/編輯" 之間的差異調整。

就來看怎麼處理吧，Go~~~

再次把焦點到 Visual Studio 當中的 "方案總管" 窗格中，並且針對 Xamarin.Forms 專案的 Utilities 資料夾中再新增一個資料夾，並且命名為 ValueConveters。
在 Xamarin.Forms 專案新增 ValueConveters 資料夾 1

在 Xamarin.Forms 專案新增 ValueConveters 資料夾 2

接著在這個 ValueConveters 當中再新增一個類別檔，並且命名為 BoolToTwoStringValueConveter。
在 ValueConveters 資料夾中新增 BoolToTwoStringValueConveter 類別 1

新增類別檔案。
在 ValueConveters 資料夾中新增 BoolToTwoStringValueConveter 類別 2

確認在 ValueConveters 資料夾中完成建立 BoolToTwoStringValueConveter 類別。
在 ValueConveters 資料夾中新增 BoolToTwoStringValueConveter 類別 3

接著就在這個類別當中來實作被定義在 Xamarin.Forms 命名空間當中的 IValueConveter 這個介面(Interface)。
實作 IValueConveter 介面 1

在這邊我們想要透過 EP11 在 PersonDetailPageViewModel 所接收到 IsEdit 屬性資料值 "true/false" 能夠對應到 "儲存/編輯" 這兩個文字字串，並且在 ToolbarItem 的 Text 屬性透過 Binding 的方式來呈現該文字，所以開始來設計這個 ValueConveter。

實作 IValueConveter 介面 2

而完成後就來將這個 ValueConveter 在 Xamarin.Forms 專案當中設計成 Resource，才能讓 XAML 透過 StaticResource 進行 Binding 時的轉換。

所以就打開 App.xaml。
在 Resource 中設計 BoolToTwoStringValueConveter 的標記 1

並在其 Resources 標記當中增加 BoolToTwoStringValueConveter 的標記。
在 Resource 中設計 BoolToTwoStringValueConveter 的標記 2

跟之前的 EP3 介紹一樣，可以透過 Visual Studio 的修正功能，快速完成在 XAML 撰寫中的引用 BoolToTwoStringValueConveter 所在的命名空間。
在 Resource 中設計 BoolToTwoStringValueConveter 的標記 3

再切到 PersonDetailPage.xaml 找到 ToolbarItem 的 XAML 標記。
ToolbarItem 的 XAML 標記修改 1

在 ToolbarItem 其中的 Text 屬性值的部分就透過 Binding 與 StaticResource 的使用。
ToolbarItem 的 XAML 標記修改 2

接下來我們就透過偵錯執行來觀察一下調整的效果。

首先是執行 iOS 並且在 PersonPage 點選右上角 "新增" 的 ToolbarItem 執行 AddCommand。
新增聯絡人執行 AddCommand

再進到 PersonDetailPage 之前會來 BoolToTwoStringValueConveter 執行轉換(透過 OzCode 延伸擴展可以觀看到方法上的參數資料值，第一個參數 value 的資料為 true)。

接著出現在 iOS 平台的 PersonDetailPage 所顯示的 ToolbarItem 文字為 "儲存"。

接著切換到 Android 來執行，並且在 PersonPage 點選 ListView 當中某筆聯絡人的選項，執行了 EditCommand。
聯絡人執行 EditCommand

再進到 PersonDetailPage 之前會來 BoolToTwoStringValueConveter 執行轉換(透過 OzCode 延伸擴展可以觀看到方法上的參數資料值，第一個參數 value 的資料為 false)。

接著出現在 Android 平台的 PersonDetailPage 所顯示的 ToolbarItem 文字為 "編輯"。

以上確認都沒問題的話，本篇 EP12 的目的就達成!

YA!!!

最後，就先來簡單的修正一下在 PersonDetailPageViewModel 所撰寫的部分程式。

對，就是 PersonDetailPageViewModel 當中的 SaveCommand，修正一下原本撰寫的程式，檢查一下 IsEdit 的狀況來確保是否需要儲存聯絡人資訊。
PersonDetailPageViewModel 的 SaveCommand 修正

當然，目前 PersonDetailPageViewModel 建構式的設計與 SaveCommand 的檢查 IsEdit 修正，若是要針對使用者透過聯絡人列表，轉跳進入 PersonDetailPage 檢視聯絡人資料後，若進行該筆聯絡人的資料編輯後，再執行 "儲存" 動作時會有資料面上的儲存問題。

這就留待在下一篇 EP13 再來進行討論囉~~~

ByeBye!