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

如果眼尖的捧友會發現在 EP05 裡的訂單筆數跟 EP06 裡的訂單筆數有些出入：

EP05

EP06

如果還沒注意到的捧友，請注意一下 2023/08/04、2023/08/03 的訂單筆數，是否有些不同？

並不是因為有什麼改變在 EP06 裡沒有講解到，而最主要的是因為在本 EP 在 MockData 要製作假資料時，不用產生這麼多筆數的資料，因此就稍微調整了一下 2023/08/04、2023/08/03 的訂單筆數。

好的，緊接著就正式回到本 EP 要完成的主軸上，針對在 OrdersPage 點選進入到 OrderOwnersPage 後，要正確地呈現出 OrderOwner 的資訊。

從 Visual Studio 的方案總管當中找到 Models 資料夾，在其中增加 OrderOwners.cs 的 C# 程式檔案，其中所需撰寫的程式碼為以下：

using CommunityToolkit.Mvvm.ComponentModel;

namespace TopStoreApp.Models;

[INotifyPropertyChanged]
public partial class OrderOwner
{
    public string Owner { get; set; }

    public DateTime OrderDate { get; set; }
}

完成結果如下圖：

接著打開在 Services 資料夾下的 IDataService.cs 繼續再增加 GetOrderOwners 的介面方法：

ObservableCollection<Models.OrderOwner> GetOrderOwners(DateTime orderDate);

完成結果如下圖：

接著就先在先前有實作這個介面 IDataService 的兩個類別 MockData、DbService 完成這個方法的實作：

public ObservableCollection<Models.OrderOwner> GetOrderOwners(DateTime orderDate)
{
    throw new NotImplementedException();
}

DbService 完成結果如下圖：

MockData 完成結果如下圖：

接著持續在 MockData 當中來宣告 orderOwners 的集合：

private readonly ObservableCollection<Models.OrderOwner> orderOwners;

MockData 完成結果如下圖：

並在 MockData 建構式當中再增加 orderOwners 的集合物件資料：

orderOwners = new ObservableCollection<Models.OrderOwner> {
    new Models.OrderOwner
    {
        Owner = "Mandy Q",
        OrderDate = DateTime.Parse("2023/08/04")
    },
    new Models.OrderOwner
    {
        Owner = "James Tsai",
        OrderDate = DateTime.Parse("2023/08/03")
    },
    new Models.OrderOwner
    {
        Owner = "Da Wang",
        OrderDate = DateTime.Parse("2023/08/03")
    },
    new Models.OrderOwner
    {
        Owner = "Andy Kao",
        OrderDate = DateTime.Parse("2023/08/02")
    },
    new Models.OrderOwner
    {
        Owner = "John Chang",
        OrderDate = DateTime.Parse("2023/08/02")
    },
    new Models.OrderOwner
    {
        Owner = "Da Wang",
        OrderDate = DateTime.Parse("2023/08/02")
    },
    new Models.OrderOwner
    {
        Owner = "James Tsai",
        OrderDate = DateTime.Parse("2023/08/02")
    },
    new Models.OrderOwner
    {
        Owner = "Mandy Q",
        OrderDate = DateTime.Parse("2023/08/02")
    },
    new Models.OrderOwner
    {
        Owner = "Andy Kao",
        OrderDate = DateTime.Parse("2023/08/01")
    },
    new Models.OrderOwner
    {
        Owner = "John Chang",
        OrderDate = DateTime.Parse("2023/08/01")
    },
    new Models.OrderOwner
    {
        Owner = "Da Wang",
        OrderDate = DateTime.Parse("2023/08/01")
    },
    new Models.OrderOwner
    {
        Owner = "Andy Kao",
        OrderDate = DateTime.Parse("2023/07/31")
    },
    new Models.OrderOwner
    {
        Owner = "John Chang",
        OrderDate = DateTime.Parse("2023/07/31")
    },
    new Models.OrderOwner
    {
        Owner = "Da Wang",
        OrderDate = DateTime.Parse("2023/07/31")
    },
    new Models.OrderOwner
    {
        Owner = "Mandy Q",
        OrderDate = DateTime.Parse("2023/07/31")
    },
};

MockData 完成結果如下圖：

最後再回到剛剛建立的 GetOrderOwners 方法，把其中的程式碼換成以下程式：

return new ObservableCollection<Models.OrderOwner>(orderOwners.Where(item => item.OrderDate.Date == orderDate.Date));

MockData 完成結果如下圖：

完成到這邊，建置整個專案應該是可以正確編譯成功，有關畫面的修改就留待下一回來完成囉~~~