New to Telerik UI for .NET MAUI? Start a free 30-day trial

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

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

In this article