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

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP05。

以目前完成的部分去建置專案程式碼是可以編譯完成的！

可是無論哪個平台的執行都沒有辦法正確顯示所設計的 訂單 畫面~~~

別忘記，截至目前為止所撰寫的程式碼，並還沒有把所設計的 OrdersPageViewMode 所建立的物件設定到 OrdersPage 的 BindingContext。

所以在上一回的最後還特別提到要在 OrdersPage 當中去撰寫符合 Maui 的 Builder 運用的程式，來正確地把 ViewModel 所建立的物件跟 Page 結合起來。

首先，就先來找到 OrdersPage.xaml.cs 並在原本的建構方法下來增加以下程式碼：

public OrdersPage(ViewModels.OrdersPageViewModel ordersPageViewModel) : this()
{
    BindingContext = ordersPageViewModel;
}

protected override void OnAppearing()
{
    base.OnAppearing();

    var vm = BindingContext as ViewModels.OrdersPageViewModel;
    vm.SummaryOrders = App.DataService.GetSummaryOrders();
}

完成結果如下圖：

接著打開 MauiProgram.cs 後，找到原本撰寫的 RegisterAppViewAndViewModels 方法，在其中加入下列程式碼：

builder.Services.AddSingleton<Pages.OrdersPage>();
builder.Services.AddSingleton<ViewModels.OrdersPageViewModel>();

完成結果如下圖：

上述做法稱作 DI，在 EP 13: Use Dependency Injection for Views and ViewModels in .NET MAUI 有介紹，在本 EP 就是再次依樣畫葫蘆完成。

如果有需要深入了解的朋友可參考微軟官網介紹：
Microsoft Learn 相依性插入

完成更改後，再重新於各平台編譯執行，即可看到正確的 訂單 頁面顯示：

最後再補修正一下~~~

由於 OrderPage 會被使用的方式大概只有 MauiProgram 當中透過 DI 的方式讓 Builder 去使用，不會再透過其他的方式來建立其物件，所以這裡就把 OrderPage 類別當中設計沒有傳參數的預設建構子的存取修飾字改為 private：

完成~~~