MAUI CollectionView 中的绑定问题：在 DataContext 中找不到属性“FileName”

Question

我正在开发 .NET MAUI 应用程序，并且在绑定 CollectionView 中的属性时遇到问题。具体来说，我正在尝试显示已上传文件及其文件名的列表，但遇到了 CollectionView 中无法识别 FileName 属性的问题。

以下是我的设置和我面临的问题的概述：

视图模型： 我有一个包含 ObservableCollection 的 UserProfileMauiViewModel：

using CommunityToolkit.Mvvm.Input;
using System.Collections.ObjectModel;
using webapplib.Client.Services;
using webapp.worktime.Client.ClientApi;
using webapp.worktime.Client.Services;
using webapp.worktime.Client.ViewModel;
using webapplib.Shared.Data;
using webapplib.Shared.Model;
using Deploy.WorkTime.MAUI.Services;



namespace Deploy.WorkTime.MAUI.ViewModel;
public partial class UserProfileMauiViewModel : UserProfileViewModel {

    private readonly IFileUploadService _fileUploadService;
    public ObservableCollection<FileData> UploadedFiles { get; }
    public UserProfileMauiViewModel(
        AppDataService appData,
        IExtraDataService extraData,
        IPageNavigator pageNavigator,
        WorkersClientApi workersClientApi,
        IStorageService storageService,
        SalaryService salaryService,
         IFileUploadService fileUploadService)
        : base(appData, extraData, pageNavigator, workersClientApi, storageService, salaryService) {
        _fileUploadService = fileUploadService;
        UploadedFiles = new ObservableCollection<FileData>();
        UploadFileCommand = new AsyncRelayCommand(UploadFileAsync);
        RemoveFileCommand = new RelayCommand<FileData?>(RemoveFile);

    }
    public IAsyncRelayCommand UploadFileCommand { get; }
    public IRelayCommand<FileData> RemoveFileCommand { get; }

    private async Task UploadFileAsync()
    {
        var (files, emptyFiles, bigFiles) = await _fileUploadService.UploadFilesAsync();
        foreach (var file in files)
        {
            UploadedFiles.Add(file);
            
        }
    }
    private void RemoveFile(FileData? file)
    {
        if (file != null)
        {
            UploadedFiles.Remove(file);
        }
    }

XAML 页面： 在我的 XAML 页面中，我尝试绑定到 UploadedFiles 集合：

<pages:WorkTimePage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
                    xmlns:material="http://schemas.enisn-projects.io/dotnet/maui/uraniumui/material"
                    xmlns:uranium="http://schemas.enisn-projects.io/dotnet/maui/uraniumui"
                    xmlns:cv="clr-namespace:Camera.MAUI;assembly=Camera.MAUI"
                    xmlns:pages="clr-namespace:Deploy.WorkTime.MAUI.Pages"
                    xmlns:local="clr-namespace:Deploy.WorkTime.MAUI.Views"
                    xmlns:viewmodel="clr-namespace:Deploy.WorkTime.MAUI.ViewModel"
                    xmlns:converters="clr-namespace:webapplib.MAUI.Converters;assembly=webapplib.MAUI"
                    xmlns:lang="clr-namespace:webapplib.Client.Resources;assembly=webapplib.Client"
                    x:Class="Deploy.WorkTime.MAUI.Pages.UserProfilePage"
                    x:TypeArguments="viewmodel:UserProfileMauiViewModel"
                    x:DataType="viewmodel:UserProfileMauiViewModel"
                    Title="{Binding Title}">

    <ContentPage.Resources>
        <ResourceDictionary>
            <!-- Define converters and styles here -->
            <converters:ColorConverter x:Key="ColorConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
     <VerticalStackLayout Padding="10" Spacing="10">
     <Grid Margin="20" Padding="10" BackgroundColor="{StaticResource SomeBackgroundColor}" ColumnSpacing="10" RowSpacing="10">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>

         <Button Text="Upload Identification File"
         Command="{Binding UploadFileCommand}" Grid.Row="0" Grid.Column="1" />

         <Label Text="Uploaded Files:" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"/>
         <CollectionView ItemsSource="{Binding UploadedFiles}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
             <CollectionView.ItemTemplate>
                 <DataTemplate>
                     <Grid Padding="5" ColumnSpacing="10">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>

                         <!-- Binding to FileData properties -->
                         <Label Text="{**Binding FileName**}" Grid.Column="0" VerticalOptions="Center"/>
                         <Button Text="Remove" 
         Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:UserProfileMauiViewModel}}, Path=RemoveFileCommand}" 
         CommandParameter="{Binding .}" 
         Grid.Column="1" />
                     </Grid>
                 </DataTemplate>
             </CollectionView.ItemTemplate>
         </CollectionView>
     </Grid>
 </VerticalStackLayout>

问题 在数据上下文中找不到 FileName 属性。我已验证 FileData 具有 FileName 属性，并且 UploadedFiles 集合已正确填充。

我认为问题来自于页面有 x:DataType="viewmodel:UserProfileMauiViewModel" 的想法

并且 collectionView 绑定到公共 ObservableCollection UploadedFiles

FileData 类继承自 FileBaseData 和 IFileData，这是 FileBaseData -

public record class FileBaseData : FileKeyData, IEntityKeyNameDataClient, IRemovedData {
    public string FileName { get; set; } = string.Empty;
    public DateTime CreationTime { get; set; }
    public bool IsRemoved { get; set; }
    public string GetEntityName() => FileName;
    public string GetDisplayName() => FileName;
    public FileBaseData() { }
    public FileBaseData(FileBaseData item) : base(item) {
        FileName = item.FileName;
        CreationTime = item.CreationTime;
        IsRemoved = item.IsRemoved;
    }
}

在寻找解决方案时，我看到有人建议添加，但没有成功。

我不知道这是否重要，但 UserProfileViewModel 是 Blazor 项目中的 viewModel，到目前为止我构建了一个 Maui 项目，它并没有打扰我。

Answer 1

将

x:DataType="models:FileData"

属性添加到

DataTemplate

内部的

CollectionView

。并确保将

xmlns:models="webapplib.Shared.Model"

（这里假设这是基于您提供的代码的正确命名空间，它可能会有所不同）到根页面。

在

DataTemplate

内部，范围从页面视图模型更改为仅用作

ItemsSource

的集合内的 1 个对象的模型。