.Net Maui Bind ViewModel свойства пользовательского элемента управления

Question

Я столкнулся с проблемой при создании многоразового пользовательского элемента управления с пакетом CommunityToolkit.Mvvm.

У меня есть такая страница:

      <?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"
             xmlns:viewModels="clr-namespace:XYZ.ViewModels"
             xmlns:cards="clr-namespace:XYZ.Cards"
             x:Class="XYZ.Pages.InboxPage"
             x:DataType="viewModels:InboxViewModel">
    <ScrollView>
        <VerticalStackLayout Margin="15">
            <CollectionView ItemsSource="{Binding Documents}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <cards:DocumentPreviewCard
                            DocId="{Binding Id}"
                            Name="{Binding Name}"
                            ThumbnailUri="{Binding ThumbnailUrl}"/>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Только с этой единственной строкой в ​​моем конструкторе в коде позади (внедряется viewModel):

      BindingContext = viewModel;

Эта ViewModel содержит список моделей (документы в приведенном выше xaml). Вызванный пользовательский элемент управления (DocumentPreviewCard) выглядит так:

XAML:

      <VerticalStackLayout
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewModels="clr-namespace:XYZ.ViewModels"
    x:Class="XYZ.Cards.DocumentPreviewCard"
    x:DataType="viewModels:DocumentPreviewViewModel"
    HeightRequest="270"
    WidthRequest="180"
    Margin="15">
    <Border>
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="10"/>
        </Border.StrokeShape>
        <Image x:Name="ImgThumbnail"
                   HorizontalOptions="Center"
                   VerticalOptions="Center">
            <Image.Source>
                <UriImageSource Uri="{Binding ThumbnailUri}" />
            </Image.Source>
        </Image>
    </Border>
    <Label HorizontalTextAlignment="Center" 
                   Text="{Binding Name}" />
</VerticalStackLayout>

Код позади:

      public partial class DocumentPreviewCard : VerticalStackLayout
{
    public DocumentPreviewCard()
    {
        BindingContext = new DocumentPreviewViewModel();
    }
}

ViewModel:

      public partial class DocumentPreviewViewModel : ObservableObject
{
    [ObservableProperty]
    private bool _isLocked;

    [ObservableProperty]
    private string? _name;

    [ObservableProperty]
    private Guid? _docId;

    [ObservableProperty]
    private string? _thumbnailUri;
}

К сожалению, я не могу получить доступ к следующим свойствам в xaml страницы: DocId, Name, ThumbnailUri.

Я получил сообщение об ошибке "Нет свойства, BindableProperty или события для "DocId" или несоответствие типа между значением и свойством" для каждого из требуемых свойств.

У кого-нибудь была такая же проблема раньше или пример пользовательских элементов управления с MVVM и .Net Maui?