Xamarin binding is not working to listview

Question

I tried binding some test data with my xamarin form page usint ListView to have it scrollable. However, I could not properly bind the data with the ListView because of some reason. I have the following ContentPage class:

public class transactionTest
{
    public string Type { get; set; }
    public decimal Amount { get; set; }
    public string User { get; set; }
    public DateTime Date { get; set; }
}

[DesignTimeVisible(false)]
public partial class MainPageUser : ContentPage
{
    public ObservableCollection<transactionTest> ObjectList { get; set; }

    public MainPageUser()
    {
        InitializeComponent();
        BindingContext = this;

        ObjectList = new ObservableCollection<transactionTest>()
        {
            new transactionTest()
            {
                Amount = 231,
                Date = DateTime.Parse("2020-06-12 15:22"),
                Type = "Send",
                User = "Test"
            },
            new transactionTest()
            {
                Amount = 112,
                Date = DateTime.Parse("2020-06-13 12:22"),
                Type = "Send",
                User = "Test"
            },
            new transactionTest()
            {
                Amount = 131,
                Date = DateTime.Parse("2020-06-11 13:22"),
                Type = "Receive",
                User = "Test"
            },
            new transactionTest()
            {
                Amount = 225,
                Date = DateTime.Parse("2020-06-14 10:22"),
                Type = "Send",
                User = "Test"
            },
            new transactionTest()
            {
                Amount = 201,
                Date = DateTime.Parse("2020-06-15 16:22"),
                Type = "Receive",
                User = "Test"
            }
        };
    }
}

I have the following XAML code with listview:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         x:Class="MyNameSpace.ViewPages.MainPageUser">
<StackLayout>
    <Grid VerticalOptions="CenterAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <ListView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" x:Name="listTransactions" VerticalScrollBarVisibility="Default" ItemsSource="{Binding ObjectList}">
            <ListView.Header>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" HorizontalTextAlignment="Center">Type</Label>
                    <Label Grid.Row="0" Grid.Column="1" HorizontalTextAlignment="Center">Amount</Label>
                    <Label Grid.Row="0" Grid.Column="2" HorizontalTextAlignment="Center">User</Label>
                    <Label Grid.Row="0" Grid.Column="3" HorizontalTextAlignment="Center">Date</Label>
                </Grid>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Row="0" Grid.Column="0" HorizontalTextAlignment="Center" Text="{Binding Type}"/>
                        <Label Grid.Row="0" Grid.Column="1" HorizontalTextAlignment="Center" Text="{Binding Amount}"/>
                        <Label Grid.Row="0" Grid.Column="2" HorizontalTextAlignment="Center" Text="{Binding User}"/>
                        <Label Grid.Row="0" Grid.Column="3" HorizontalTextAlignment="Center" Text="{Binding Date}"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</StackLayout>

I am unable to properly bind the data with XAML code. Can anyone help me what I am doing wrong?

Thanks!

You need to implement the INotifyProperyChanged interfave correctly otherwise the binding will not receive an notification that ObjectList has a new value (the creation of the list) — user10608418
alternately, you could assign BindingContext after you have initialized your data — Jason

Wendy Zang - MSFT Wendy Zang - MSFT · Accepted Answer · 2020-07-29T09:41:51

Based on my test, you need to put the Grid inside the ViewCell of DataTemplate. And like Jason said put the BindingContext after you have initialized your data.

Xaml:

 <ContentPage.Content>

    <StackLayout>
        <Grid VerticalOptions="CenterAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="2*" />
                <RowDefinition Height="2*" />
                <RowDefinition Height="2*" />
                <RowDefinition Height="2*" />
                <RowDefinition Height="2*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="2*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <ListView
                x:Name="listTransactions"
                Grid.Row="1"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                ItemsSource="{Binding ObjectList}"
                VerticalScrollBarVisibility="Default">
                <ListView.Header>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Label
                            Grid.Row="0"
                            Grid.Column="0"
                            HorizontalTextAlignment="Center">
                            Type
                        </Label>
                        <Label
                            Grid.Row="0"
                            Grid.Column="1"
                            HorizontalTextAlignment="Center">
                            Amount
                        </Label>
                        <Label
                            Grid.Row="0"
                            Grid.Column="2"
                            HorizontalTextAlignment="Center">
                            User
                        </Label>
                        <Label
                            Grid.Row="0"
                            Grid.Column="3"
                            HorizontalTextAlignment="Center">
                            Date
                        </Label>
                    </Grid>
                </ListView.Header>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                                <Label
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    HorizontalTextAlignment="Center"
                                    Text="{Binding Type}" />
                                <Label
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    HorizontalTextAlignment="Center"
                                    Text="{Binding Amount}" />
                                <Label
                                    Grid.Row="0"
                                    Grid.Column="2"
                                    HorizontalTextAlignment="Center"
                                    Text="{Binding User}" />
                                <Label
                                    Grid.Row="0"
                                    Grid.Column="3"
                                    HorizontalTextAlignment="Center"
                                    Text="{Binding Date}" />
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </StackLayout>

</ContentPage.Content>

Code Behind:

 public partial class Page18 : ContentPage
{
    public ObservableCollection<transactionTest> ObjectList { get; set; }
    public Page18()
    {
        InitializeComponent();
       
        ObjectList = new ObservableCollection<transactionTest>()
        {
            new transactionTest (){ Amount = 231, Date = DateTime.Parse("2020-06-12 15:22"), Type = "Send", User = "Test"},
            new transactionTest() { Amount = 112, Date = DateTime.Parse("2020-06-13 12:22"), Type = "Send",  User = "Test" },
            new transactionTest() { Amount = 131, Date = DateTime.Parse("2020-06-11 13:22"), Type = "Receive", User = "Test"},
            new transactionTest() { Amount = 225, Date = DateTime.Parse("2020-06-14 10:22"), Type = "Send", User = "Test"},
            new transactionTest() { Amount = 201, Date = DateTime.Parse("2020-06-15 16:22"), Type = "Receive",User = "Test"}
        };
        this.BindingContext = this;


    }
}
public class transactionTest
{
    public string Type { get; set; }
    public int Amount { get; set; }
    public string User { get; set; }
    public DateTime Date { get; set; }
}

Screenshot:

Xamarin binding is not working to listview

1 Answers