.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
andExecute
methods. -
Use the ListView User Command class and bind its Command property to a
Command
in yourViewModel
.
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
andGroupHeaderTap
commands you have to implement the action each command does. For example, manually reorder items and manually update the groupIsExpanded
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>