# .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:

```C#
public class Person
{
    public string Name { get; set; }

    public int Age { get; set; }

    public string Department { get; set; }
}
```

**2.** Create a `ViewModel`:

```C#
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.Windows[0].Page.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`:

```XAML
<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:

```XAML
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](https://www.telerik.com/maui-ui/documentation/controls/collectionview/grouping/overview)
* [Filtering](https://www.telerik.com/maui-ui/documentation/controls/collectionview/filtering)
* [Sorting](https://www.telerik.com/maui-ui/documentation/controls/collectionview/sorting)
* [Selection](https://www.telerik.com/maui-ui/documentation/controls/collectionview/selection)
* [Commands](https://www.telerik.com/maui-ui/documentation/controls/collectionview/commands)
* [Events](https://www.telerik.com/maui-ui/documentation/controls/collectionview/events)