.NET MAUI ListView Commands

The Command design-pattern is used in the XAML and MVVM world. The ListView strictly follows the Command design-pattern best practices and provides an intuitive and easy-to-use set of APIs that allow you to control various aspects of ListView behavior.

The ListView exposes a Commands collection that allows you to register custom commands with each control’s instance through the RadListView.Commands property. Commands gets the collection with all the custom commands registered with the CommandService. Custom commands have higher priority than the built-in (default) ones.

Command ID Enumeration

All predefined commands within a RadListView instance are identified by a member of the CommandId enumeration. This member is the key that relates a command instance to a particular action/routine within the owning ListView.

To register a custom command within a RadListView instance you can:

• Inherit from the ListView Command class and override its CanExecute and Execute methods.
• Use the ListView User Command class and bind its Command property to a Command in your ViewModel.

In both cases, you need to set the Id property of the new command so that it can be properly associated with the desired action/event.

Each command has a context object of type [CommandId]CommandContext. The available commands and their context are described in the table below:

Commands	Object type
ItemTap	ItemTapCommandContext
ItemHold	ItemHoldCommandContext
ItemSwiping	ItemSwipingCommandContext
ItemSwipeStarting	ItemSwipeStartingCommandContext
ItemSwipeCompleted	ItemSwipeCompletedCommandContext
PullToRefreshRequested	PullToRefreshRequestedCommandContext
SelectionChanged	SelectionChangedCommandContext
LoadOnDemand	LoadOnDemandCommandContext
GroupHeaderTap	GroupHeaderContext
ReorderStarting	ReorderStartingCommandContext
ReorderEnded	ReorderEndedCommandContext

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

The context object is passed as a parameter in its Execute method and provides information identical to the corresponding event arguments.

When overriding the ReorderEnded and GroupHeaderTap commands you have to implement the action each command does. For example, manually reorder items and manually update the group IsExpanded state.

Inheriting from ListViewCommand

To demonstrate inheriting from the ListViewCommand, the following example handles the ItemTap action as a Command:

1. Create a class that inherits from the ListViewCommand and set its Id property. Then override the CanExecute and Execute methods:

public class ItemTappedUserCommand : ListViewCommand
{
    public ItemTappedUserCommand()
    {
        Id = CommandId.ItemTap;
    }
    public override bool CanExecute(object parameter)
    {
        return true;
    }
    public override void Execute(object parameter)
    {
        var tappedItem = (parameter as ItemTapCommandContext).Item;
        //add your logic here
        App.DisplayAlert("You've selected " + tappedItem);
    }
}

2.. Add the custom command to the Commands collection of the RadListView instance:

listView.Commands.Add(new ItemTappedUserCommand());

Binding ListViewUserCommand

With the ListViewUserCommand binding approach, you can directly handle the custom commands in the ViewModel.

1.. Add the custom command to the ViewModel:

public class ViewModel
{
    public ViewModel()
    {
        this.Source = new List<string> { "Tom", "Anna", "Peter", "Teodor", "Martin" };
        this.ItemTapCommand = new Command<ItemTapCommandContext>(this.ItemTapped);
    }
    private void ItemTapped(ItemTapCommandContext context)
    {
        var tappedItem = context.Item;
        //add your logic here
        App.DisplayAlert("You've selected " + tappedItem);
    }
    public List<string> Source { get; set; }
    public ICommand ItemTapCommand { get; set; }
}

2. Bind the ItemTapCommand through the predefined ListViewUserCommand command. Its Id property is used to map the command to the corresponding action with the control:

<telerik:RadListView x:Name="listView" 
                     ItemsSource="{Binding Source}">
    <telerik:RadListView.BindingContext>
        <local:ViewModel />
    </telerik:RadListView.BindingContext>
    <telerik:RadListView.Commands>
        <telerik:ListViewUserCommand Id="ItemTap"
                                     Command="{Binding ItemTapCommand}" />
    </telerik:RadListView.Commands>
</telerik:RadListView>

See Also

• Events
• Selection
• Reordering