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

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

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

後來發現原來 .NET 6 的 Library 當中已經包含 "System.ComponentModel.Annotations" ，所以在這邊把先前從 Xamarin.Forms 移植為 .NET MAUI 時所安裝的 Nuget 套件給移除：

打開管理 Nuget 套件：

找到 "System.ComponentModel.Annotations" 點選 "移除"：

點選安裝預覽對話窗格的 "OK"：

緊接著來安裝 CommunityToolkit.Mvvm 這個套件：

點選安裝預覽對話窗格的 "OK"：

詳細檢視套件的 "發行者" 與 "授權條款"：

安裝完成：

目前 CommunityToolkit.Mvvm 已經正式推出 version 8.0.0 且支援 .NET 6 的使用，所以在 .NET MAUI 當中要搭配 MVVM 框架撰寫程式的話，使用這套件是最適合不過的了。

要來開始運用 CommunityToolkit.Mvvm 的設計了，快上車~~~

接著打開 ViewModels 資料夾底下的 BasePageViewModel.cs 這個類別檔：

在命名空間的部分加入 using CommunityToolkit.Mvvm.ComponentModel; 跟在類別宣告簽章處加上 partial 關鍵字，並將繼承類別改為 ObservableObject：

接著在封裝為 private 的欄位上方掛上 [ObservableProperty] 的 Attritube，並且將下方所撰寫的屬性宣告給移除(在下圖藍色框當中用註解表示)：

再打開 ViewModels 資料夾底下的 PeoplePageViewModel.cs 這個類別檔：

在命名空間的部分一樣加入 using CommunityToolkit.Mvvm.ComponentModel; 跟在類別宣告簽章處加上 partial 關鍵字：

接著在封裝為 private 的欄位上方掛上 [ObservableProperty] 的 Attritube，並且將下方所撰寫的對應屬性宣告給移除(在下圖藍色框當中用註解表示)：

最後請打開 ViewModels 資料夾底下的 PersonDetailPageViewModel.cs 這個類別檔：

在命名空間的部分一樣加入 using CommunityToolkit.Mvvm.ComponentModel; 跟在類別宣告簽章處加上 partial 關鍵字：

接著在封裝為 private 的欄位上方掛上 [ObservableProperty] 的 Attritube，並且將下方所撰寫的對應屬性宣告給移除(在下圖藍色框當中用註解表示)。而此類別當初有設計兩個欄位資料，所以要針對這兩個欄位與屬性都做這件事情：

完成後，"重建" 專案：

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

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

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