.Net MAUI view can not find observble collection properties

Question

I have a xaml view with a CollectionView. The ItemSource is set to a list initiated in the xaml.cs class. The xaml view can not find the binding property "Id". If I remove id from the model I get the same error with "ListName".

Binding: Property "Id" not found on "TestApp.Shared.Items.ViewModels.MainViewModel".

I have searched around and found this. But the fix does not solve my problem. Does anybody have an idea what the problem might be? I am using:

<PackageReference Include="CommunityToolkit.Mvvm" Version="8.0.0"/>

The code:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestApp.Shared.Items.MainPage"
             xmlns:viewmodel="clr-namespace:TestApp.Shared.Items.ViewModels"
             x:DataType="viewmodel:MainViewModel">


     <CollectionView
        x:Name="CollectionOfListNames"
        ItemsSource="{Binding ListNames}">

        <CollectionView.ItemTemplate>

            <DataTemplate>

                <Grid
                    x:DataType="viewmodel:MainViewModel"
                    Padding="0,5">

                    <Grid x:DataType="viewmodel:ListModel" ColumnDefinitions="2" Padding="0,5">

                        <Label Grid.Column="0"  Text="{Binding Id}" />
                        <Label Grid.Column="1"  Text="{Binding ListName}" />
                    </Grid>
                </Grid>

            </DataTemplate>

        </CollectionView.ItemTemplate>

    </CollectionView>

</ContentPage>

    namespace TestApp.Shared.Items.ViewModels
    {
        public partial class MainViewModel : ObservableObject
        {
    
            [ObservableProperty]
            ObservableCollection<ListModel> listNames;
    
            public MainViewModel()
            {
                ListNames = new ObservableCollection<ListModel>()
                {
                    new ListModel(){ Id = 0, ListName = "Matlista"},
                    new ListModel(){ Id = 1, ListName = "Räkningar"},
                    new ListModel(){ Id = 2, ListName = "Att köpa idag"}
                };
            }
        }
    }

namespace TestApp.Shared.Items.Models
{
    public partial class ListModel : ObservableObject
    {
        private int id;

        public int Id
        {
            get => id;
            set => SetProperty(ref id, value);
        }

        private string listName;

        public string ListName
        {
            get => listName;
            set => SetProperty(ref listName, value);
        }
    }
}

Answer 1

You will have to set the x:DataType="viewmodel:MainViewModel" also on the Grid inside of the DataTemplate but now for the ListModel object.

So:

    <DataTemplate>
        <Grid x:DataType="model:ListModel" ColumnDefinitions="2" Padding="0,5">
            <Label Grid.Column="0"  Text="{Binding Id}" />
            <Label Grid.Column="1"  Text="{Binding ListName}" />
         </Grid>
    </DataTemplate>

Note that the ListModel is in a different namespace, so add the right xmlns accordingly.

Right now XAML Compilation will think that all the children are using the MainViewModel and thus it (rightfully) can't find those properties.

Inside of a DataTemplate the scope changes, in your case to ListModel, we need to let XAML compilation know.