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

接續前一篇，那就先來設計一下 OrderDetailsPage 的部分。

其本身在頁面雖然要呈現的是某筆訂單當中詳細的商品訂購資訊，但大體的呈現方式仍是跟 OrderOwnersPage 或 OrdersPage 差不多，仍都是可以利用 CollectionView 來作呈現即可(會改變是每個項目根據所繫結的物件，而進行不同內容的呈現)。

在 Pages 底下新增 OrderDetailsPage.xaml，並將其頁面的 XAML 改為如下：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="TopStoreApp.Pages.OrderDetailsPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:models="clr-namespace:TopStoreApp.Models"
    xmlns:viewmodels="clr-namespace:TopStoreApp.ViewModels"
    Title="{Binding OrderOwner}"
    x:DataType="viewmodels:OrderDetailsPageViewModel"
    Shell.TabBarIsVisible="False">
    <VerticalStackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            HorizontalTextAlignment="Center"
            Text="{Binding OrderDate}" />
        <CollectionView
            ItemSizingStrategy="MeasureFirstItem"
            ItemsSource="{Binding OrderDetailDisplays}"
            SelectionMode="Single">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:OrderDetailDisplay">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3*" />
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Label
                            Grid.Column="0"
                            FontSize="Large"
                            HorizontalOptions="FillAndExpand"
                            HorizontalTextAlignment="Start"
                            LineBreakMode="HeadTruncation"
                            Text="{Binding ProductName}"
                            VerticalOptions="CenterAndExpand"
                            VerticalTextAlignment="Center" />
                        <Button
                            Grid.Column="2"
                            Margin="10,6"
                            BackgroundColor="Cyan"
                            Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:OrderDetailsPageViewModel}}, Path=SelectCommand}"
                            CommandParameter="{Binding Source={RelativeSource Self}, Path=BindingContext}"
                            HorizontalOptions="CenterAndExpand"
                            Text="&gt;&gt;"
                            TextColor="Chocolate"
                            VerticalOptions="Center" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
</ContentPage>

完成結果如下圖：

其中黃框的部分是為了繫結在 OrderDetailsPageViewModel 當中所設計的 OrderOwner、OrderDate、OrderDetailDisplays 屬性所做的處理。

而在 Button 的部分，就直接將 Command 與 CommandParameter 的撰寫一次完成，沒有像前面的頁面在設計時拆分到不同的 EP 去調整的。

完成後，接續調整一下 OrderDetailsPage.xaml.cs，跟前面的設計雷同要增添傳遞 ViewModel 的建構方法：

public OrderDetailsPage(ViewModels.OrderDetailsPageViewModel orderDetailsPageViewModel) : this()
{
    BindingContext = orderDetailsPageViewModel;
}

完成結果如下圖：

接著，開啟 AppShell.xaml.cs 在 AppShell 的建構式當中加入以下程式碼：

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

完成結果如下圖：

接著，開啟 MauiProgram.cs 在 RegisterAppViewsAndViewModels 方法當中加入以下程式碼：

builder.Services.AddTransient<Pages.OrderDetailsPage>();
builder.Services.AddTransient<ViewModels.OrderDetailsPageViewModel>();

完成結果如下圖：

如果一切順利完成的話，理應可以在訂單看到以下的頁面轉跳呈現效果：

那下一回就來設計一下 DataService 及其 MockData 應該要處理的資料環節吧~~~