How To Add Bind An Array To ListView in Xamarin Forms

Question

Apologies for the basic question but I can't seem to find a solution online and hope you can help me.

Step 1 - I want to build an array like so.

Product Array contains

• Product Name
• Product Description
• Product Price

Step 2 - Then I want to bind it to ListView so each row will show the Product Name, Product Description, Product Price.

Any ideas?

Answer 1

Replacing TextCell with ViewCell can custom cell wiht more element.

All custom cells must derive from ViewCell , the same base class that all of the built-in cell types use.

Such as the following XAML :

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="demoListView.ImageCellPage">
    <ContentPage.Content>
        <ListView  x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout BackgroundColor="#eee"
                        Orientation="Vertical">
                            <StackLayout Orientation="Horizontal">
                                <Image Source="{Binding image}" />
                                <Label Text="{Binding title}"
                                TextColor="#f35e20" />
                                <Label Text="{Binding subtitle}"
                                HorizontalOptions="EndAndExpand"
                                TextColor="#503026" />
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

The following screenshot shows an example of a custom cell:

Answer 2

Collection Data Binding is covered in the Microsoft tutorial on ListView Data Binding . Here is a summary, where I've only kept the relevant parts. Refer to the tutorials for all the details.

First your array must be created as an ObservableCollection in order for it to emit events when its data changes:

ObservableCollection<Product> products= new ObservableCollection<Product>();
ProductView.ItemsSource = products;
proucts.Add(new Product { Name="Widget", Description="Wonderful", Price=2.99});

Then you need to bind to the ObservableCollection from the ListView in XAML . In order to display each item of the array the way you want in each row, you need to define a custom DataTemplate as described in Data Binding Basics :

<ListView x:Name="ProductView" ItemsSource="{Binding Products}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" Spacing="10">

                    <Label Text="{Binding Name}" />
                    <Label Text="{Binding Description}" />
                    <Label Text="{Binding Price, StringFormat='{0:C}'}" />

                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Notice how the price binding uses the StringFormat property to display the price in currency format. You can create your own custom converters to map data types to all sorts of objects, like images or colors, for example. You can also play around with the StackLayout and even created nested StackLayout structures if you want to create fancy "cards" for each product.

Finally, if you require a two-way data binding, ie when a property is updated, the view automatically gets updated, you will need to call OnPropertyChanged(); in your property setters, as described in How to Implement Property Change Notification :

public string Name
{
    get { return name; }
    set
    {
        name = value;
        OnPropertyChanged();
    }
}