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

接著本 EP 持續再完成 OrderOwnersPage 與 OrderOwnerPageViewModel 的設計。

首先，在 ViewModels 資料夾當中再增加一個類別檔，並命名為 OrderOwnerPageViewModel 後，再其中完成以下程式碼：

using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.ObjectModel;

namespace TopStoreApp.ViewModels;

[QueryProperty(nameof(OrderDateQueryString), "orderDate")]
public partial class OrderOwnersPageViewModel : BasePageViewModel
{
    [ObservableProperty]
    private ObservableCollection<Models.OrderOwner> _orderOwners;

    [ObservableProperty]
    private DateTime _orderDate;

    public string OrderDateQueryString
    {
        set
        {
            OrderDate = DateTime.Parse(value);
            
            OrderOwners = App.DataService.GetOrderOwners(OrderDate);
        }
    }
}

完成結果如下：

由於要從 OrdersPage 轉跳過來 OrderOwnersPage 時有傳遞一個參數值要作為查詢使用，所以在這邊設計了

[QueryProperty(nameof(OrderDateQueryString), "orderDate")]

讓此 OrderOwnersPageViewModel 來將此資料接收下來，並在 OrderDateQueryString 屬性的 Set 當中去設定 OrderDate 與查出 OrderOwners。

接著再打開 OrderOwnersPage.xaml 會看到先前在 EP05 所撰寫的 XAML：

在 ContentPage 的標籤中，在增加幾個命名空間：

xmlns:models="clr-namespace:TopStoreApp.Models"
xmlns:viewmodels="clr-namespace:TopStoreApp.ViewModels"
x:DataType="viewmodels:OrderOwnersPageViewModel"

完成結果如下：

再把原本其中在 VerticalStackLayout 標記當中的 Label 標記換成下列 XAML：

<CollectionView
    ItemSizingStrategy="MeasureFirstItem"
    ItemsSource="{Binding OrderOwners}"
    SelectionMode="Single">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="models:OrderOwner">
            <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 Owner}"
                    VerticalOptions="CenterAndExpand"
                    VerticalTextAlignment="Center" />
                <Button
                    Grid.Column="2"
                    Margin="10,6"
                    BackgroundColor="Cyan"
                    HorizontalOptions="CenterAndExpand"
                    Text="&gt;&gt;"
                    TextColor="Chocolate"
                    VerticalOptions="Center" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

完成結果如下：

回到原本加入 XAML 命名空間的部分，再幫原本的 ContentPage 做個 Title 屬性的設定：

Title="{Binding OrderDate, StringFormat='{0: yyyy/MM/dd (ddd)}'}"

完成結果如下：

繼續開啟 OrderOwnersPage.xaml.cs 設計一下接受 ViewModel 的建構方法：

public OrderOwnersPage(ViewModels.OrderOwnersPageViewModel orderOwnersPageViewModel) : this()
{
    BindingContext = orderOwnersPageViewModel;
}

完成結果如下：

注意到上圖綠框的部分，原本的不傳參數建構方法的修飾詞就改為 private。

最後再次打開 MauiProgram.cs，找到 RegisterAppViewsAndViewModels 方法，加入下列程式碼：

builder.Services.AddTransient<Pages.OrderOwnersPage>();
builder.Services.AddTransient<ViewModels.OrderOwnersPageViewModel>();

完成結果如下：

以上都完成後，就可以試著執行此專案 App 看看囉~~~

Windows:

Android:

iOS: