MAUI class not binding to listview

Question

1.00/5 (2 votes)

See more:

hi, now i am trying to bind class property to listview, code is running fine but nothin showing on screen. any help will be deeply appreciated thanks.

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> contact { get; set; } = new ObservableCollection<contacts>("my name is mehdi") { new contacts("what is your name") {FirstName="my first name is mehdi"; } }; 
    public MainPage()
    {
        InitializeComponent();
    }
    private async void OnCounterClicked(object sender, EventArgs e)
    {

        //await DisplayAlert("alert",x.fullNameMethod(), "ok");
        //lv.ItemsSource = x;
        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 contact}">
                <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 4-Jun-23 0:42am

suhail malik 2023

Updated 5-Jun-23 0:47am

v3

Add a Solution

Comments

Graeme_Grant 4-Jun-23 7:10am

Where's the view that is meant to bind to the collection? Please update your question with the missing xaml. Chances are is that you have not correctly set your DataContext.

suhail malik 2023 4-Jun-23 7:33am

<listview x:name="lv" itemssource="{Binding variables}">
IN FIRST ATTEMPT I TRIED WITH XAML WITH SAME RESULT. NOW I AM TRYING TO CREATE LIST VIEW ON RUNTIME IN CODEBEHIND BOTH ATTEMPTS ARE GIVING ME THE SAME RESULT NO DATA ON SCREEN

Graeme_Grant 4-Jun-23 7:47am

Do not use ALL CAPS ... it is called SCREAMING.

Please update the question with the XAML as requested as we can not see your screen from here.

suhail malik 2023 4-Jun-23 7:47am

I HAVE FIGURED IT OUT WITH XAML, NOW HOW CAN I ADD LIST ON RUNTIME AND BIND DATA TO TO LIST VIEW

Richard MacCutchan 4-Jun-23 8:03am

Stop shouting! Writing in all capitals is considered shouting on the internet, and makes it appear that you are demanding special service.

suhail malik 2023 4-Jun-23 8:08am

sorry, i did not know. it did not noticed my caps keys.

Richard MacCutchan 4-Jun-23 8:12am

It is always a good idea to re-read your message before you press Submit. Also, when someone asks you to update your question, please use the Improve question link above, and add the details to your original post.

[no name] 4-Jun-23 11:36am

Your "ListView" is not attached to the "visual tree". At a minimum, it would be a child of the MainWindow's "default" Grid's .Children.

Graeme_Grant 5-Jun-23 1:20am

I notice that you have bumped up your question. If you want help, then please update your question as required. What you have posted does not show any issues.

suhail malik 2023 5-Jun-23 6:40am

but on my side it is not showing any thing

Graeme_Grant 5-Jun-23 6:41am

Don't forget to delete the other question.

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-05T00:47:00

The code-behind looks different to the other version of this question.

In the XAML, you bind the variables property to the ListView control however the DataContext is not set.

Do the following in the Code-Behind:

C#

public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); DataContext = this; } }

Now the Binding data context is set, the ListView binding will work. (note: this works for WPF/UWP apps - see below for MAUI)

Also, All public properties should me camel case:

C#

public ObservableCollection<MyVariables> Variables { get; set; }
    = new ObservableCollection<MyVariables>()
    {
        new MyVariables("hello sir how are you")
    };

UPDATE

For Maui, We need to use BindingContext. Here is a working example for you.

1. Start a new project.
2. MainPage.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 Items}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Label Text="{Binding .}"/>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

3. Code-Behind - MainPage.xaml.cs:

C#

public partial class MainPage : ContentPage
{
	public MainPage()
	{
		InitializeComponent();
        BindingContext = this;
    }

    public ObservableCollection<string> Items { get; set; } = new ObservableCollection<string>
    {
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4",
        "Item 5",
    };
}

Now run and you will see your list.

For more on Data Binding: .Net MAUI Data binding - Microsoft Learn[^]
For more on the ListView: .Net MAUI Controls - ListView - Microsoft Learn[^]