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

緊接著本 EP 就延續上回提到要設計 OrderPages 的畫面與其 ViewModel 的部分！

首先，先透過 Visual Studio 的方案總管來在 ViewModels 資料夾中 新增項目 增加一個 OrdersPageViewModel.cs 的程式碼檔案：

並把當中的程式碼替換成：

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

namespace TopStoreApp.ViewModels;
    
public partial class OrdersPageViewModel : BasePageViewModel
{
    [ObservableProperty]
    private ObservableCollection<Models.SummaryOrder> _summaryOrders;
}

結果如下圖：

完成後，找到 Pages 底下的 OrderPage.xaml 後，在原本 ContentPage 當中所定義的 XAML 命名空間後面增加新的命名空間：

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

結果如下圖：

接著將原本 ContentPage.Content 標記內部的內容替換成以下 XAML：

<VerticalStackLayout>
    <CollectionView
        ItemSizingStrategy="MeasureFirstItem"
        ItemsSource="{Binding SummaryOrders}"
        SelectionMode="Single">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:SummaryOrder">
                <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 Summary, StringFormat='{0: yyyy/MM/dd (ddd)}'}"
                        VerticalOptions="CenterAndExpand"
                        VerticalTextAlignment="Center" />
                    <Label
                        Margin="6,0"
                        Grid.Column="1"
                        FontSize="Medium"
                        HorizontalOptions="FillAndExpand"
                        HorizontalTextAlignment="End"
                        VerticalOptions="CenterAndExpand"
                        VerticalTextAlignment="Center">
                        <Label.FormattedText>
                            <FormattedString>
                                <FormattedString.Spans>
                                    <Span FontAttributes="Bold" Text="{Binding Count}" />
                                    <Span Text="筆" />
                                </FormattedString.Spans>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Button
                        Grid.Column="2"
                        Margin="10,6"
                        BackgroundColor="Cyan"
                        HorizontalOptions="CenterAndExpand"
                        Text="&gt;&gt;"
                        TextColor="Chocolate"
                        VerticalOptions="Center" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</VerticalStackLayout>

結果如下圖：

在其中比較特殊的地方大概是 Label 的 Text 所繫結到的內容資料，由於在設計 SummaryOrder 這個 Model 的類別時，其 Summary 屬性是宣告為 DateTime 的型別，為了在 UI 呈現時只有 日期 的顯示，就需要透過 XAML 繫結呈現其值內容時做 StringFormat 的處理：

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

而上述撰寫所看到在列表當中呈現的效果會是如下概念：

有關上述 StringFormat 與 DateTime 撰寫處理可參考下列連結了解更多：

1. Microsoft Learn: BindingBase.StringFormat Property
2. Microsoft Learn: Standard date and time format strings
3. 博客园: WPF中Binding使用StringFormat格式化字符串方法

後面就要針對 OrdersPage 類別撰寫符合 Maui 的 Builder 建立運用的程式，才能正確地把 ViewModel 跟 Page 結合起來囉，那就下回見~~~