Xamarin.Forms CollectionView

In Xamarin.Forms, the CollectionView control is used to display data collections in a flexible layout. With CollectionView, developers can create custom layouts, customize templates, and handle interactive selection and scrolling.

Syntax

The CollectionView control is defined in XAML like this:

<CollectionView ItemsSource="{Binding Items}"
               SelectionMode="Single">
  <CollectionView.ItemsLayout>
    <LinearItemsLayout Orientation="Vertical" />
  </CollectionView.ItemsLayout>
  <CollectionView.ItemTemplate>
    <DataTemplate>
      <Grid BackgroundColor="#eee"
            Padding="10">
        <Label Text="{Binding Name}" />
        <Label Text="{Binding Description}" />
      </Grid>
    </DataTemplate>
  </CollectionView.ItemTemplate>
</CollectionView>

Example

Here's an example of how to use the CollectionView control in Xamarin.Forms to display a collection of items:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        BindingContext = new MainViewModel();
    }
}

public class MainViewModel
{
    public ObservableCollection<Item> Items { get; set; }

    public MainViewModel()
    {
        Items = new ObservableCollection<Item>
        {
            new Item { Name = "Item 1", Description = "Description 1" },
            new Item { Name = "Item 2", Description = "Description 2" },
            new Item { Name = "Item 3", Description = "Description 3" }
        };
    }
}

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

Output

The output of the above code will display a CollectionView with three items in a vertical layout.

Explanation

In the above code, a CollectionView is defined in XAML with its ItemsSource property bound to a collection of items defined in the MainViewModel. The ItemsLayout property is set to a LinearItemsLayout with a vertical orientation. The ItemTemplate is defined as a Grid with two labels, one for the item name and one for the item description.

In the MainViewModel, a collection of three items is defined with their names and descriptions. This collection is then bound to the Items property of the CollectionView in the MainPage.

Use

The CollectionView control is used to display data collections in a flexible layout. With CollectionView, developers can create custom layouts, customize templates, and handle interactive selection and scrolling. It can be used for scenarios like displaying a list of items, showing a gallery of images, or even displaying a complex grid of data.

Important Points

• The CollectionView control is a powerful tool for displaying collections of data in a flexible and customizable way.
• With CollectionView, developers can create custom layouts, customize templates, and handle interactive selection and scrolling.
• ItemTemplates can be defined as custom views, enabling unlimited flexibility in data visualization.
• It supports multiple selection and horizontal and vertical scrolling.
• The CollectionView control is part of Xamarin.Forms and is supported on all major platforms, including iOS, Android, and Windows.

Summary

In summary, Xamarin.Forms CollectionView is a powerful tool for displaying collections of data in a flexible and customizable way. With CollectionView, developers can create custom layouts, customize templates, and handle interactive selection and scrolling. It is a must-learn tool for Xamarin.Forms developers who want to create dynamic and engaging user interfaces.