.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
andExecute
methods. -
Use the ListViewUserCommand 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.
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:
-
Create a class that inherits from the
ListViewCommand
and set itsId
property. Then override theCanExecute
andExecute
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); } }
-
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
.
-
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; } }
-
Bind the
ItemTapCommand
through the predefinedListViewUserCommand
command. ItsId
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