How to display a list of class objects in a Collection View?

Question

I want to display a list (observable collection) of BleDevice type in my view. I'm using mvvm pattern in .net maui (.net 7).

Model:

public class BleDevice
    {
        public BleDevice(){}
        public BleDevice(string name, string mac) 
        {
            Name = name;
            MacAddress = mac;
        }
        public string Name {  get; set; }
        public string MacAddress { get; set; }
    }

ViewModel:

public partial class MainViewModel: ObservableObject
    {
        
        public MainViewModel()
        {
            devices = new ObservableCollection<BleDevice>();
            devices.Add(new BleDevice("Mystronics Winder", "00:00:00:00:00"));
            devices.Add(new BleDevice("Living Room TV", "25:e7:aa:05:84"));
        }

        [ObservableProperty]
        ObservableCollection<BleDevice> devices;
    }

View(xaml): (Edited)

<?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="MauiApp2.MainPage"
             xmlns:viewmodel="clr-namespace:MauiApp2.ViewModel"
             xmlns:model="clr-namespace:MauiApp2.Model"
             x:DataType="viewmodel:MainViewModel">

    <VerticalStackLayout>
        <CollectionView ItemsSource="{Binding Devices}">
            <CollectionView.ItemTemplate>
                <DataTemplate  x:DataType="{model:BleDevice}">
                    <Grid>
                        <Label Text="{Binding Name}"/>
                        <Label Text="{Binding MacAddress}"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
</ContentPage>

Error: XFC0045 Binding: Property "Name" not found on "MauiApp2.ViewModel.MainViewModel". MauiApp2 \source\repos\MauiApp2\MauiApp2\View\MainPage.xaml

Why it does recognize the "{Binding Devices}" but not "{Binding Name}" and "{Binding MacAddress}"?

Answer 1

ViewModel Remove the [ObservableProperty] attribute and change to this:

public partial class MainViewModel : ObservableObject
    {
        public MainViewModel()
        {
            Devices = new ObservableCollection<BleDevice>();
            Devices.Add(new BleDevice("Mystronics Winder", "00:00:00:00:00"));
            Devices.Add(new BleDevice("Living Room TV", "25:e7:aa:05:84"));
        }

      public ObservableCollection<BleDevice> Devices { get; set; }
    }

View(xaml) Remove the x:DataType="xxx":

<?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="MauiApp2.MainPage"
             xmlns:viewmodel="clr-namespace:MauiApp2.ViewModel"
             xmlns:model="clr-namespace:MauiApp2.Model"
             >
    <VerticalStackLayout>
        <CollectionView ItemsSource="{Binding Devices}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Name}"/>
                        <Label Text="{Binding MacAddress}"/>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
</ContentPage>