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

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

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

繼上一回完成 GoodsPage 的 UI 畫面與 GoodsPageViewModel 所設計的操作方法，完成繫結並且正確操控後，緊接著要來設計 ProductDetailPage。

首先找到專案當中的 Pages 資料夾：

並且在該資料夾透過右鍵選單，選擇 "加入" -> "新增項目"：

選擇 .NET MAUI 的 ContentPage (XAML)，命名為 ProductDetailPage 後，點選 "確定"：

增加完成會在方案總管看到此頁面的 *.xaml 與 *.xaml.cs 檔案：

接著打開 "AppShell.xaml.cs"：

在原本註冊 PersonDetailPage 路由程式碼的下方加入註冊 ProductDetailPage 的路由程式碼：

Routing.RegisterRoute("Goods/ProductDetail", typeof(Pages.ProductDetailPage));

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

接著找到專案當中的 ViewModels 資料夾，開啟 "GoodsPageViewModel.cs" 這個檔案：

把原本設計在 GoodsPageViewModel 當中的 Add() 與 Edit() 方法程式碼做個調整，當初在 EP 24: Design the Commands of GoodsPageViewModel in TopStoreApp 設計此兩個方法的時候就有留下註解的程式碼，現在要把註解給移除(如下圖紅色框所示)，原本的程式碼就可以刪除(如下圖藍色框所示)：

以上動作都完成後，就可以測試看看：

• 點選在 GoodsPage 的導覽列右側的 "新增" 按鈕，會轉跳進入到 ProductDetaiPage，也可以再透過 ProductDetaiPage 導覽列左側的 "<-" 按鈕返回到 GoodsPage：
  

• 點選在 GoodsPage 的列表中的項目後，也轉跳進入到 ProductDetaiPage，也可以再透過 ProductDetaiPage 導覽列左側的 "<-" 按鈕返回到 GoodsPage：
  

當然，以目前的設計轉跳進入 ProductDetaiPage 並沒有任何差別，這部分就留待下回再續吧！

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