.NET MAUI Binding: Property not found

Question

I am making a app using .Net MAUI in VS 22, I set up a simple page in which I show a list of items but when I try to run the code I get this error:

Severity Code Description Project File Line Suppression State Details Error (active) XFC0045 Binding: Property "DodatniNaziv" not found on "ProjectName .ViewModels.ParkingSistemiViewModel". ProjectName (net8.0-windows10.0.19041.0) C:***\repos\ProjectName \ProjectName \Views\MainDashboard.xaml 64

I've been struggling for hours to figure it out but I just couldn't understand what the problem is, if anyone can help it would be greatly appreciated

This is my code: 1.) XAML Page

<?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:ProjectName.ViewModels"
             x:Class="ProjectName.Views.MainDashboard"
             xmlns:models="ProjectName.Models"
             x:DataType="viewModels:ParkingSistemiViewModel"
             Shell.NavBarIsVisible="false">
            
    <ContentPage.BindingContext>
        <viewModels:ParkingSistemiViewModel />
    </ContentPage.BindingContext>

    <ScrollView>
        <StackLayout>
            <!-- Header Stranice -->
            <StackLayout BackgroundColor="#744fa0" Padding="20,40,20,20">
                <Button x:Name="odjavaBtn"
                        HorizontalOptions ="End"
                        WidthRequest="100"
                        FontSize="16"
                        FontAttributes="Bold"
                        Text="ODJAVA"
                        FontFamily="Bahnschrift"
                        Clicked="OnOdjavaClicked"
                        Margin="0,0,0,20"/>
                <Label Text="PAMETNI PARKING"
                       FontSize="25"
                       FontAttributes="Bold"
                       FontFamily="Bahnschrift"
                       VerticalOptions="Center" 
                       HorizontalOptions="Start" FontAutoScalingEnabled="False" />
                <Label Text="Pregled dostupnih sistema"
                       VerticalOptions="Center" 
                       FontFamily="Bahnschrift"
                       HorizontalOptions="Start" />
            </StackLayout>
        
            <!-- Body Stranice (Lista svih Sistema)-->
            <CollectionView x:Name="listaParkingSistema" SelectionMode="Single" SelectionChanged="OpenElement">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Border StrokeShape="RoundRectangle 20"
                                Padding="5"
                                Margin="20,5,20,0"
                                BackgroundColor="White">
                            <Grid BackgroundColor="White">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30"/>
                                    <RowDefinition Height="30"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="60"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="60"/>
                                </Grid.ColumnDefinitions>
                                <Image Source="parking.png"
                                       Grid.RowSpan="2"
                                       Grid.Column="0"
                                       HorizontalOptions="CenterAndExpand"
                                       VerticalOptions="CenterAndExpand"/>
                                <Label x:Name="Additional"
                                       Margin="10,0,0,0"
                                       Text="{Binding DodatniNaziv}"
                                       FontSize="15"
                                       FontFamily="Bahnschrift"
                                       HorizontalTextAlignment="Start"
                                       VerticalTextAlignment="Center"
                                       TextColor="#404040"
                                       Grid.Row="0"
                                       Grid.Column="1"/>
                                <Label x:Name="Title"
                                       Margin="10,0,0,0"
                                       Text="{Binding Naziv}"
                                       FontSize="20"
                                       FontFamily="Bahnschrift"
                                       FontAttributes="Bold"
                                       CharacterSpacing="1"
                                       HorizontalTextAlignment="Start"
                                       VerticalTextAlignment="Center"
                                       TextColor="#404040"
                                       Grid.Row="1"
                                       Grid.Column="1"/>
                                <Image x:Name="StatusBtn"
                                       Source="{Binding Connection}"
                                       Grid.RowSpan="2"
                                       Grid.Column="2"
                                       HorizontalOptions="CenterAndExpand"
                                       VerticalOptions="CenterAndExpand"/>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ScrollView>
</ContentPage>

2.) The CodeBehind:

namespace ProjectName.Views;
public partial class MainDashboard : ContentPage
{
    public MainDashboard()
    {
        InitializeComponent();
    
    }

    //Metoda koja odjavljuje korisnika sa aplikacije
    private async void OnOdjavaClicked(object sender, EventArgs e)
    {
        await Navigation.PopAsync();
    }

    //Metoda koja Vodi na sljedeci screen
    private async void OpenElement(object sender, SelectionChangedEventArgs e)
    {
        await Navigation.PushAsync(new ParkingSistemDashboard());

3.) the ViewModel Class

using ProjectName.Entities;
using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.ObjectModel;

namespace ProjectName.ViewModels
{
    class ParkingSistemiViewModel : ObservableObject
    {
        private ObservableCollection<ParkingSistemiModel> _parkingSitemi;

