MAUI collection of class properties not binding properly to list view

Question

1.00/5 (1 vote)

See more:

hi, now i am trying to bind collection of class properties to list view. facing same same issue again, code runs ok but nothing displays on screen. any help will be deeply appreciated.

What I have tried:

C#

using System.Collections.ObjectModel;
using System.Reflection.Metadata.Ecma335;
using System.Security.Cryptography.X509Certificates;

namespace MauiApp12;
public partial class MainPage : ContentPage
{
    public class contacts
    {
        //https://stackoverflow.com/questions/11317587/return-a-string-from-a-method-in-c-sharp
        public string FirstName { get; set; }
    }
    //public contacts x = new contacts() { FirstName="what is your name"};
    public ObservableCollection<contacts> x { get; set; } = new ObservableCollection<contacts> { 
    new contacts(){FirstName="name1"},
    new contacts(){FirstName="name2"},
    new contacts(){FirstName="name3"},
    new contacts(){FirstName="name4"},
    new contacts(){FirstName="name5"}
    };
    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
}
    private async void OnCounterClicked(object sender, EventArgs e)
    {

        //await DisplayAlert("alert",x.fullNameMethod(), "ok");
        lv.SetBinding(ItemsView.ItemsSourceProperty, "FirstName");
    }
    }

XAML

<?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="MauiApp12.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">
            <ListView x:Name="lv" ItemsSource="{Binding x}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid Padding="10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Label Grid.Column="1"
                           Text="{Binding FirstName}"
                           FontAttributes="Bold" />
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Posted 5-Jun-23 6:44am

suhail malik 2023

Updated 5-Jun-23 8:57am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Accepted Answer · 2023-06-05T08:57:00

Thre links provided in the previous answer contain the information to answer this question. Also, James has a great set of YT videos dedicated to MAUI. I highly recommend that you read the material and watch his videos: .NET MAUI Tutorial for Beginners - Build iOS, Android, macOS, & Windows Apps with C# & Visual Studio - YouTube[^]

However, here is an example of what you are trying to do:

1. Code-Behind - same as previous example, however using a collection of objects:

C#

public partial class MainPage : ContentPage
{
	int count = 0;

	public MainPage()
	{
		InitializeComponent();
        BindingContext = this;
    }

    public ObservableCollection<Person> Names { get; set; } = new ObservableCollection<Person>
    {
        new Person { FirstName = "Freddie", LastName = "Kruger" },
        new Person { FirstName = "Jason", LastName = "Voorhees" },
        new Person { FirstName = "Norman", LastName = "Bates" },
        new Person { FirstName = "Hannibal", LastName = "Lecter" },
        new Person { FirstName = "Damien", LastName = "Thorn" },
    };
}

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

2. The XAML:

XML

<?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="MauiApp1.MainPage">

    <ListView ItemsSource="{Binding Names}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding FirstName}"
                               Grid.Column="0"/>
                        <Label Text="{Binding LastName}"
                               Grid.Column="1"
                               Padding="10,0"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>