使用 CollectionView 时在 .NET MAUI 中显示数据时出现问题

Question

我在 .NET MAUI 应用程序中显示数据时遇到困难。在我的 Feed 页面上，我使用 CollectionView 控件来显示 ReceiptsViewModel 类中的数据集合。我有一个 Receipt 模型，我希望数据与该模型关联并显示在我的 CollectionView 中。但是，尽管数据集合已正确填充并且我的 Model 和 ReceiptsViewModel 中的属性正确，但屏幕上没有显示任何内容。

饲料：

public partial class Feed : ContentPage
{
    public Feed(ReceiptsViewModel rvm)
    {
        InitializeComponent();
        BindingContext = rvm;
    }
}

收据型号：

namespace Messenger.Model
{
    public class Receipt
    {
        public string Name { get; set; }
        public string Photo_URL { get; set; }
        public string Description { get; set; }
        public Dictionary<string, object> Ingredients { get; set; }
        public string Cooking { get; set; }
        public string Author { get; set; }

        public Receipt(string name, string photo_URL, string description, Dictionary<string, object> ingredients, string cooking, string author)
        {
            Name = name;
            Photo_URL = photo_URL;
            Description = description;
            Ingredients = ingredients;
            Cooking = cooking;
            Author = author;
        }
    }
}

收据视图模型：

namespace Messenger.ViewModel
{
    public partial class ReceiptsViewModel : ObservableObject
    {
        [ObservableProperty]
        ObservableCollection<Receipt> receipts;

        [ObservableProperty]
        string receipt_name = "";

        [ObservableProperty]
        string receipt_description = "";

        [ObservableProperty]
        string receipt_author = "";

        [ObservableProperty]
        string receipt_cooking = "";

        [ObservableProperty]
        string receipt_photo = "";

        [ObservableProperty]
        Dictionary<string, object> recepient_ingredients;

        public ReceiptsViewModel()
        {
            Receipts = new ObservableCollection<Receipt>();
        }

        [RelayCommand]
        void Add()
        {
            var receipt = new Receipt(Receipt_name, Receipt_photo, Receipt_description, Recepient_ingredients, Receipt_cooking, Receipt_author);

            Receipts.Add(receipt);
        }
    }
}

Feed.xaml：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Messenger.Feed"
             Title="Feed"
             xmlns:viewmodel ="clr-namespace:Messenger.ViewModel"
             x:DataType="viewmodel:ReceiptsViewModel">

    <Grid RowDefinitions="100, Auto, *"
          ColumnDefinitions=".75*, .25*">
        <Label Grid.ColumnSpan="2"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"
               Text="Receipts"
               FontSize="40"
               BackgroundColor="AntiqueWhite"
               x:Name="l"/>
        <Button Text="+"
                HorizontalOptions="End"
                VerticalOptions="Center"
                BackgroundColor="Black"
                Grid.Row="0"
                Margin="15"
                Grid.ColumnSpan="2"
                Command="{Binding AddCommand}"/>
        <CollectionView Grid.Row="2" Grid.ColumnSpan="2" Margin="0,15,0,0"
                        ItemsSource="{Binding Receipts}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="0,5">
                        <Frame Margin="3,0,5,3" BorderColor="Black">
                            <HorizontalStackLayout>
                                <Image MaximumHeightRequest="100" MaximumWidthRequest="100" Source="dish.jpg"/>
                                <VerticalStackLayout Margin="20,0,0,0" VerticalOptions="Center">
                                    <Label Text="{Binding Receipt_name}" VerticalTextAlignment="Center" LineBreakMode="WordWrap" FontAttributes="Bold"/>
                                    <Label Text="{Binding Receipt_description}" TextColor="LightSlateGray" LineBreakMode="WordWrap"/>
                                </VerticalStackLayout>
                            </HorizontalStackLayout>
                        </Frame>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

（无）结果图： [

我预计我将正确显示 ObservableCollection 收据的数据

我尝试收集姓名等，但没有任何帮助，我经验不足，所以我想在这里问这个问题。

Answer 1

CollectionView.ItemTemplate 的绑定上下文是ItemSource 的项目。因此，您应该绑定 Receipt 类的 属性，而不是 ViewModel 的属性。如：

<Label Text="{Binding Name}" VerticalTextAlignment="Center" LineBreakMode="WordWrap" FontAttributes="Bold"/>
<Label Text="{Binding Description}" TextColor="LightSlateGray" LineBreakMode="WordWrap"/>

更多信息可以参考官方collectionview样例。