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

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>