Xamarin.Forms ListView

ListView is a data-driven control provided by Xamarin.Forms that lets you display a list of data items. It provides features like scrolling and sorting for a better user experience. In this page, we'll be discussing how to use the ListView control in Xamarin.Forms with different variations and features.

Syntax

The syntax for the ListView control in Xaml is given below:

<!-- Binding a collection of items to ListView via ItemsSource property -->
<ListView ItemsSource="{Binding Items}">
  <!-- Defining how each item should look via ItemTemplate property -->
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <!-- Defining how each item should be displayed -->
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Example

In the following example, we are creating a ListView control in Xamarin.Forms with a simple DataTemplate to display the list of Fruit objects.

<ListView ItemsSource="{Binding Fruits}">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <StackLayout Orientation="Horizontal">
          <Label Text="{Binding Name}" />
          <Label Text="{Binding Description}" />
        </StackLayout>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

And the ViewModel class for the above example could be:

public class Fruit
{
    public string Name { get; set; }
    public string Description { get; set; }
}

public class FruitViewModel
{
    public ObservableCollection<Fruit> Fruits { get; set; }

    public FruitViewModel()
    {
        Fruits = new ObservableCollection<Fruit>()
        {
            new Fruit() { Name = "Apple", Description = "A sweet fruit" },
            new Fruit() { Name = "Banana", Description = "A yellow fruit" },
            new Fruit() { Name = "Grapes", Description = "A juicy fruit" }
        };
    }
}

Output

The output of the code above would produce a ListView with three items in it - Apple, Banana, and Grapes. Each item would display a name and a description.

Explanation

In the example above, we are creating a ListView control, setting its ItemsSource property to an ObservableCollection of Fruit objects, and defining a DataTemplate to display each item in such a way that it shows its name and description properties in individual Labels inside a StackLayout.

ListView.ItemTemplate

The ListView.ItemTemplate property defines how each item in the ListView should be displayed. It's a DataTemplate that contains the layout and binding information for each item.

DataTemplate and ViewCell

A DataTemplate is a container element that includes one or more Xaml elements that define the appearance of each list item. Inside the DataTemplate, we have a ViewCell, which defines a single row in the ListView control. ViewCell is the container that Xamarin.Forms uses to display items in the ListView. It provides a background, text color, and padding to the content that's displayed inside it.

Binding

Inside the DataTemplate, we are binding the text of the two Labels to the Name and Description properties of each Fruit object. Text="{Binding Name}" and Text="{Binding Description}" can be used to bind the text of the corresponding Label to the value of a property of the binding context.

ObservableCollection

ObservableCollection is a generic collection class that provides the notification mechanism when its content is changed i.e., added, removed, or replaced. It provides the ItemsSource property for the ListView control that helps display the data on the screen.

Use

The ListView control is used to display a collection of items in Xamarin.Forms. It's useful in scenarios where you need to display a large amount of data in a list format. You can use it to implement various features such as:

• Displaying a collection of data items
• Enabling selection of one or more items from the list
• Grouping data items based on specific criteria
• Sorting data items based on specific criteria.

Important Points

• ListView is a data-driven control in Xamarin.Forms that lets you display a list of data items.
• The ListView control uses an ObservableCollection to bind data to its ItemsSource property.
• ListView provides various features such as selection mode, grouping, and sorting.
• The appearance of each item in the list can be customized using a DataTemplate and ViewCell.

Summary

ListView is an essential control in Xamarin.Forms used to display a collection of data items. It provides various features such as selection mode, grouping, and sorting. Data binding in Xamarin.Forms uses the ObservableCollection to bind data to ListView's ItemsSource property. The appearance of each item in the list can be customized using a DataTemplate and ViewCell.