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

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

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

繼前一回新增的 ProductDetailPage 完成能透過 GoodsPage 的 "列表項目" 點選進入，或是透過 "新增" 功能進入後，同樣的來完成對應的 ProductDetailPageViewModel 設計，並且能夠透過 Shell 執行轉跳功能時要帶入的參數，以利呈現兩者操作進入 ProductDetailPage 時有的不同效果。

找到 TopStoreApp 專案的 ViewModels 資料夾：

在 ViewModels 資料夾上右鍵選單中，選擇 "加入" -> "類別"：

確認好建立的類別命名為 ProductDetailPageViewModel：

改寫一下建立的類別檔，變成新版 C# 的撰寫風格：

變更類別的封裝關鍵字為 public 並加入 partial 之後，再繼承 BasePageViewModel：

引用命名空間 using CommunityToolkit.Mvvm.ComponentModel; 並在此類別當中設計如下程式：

    [ObservableProperty]
    private Models.Product _editProduct;

    [ObservableProperty]
    private bool _isEdit;

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

接著在此 ProductDetailPageViewModel 類別宣告的上方掛上 [QuryingProperty] 的 Attritube：

[QueryProperty(nameof(IsEditQueryString), "isEdit")]
[QueryProperty(nameof(ProductId), "productId")]

並在此 ProductDetailPageViewModel 類別當中設計對應 [QuryingProperty] 的屬性宣告：

    public string IsEditQueryString
    {
        set
        {
            IsEdit = bool.Parse(value);
        }
    }

    public int ProductId
    {
        set
        {
            int productId = value;
            if (productId > 0)
                EditProduct = App.DataService.GetProduct(productId);
        }
    }

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

設計此類別的建構方法，並透過 App.DataService.NewProduct() 方法取得 Product 物件並設定給 EditProduct 屬性：

    public ProductDetailPageViewModel()
    {
        EditProduct = App.DataService.NewProduct();
    }

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

最後再設計一個 Add() 方法，並在此方法上掛上 [RelayCommand] 的 Attritube (注意上方的在命名空間的部分應該也會同時自動引入 using CommunityToolkit.Mvvm.Input;)：

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

            App.DataService.SaveProduct(EditProduct);

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

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

以上完成後可以先嘗試將整個專案 "重建"：

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

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