        public ObservableCollection<ParkingSistemiModel> ParkingSitemi
        {
            get => _parkingSitemi;
            set => SetProperty(ref _parkingSitemi, value);
        }

        public ParkingSistemiViewModel()
        {
            ParkingSitemi = new ObservableCollection<ParkingSistemiModel>
            {
                new ParkingSistemiModel{ParkingId = Guid.Parse("5177bbc1-c96a-473b-af8b-fc4a5bc7ed91"), Naziv = "Test Parking 1", DodatniNaziv = "Najbolji Parking mjkm", Ip = "8.8.8.8"},
                new ParkingSistemiModel{ParkingId = Guid.Parse("43cde37a-c097-4eee-b320-1a5edd30ffe8"), Naziv = "Test Parking 2", DodatniNaziv = "Najbolji Parking mjkm", Ip = "8.8.8.8"},
                new ParkingSistemiModel{ParkingId = Guid.Parse("810c76c7-094f-4d92-8c31-ec9a98415678"), Naziv = "Test Parking 3", DodatniNaziv = "Najbolji Parking mjkm", Ip = "8.8.8.8"},
                new ParkingSistemiModel{ParkingId = Guid.Parse("276431a4-6f70-4b64-9520-fd42110a790c"), Naziv = "Test Parking 4", DodatniNaziv = "Najbolji Parking mjkm", Ip = "8.8.8.8"},
                new ParkingSistemiModel{ParkingId = Guid.Parse("1debd0c6-0fb0-4bc7-b324-5b15ad185b40"), Naziv = "Test Parking 5", DodatniNaziv = "Najbolji Parking mjkm", Ip = "0.0.0.0"},
                new ParkingSistemiModel{ParkingId = Guid.Parse("11a58136-2058-4194-8e48-c3e64de90088"), Naziv = "Test Parking 6", DodatniNaziv = "Najbolji Parking mjkm", Ip = "8.8.8.8"},
                new ParkingSistemiModel{ParkingId = Guid.Parse("14f1e1fb-db63-4b8d-9601-f99988890467"), Naziv = "Test Parking 7", DodatniNaziv = "Najbolji Parking mjkm", Ip = "8.8.8.8"},
                new ParkingSistemiModel{ParkingId = Guid.Parse("8a6d818e-8839-43a9-9bed-e0afae0c38c1"), Naziv = "Test Parking 8", DodatniNaziv = "Najbolji Parking mjkm", Ip = "8.8.8.8"},
                new ParkingSistemiModel{ParkingId = Guid.Parse("56b610e4-bb71-49b8-b0f7-444a6c6b2f53"), Naziv = "Test Parking 9", DodatniNaziv = "Najbolji Parking mjkm", Ip = "8.8.8.8"},
            };

        }
    }
}

4.) The Model Class

using System.Net.NetworkInformation;

namespace ProjectName.Entities
{
    public class ParkingSistemiModel
    {
        public Guid ParkingId { get; set; }
        public string Naziv { get; set; }
        public string DodatniNaziv { get; set; }
        public string Ip { get; set; }
        public string Connection { get; private set; }


        public ParkingSistemiModel()
        {
            Connection = CheckConnection();
        }

        //Method that is used to check the connection to the server
        public string CheckConnection()
        {
            if (string.IsNullOrWhiteSpace(Ip))
            {
                return "cancel.png";
            }

            using (Ping ping = new Ping())
            {
                try
                {
                    PingReply reply = ping.Send(Ip);
                    return reply.Status == IPStatus.Success
                        ? "checked.png"
                        : "cancel.png";
                }
                catch
                {
                    return "cancel.png";
                }
            }
        }
    }
}

Honeslty dont know where to start

Answer 1

1. If you are not going to add/remove items dynamically, you can just do this:

   [ObservableProperty]
   List<ParkingSistemiModel> _parkingSitemi;
   

(This will auto-generate ParkingSitemi, that you can reassign)

2. In the XAML of your page, where you define your CollectionView , add ItemsSource={Binding ParkingSitemi}.

(This tells your collection view to display this list)

3. In your DataTemplate row, add x:DataType="ParkingSistemiModel"

(This tells that each "row" of the collection view, is displaying object of type ParkingSistemiModel)

4. ViewModel is constructed together with your page. You populate the list in the constructor of the viewmodel, and this means it gets populated in the constructor of the page. Right now there is no problem. But if you start to load this list from HTTP request - this will not be ok.

You should do this in page event. My understanding is that the general consensus is, that this is the "OnNavigatedTo" event. But other events of the lifecycle of the page are also acceptable. (In a way that they will not cause the same problems, that heavy operations during page construction cause)