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 系列 系列文的 EP06。

而當 OrdersPage 的呈現完成後，要繼續符合原本 TopStoreApp 的在訂單畫面上的使用概念：

那就要讓在 OrdersPage 呈現的一筆 SummaryOrder 的 Item 能繼續透過點選其中的 >> 按鈕，再進到另外一個畫面，並呈現出該日的訂單有幾筆，並顯示這些訂單的下訂者。

那就要先針對先前設計的 OrdersPage 與 OrdersPageViewModel 再進行改造一下。

要改造的部分沒有太困難，只要有看過 EP 15: The Button of item in ListView binds Command to ViewModel 整篇的解釋，大概就知道整個手法大概要如何完成了~~~

於是就先從編輯 OrdersPage.xaml 的 XAML 標記開始吧!

找到其中的 Button 標記後，在其屬性增加以下撰寫：

Command="{Binding Source={RelativeSource 
                    AncestorType={x:Type viewmodels:OrdersPageViewModel}}, 
                    Path=SelectCommand}"
CommandParameter="{Binding Source={RelativeSource Self}, Path=BindingContext}"

完成結果如下圖：

接著在找到 ViewModels 資料夾下的 OrdersPageVeiwModel.cs 撰寫所需要的 Command 設計：

[RelayCommand]
private async void Select(SummaryOrder summaryOrder)
{
    await Shell.Current.DisplayAlert("Order Selected", $"{summaryOrder.Count}", "OK");
}

完成結果如下：

由於目前還沒有設可供轉跳的下一個畫面，先暫時在此 Command 當中撰寫 DisplayAlert 的執行，以便驗證 Command 的執行結果！

Windows、Android、iOS 各平台執行結果如下：

接著在 Pages 資料夾下新增一個 MAUI 最基本的範本 XAML 頁面，叫做 OrderOwnersPage，其中的 XAML 標記如下：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="TopStoreApp.Pages.OrderOwnersPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ContentPage.Content>
        <VerticalStackLayout>
            <Label Text="Order Owners" FontSize="Large" />
        </VerticalStackLayout>
    </ContentPage.Content>
</ContentPage>

完成結果如下：

再打開 AppShell.xaml.cs 在原本的建構式中繼續註冊此頁面 Routing：

Routing.RegisterRoute("Orders/OrderOwners", typeof(Pages.OrderOwnersPage));

完成結果如下：

再次回到先前撰寫 Command 的 OrdersPageVeiwModel.cs 當中，並把原本 Command 所執行的程式碼註解，換上下列程式碼：

await Shell.Current.GoToAsync($"//Orders/OrderOwners?orderDate={summaryOrder.Summary.Date}");

完成結果如下：

各平台測試執行結果如下：
Windows:

Android:

iOS:

眼尖的人應該就有發現，這邊執行的結果並沒有呈現出在 SelectCommand 當中所傳遞的 orderData 參數資料，這部分就要留待下回再繼續完成囉~~~