.NET MAUI CollectionView Data Binding

For all cases where the business items are not simple strings, data-binding is necessary to correctly visualize information. The CollectionView for .NET MAUI component supports data binding in the form of a path property.

Populate with Data

• ItemsSource (object)—Defines the collection of the items that will populate the control with data.
• DisplayMemberPath (string)—Defines the name of the property which will be visualized inside the CollectionView.

If DisplayMemberPath is not set the ToString implementation of the business object will be visualized. The DisplayMemberPath is a property that helps the developers to visualize an exact property from the business object they are bound to.

Define Item Appearance

The CollectionView provides a default appearance of the items. If you want to customize this appearance, define an ItemTemplate (DataTemplate).

Here is an example with ItemTemplate:

1. Create a sample model:

public class Person
{
    public string Name { get; set; }

    public int Age { get; set; }

    public string Department { get; set; }
}

2. Create a ViewModel:

public class ViewModel
{
    public ViewModel()
    {
        this.People = new ObservableCollection<Person>()
        {
            new Person { Name = "Kiko", Age = 23, Department = "Production" },
            new Person { Name = "Jerry", Age = 23, Department = "Accounting and Finance" },
            new Person { Name = "Ethan", Age = 51, Department = "Marketing" },
            new Person { Name = "Isabella", Age = 25, Department = "Marketing" },
            new Person { Name = "Joshua", Age = 45, Department = "Production" },
            new Person { Name = "Logan", Age = 26, Department = "Production"},
            new Person { Name = "Aaron", Age = 32, Department = "Production" },
            new Person { Name = "Elena", Age = 37, Department = "Accounting and Finance" },
            new Person { Name = "Ross", Age = 30, Department = "Marketing" },
        };

        this.MyGroupTapCommand = new Command((item) =>
        {
            var tappedGroup = (GroupContext)item;
            Application.Current.MainPage.DisplayAlert("", $"You have tapped on group {tappedGroup.Key}", "OK");
        });
    }

    public ObservableCollection<Person> People { get; set; }

    public ICommand MyGroupTapCommand { get; set; }
}

3. Define the CollectionView control with a sample ItemTemplate:

<telerik:RadCollectionView ItemsSource="{Binding People}"
                           GroupTapCommand="{Binding MyGroupTapCommand}">
    <telerik:RadCollectionView.ItemTemplate>
        <DataTemplate>
            <HorizontalStackLayout Spacing="2" Padding="{Binding Source={RelativeSource AncestorType={x:Type telerik:RadCollectionViewItemView}}, Path=ActualPadding}">
                <Label Text="{Binding Name, StringFormat='Name: {0}, '}" VerticalTextAlignment="Center" />
                <Label Text="{Binding Age, StringFormat='Age: {0}'}" VerticalTextAlignment="Center" />
            </HorizontalStackLayout>
        </DataTemplate>
    </telerik:RadCollectionView.ItemTemplate>
    <telerik:RadCollectionView.GroupDescriptors>
        <telerik:PropertyGroupDescriptor PropertyName="Department" />
    </telerik:RadCollectionView.GroupDescriptors>
    <telerik:RadCollectionView.BindingContext>
        <local:ViewModel />
    </telerik:RadCollectionView.BindingContext>
</telerik:RadCollectionView>

4. Add the telerik namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

Item Appearance at Runtime

When the CollectionView is bound to a collection of multiple data item objects and the appearance of each item depends on a specific property of the business object then you can define an item appearance at runtime by setting the RadCollectionView.ItemTemplate property to a DataTemplateSelector object.

See Also

• Grouping
• Filtering
• Sorting
• Selection
• Commands
• Events