How to get properties from a list of objects binded to a CarouselView in .NET MAUI

I have a list of objects binded to a CarouselView. Inside the CarouselView is a simple DataTemplate containing some labels that are supposed to be binded to the properties of the object. However the properties are not recognized.

I am using CommunityToolKit.Mvvm for a simple MVVM solution.

The error I am getting is in the View on Line 16:

Error	XFC0045	Binding: Property "Name" not found on "MauiTest.ViewModels.MainViewModel".

Line that the error originates from:

<Label Text="{Binding Path=Name}" />

View:

<?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="MauiTest.MainPage"
             xmlns:vm="clr-namespace:MauiTest.ViewModels"
             x:DataType="vm:MainViewModel">

  <StackLayout>
    
    <CarouselView BindingContext="{Binding Models}" >
      
      <CarouselView.ItemTemplate> 
        <DataTemplate>
          <ContentView>
            <StackLayout >
              <Label Text="{Binding Path=Name}" />
              <Label Text="{Binding Path=Description}" />
            </StackLayout>
          </ContentView>
        </DataTemplate>
      </CarouselView.ItemTemplate>
      
    </CarouselView>
    
  </StackLayout>
  
</ContentPage>

Model:

public partial class TestModel : ObservableObject
{
  [ObservableProperty]
  private string m_name;

  [ObservableProperty]
  private string m_description;

  public TestModel(string name, string description) 
  {
    Name = name;
    Description = description;
  }
}

ViewModel:

public partial class MainViewModel : ObservableObject
{
  [ObservableProperty]
  private List<TestModel> m_models;
  public MainViewModel() 
  {
    Models = new List<TestModel>
    {
      new TestModel("name1", "test1"),                                   
      new TestModel("name2", "test2")
    };
  }
}

You could try the following MVVM way:

In xaml, you could set the ItemsSource property to Models

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="GetProperties75380426.MainPage"
         xmlns:vm="clr-namespace:GetProperties75380426.ViewModel"
         >


<StackLayout>
    <CarouselView ItemsSource="{Binding Models}"  >     
        <CarouselView.ItemTemplate> 
            <DataTemplate>
            <ContentView>
                <StackLayout >
                    <Label Text="{Binding Path=Name}" />
                    <Label Text="{Binding Path=Description}" />
                </StackLayout>
            </ContentView>
            </DataTemplate>
         </CarouselView.ItemTemplate> 
     </CarouselView>
</StackLayout>

In .cs file, set the BindingContext of the page, that is the MainViewModel

public MainPage()
{
	InitializeComponent();
	this.BindingContext = new MainViewModel();
}

For more info, you could refer to Populate a CarouselView with data.

Hope it works for you.

The error message says that it is trying to find property Name on MainViewModel.

The reason it is looking there (instead of in TestModel), is this xaml:

x:DataType="vm:MainViewModel"

As soon as you add any x:DataType to a xaml file, you have to add the correct x:DataType, anywhere it changes.

There are two different ways you can fix:

• Either: remove all x:Datatypes from the xaml file.
• Or: add the missing x:Datatype:

<ContentView x:DataType="PutCorrectNamespaceHere.TestModel">

NOTE: Not tested. I'm not sure that is the correct line to put the missing x:DataType.