.NET MAUI CollectionView Commands

The .NET MAUI CollectionView provides various commands that are listed in the following table.

Commands	Definition
ItemTapCommand(ICommand)	Specifies a command to execute when an item is tapped. The command accepts a single parameter with the item being tapped.
GroupTapCommand(ICommand)	Specifies a command to execute when a group item is tapped. The command accepts a single parameter with the group item being tapped.

Commands action correspond to the events exposed by the CollectionView. For more details, see the Events topic.

Example with ItemTap Command

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 with a command that will be bound to the RadCollectionView.ItemTapCommand:

• C#

public class CommandsViewModel
{
    public CommandsViewModel()
    {
        Source = new List<string> { "Tom", "Anna", "Peter", "Teodor", "Martin" };
        MyTapCommand = new Command((item) =>
        {
            var tappedItem = item;
            Application.Current.MainPage.DisplayAlert("", "You have tapped on: " + tappedItem, "OK");
        });
    }

    public List<string> Source { get; set; }

    public ICommand MyTapCommand { get; set; }
}

3. Define the CollectionView control with a sample ItemTemplate:

• XAML

<telerik:RadCollectionView ItemsSource="{Binding Source}"
                           ItemTapCommand="{Binding MyTapCommand}">
    <telerik:RadCollectionView.BindingContext>
        <local:CommandsViewModel/>
    </telerik:RadCollectionView.BindingContext>
</telerik:RadCollectionView>

4. Add the telerik namespace:

• XAML

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

This is the result:

Example with GroupTap Command

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 with a command that will be bound to the RadCollectionView.GroupItemTapCommand:

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

• 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"

This is the result:

For a runnable example demonstrating the CollectionView Commands, see the SDKBrowser Demo Application and go to CollectionView > Commands category.