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

在本系列文會利用目前 Visual Studio 內建的專案樣本建立一個初始的 .NET MAUI 專案，並且透過此 .NET MAUI 專案來把 TopStore App 的開發從 Xamairn.Forms 轉換到 .NET MAUI 上進行。

本篇是 Re: 從零改成用 .NET MAUI 技術來繼續過去用 Xamarin 開發的一個 App : TopStore 系列 系列文的 EP15。

在上回當中在 TopStoreApp 專案當中多安裝了 CommunityToolkit.Mvvm 這套件，而透過了繼承 ObservableObject 並與 ObservableProperty 這個 Attritube 搭配調整其設計。

接著要來透過 CommunityToolkit.Mvvm 這套件當中所運用 RelayCommand 的這個 Attritube 搭配，來協助使用 MVVM 框架設計時，撰寫在 ViewModel 當中能讓 View 透過繫結 (Binding) 後執行的 Command 方法。

首先，回到前一回有開啟的 "PeoplePageViewModel.cs" 檔案當中，並在其類別設計當中加入以下 5 個方法的設計(可增加在類別建構方法之後，已經撰寫的 Command 方法之前)：

    private async void Add()
    {
        await Shell.Current.GoToAsync("//People/PersonDetail?isEdit=true");
    }

    private async void Edit(Person person)
    {
        await Shell.Current.GoToAsync($"//People/PersonDetail?isEdit=false&personId={person.Id}");
    }

    private async void Delete(Person person)
    {
        var isOk = await Shell.Current.DisplayAlert("警告", $"確定\"{person.Name}\"刪除?", "確定", "取消");
        if (isOk)
        {
            App.DataService.DeletePerson(person);
            People = App.DataService.GetPeople();
        }
    }

    private void CallTel(Person person)
    {
        PhoneDialer.Open(person.Tel);
    }

    private async void Search(string keyword)
    {
        var results = App.DataService.GetPeople(keyword);
        if (results.Count != 0)
        {
            People = results;
            return;
        }
        await Shell.Current.DisplayAlert("通知", "查無相關聯絡人", "OK");
    }

增加好的結果大致如下圖紅框：

然後接著將原本撰寫的 5 個 Command 方法全數刪除(在下圖用藍色框並註解表示)：

而在這邊如果仔細觀察的話，就會發現上面寫的方法程式碼，其實跟先前所設計的 Command 當中，透過 Lambda Expression 撰寫拿來當作參數所傳入的 Action 設計，其所執行的程式碼都一模一樣。

回到前一個步驟所撰寫的 Add() 方法，並在其方法簽章上頭掛上 [RelayCommand] 的 Attritube(如下圖紅框所示)，而在加上的同時 Visual Studio 2022 應該會自動協助加入 using CommunityToolkit.Mvvm.Input; 的命名空間引用處理(如下圖黃框所示)：

接著其他四個方法 Edit、Delete、CallTel、Search 的方法簽章上頭也都掛上[RelayCommand] 的 Attritube(如下圖紅框所示)：

到這邊 PeoplePageViewModel 類別的變更告一段落，切換到 "PersonDetailPageViewModel.cs" 進續進行調整吧！

同樣的這邊也要來在 PersonDetailPageViewModel 類別當中設計以下的一個方法(可增加在類別建構方法之後，已經撰寫的 Command 方法之前)：

    private async void Save()
    {
        if (IsEdit)
        {
            var isValid = Utilities.ValidationHelper.IsValid(EditPerson, Shell.Current.CurrentPage);
            if (!isValid)
                return;

            App.DataService.SavePerson(EditPerson);

            var isBack = await Shell.Current.DisplayAlert("通知", "儲存成功!",
                                                                "返回聯絡人列表", "再檢視此筆資料");
            if (isBack)
            {
                await Shell.Current.GoToAsync("..");
            }
        }
        IsEdit = !IsEdit;
    }

完成後的結果如下圖紅框所示：

接著把原本已經撰寫的 Command 方法刪除(在下圖用藍色框並註解表示)：

而在這邊如果仔細觀察的話，就會發現上面寫的方法程式碼，其實跟先前所設計的 Command 當中，透過 Lambda Expression 撰寫拿來當作參數所傳入的 Action 設計，其所執行的程式碼都一模一樣。

回到前一個步驟所撰寫的 Save() 方法，並在其方法簽章上頭掛上 [RelayCommand] 的 Attritube(如下圖紅框所示)，而在加上的同時 Visual Studio 2022 應該會自動協助加入 using CommunityToolkit.Mvvm.Input; 的命名空間引用處理(如下圖黃框所示)：

完成後 "重建" 此專案：

最後在 Visual Studio 2022 的左下角會顯示 "全部重建成功"：

完成後，也能執行測試看看，所有在 TopStoreApp 已完成的功能都能正常運作沒問題唷！

本 EP 介紹所完成的範例程式碼可在此下載。