.NET MAUI ListView Commands

The Command design-pattern is widely 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.

CommandId Enumeration

All predefined commands within a RadListView instance are identified by a member of the CommandId enumeration. This member is actually 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 ListViewCommand class and override its CanExecute and Execute methods.
• Use the ListViewUserCommand 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.

Following are the members of the CommandId enumerations:

• ItemTap
• ItemSwiping
• ItemSwipeCompleted
• ItemSwipeStarting
• PullToRefreshRequested
• SelectionChanged
• LoadOnDemand
• ItemHold
• GroupHeaderTap
• ReorderStarting
• ReorderEnded

These actions correspond to the events exposed by the ListView. For more details, see the Events topic.

For each of the available commands, there is a context object of type [CommandId]CommandContext, for example, ItemTapCommandContext, ItemHoldCommandContext, and so on. The context object is passed as a parameter in its Execute method and provides information identical to the corresponding event arguments.

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