Xamarin Forms: Command execution triggered by List View Item Button

4 min readMay 15, 2021

In this Topic I would like to explain how to provide for each list view item an individual button with MVVM and Command Pattern.

List View Item Command Binding (you can find the entire code in the project file)

Imagine a scenario where you have a List View with a dynamic number of List View Items, and you need a Button which triggers a certain action related to the Item where the Button was clicked. I prepared a use case where each Item of a List View represents a color and by clicking the Button inside the Item the color and content of a Label Control above changes according to the value of the clicked Item.

Since we are using MVVM for this example I will explain you the required Objects.

Model:

Contains a simple Item Model with a few attributes and a basic constructor, which initiate those Attributes.

ViewModel:

CommandItemViewModel is the ViewModel object which will be used as a BindingContext of the MaingPage View. The CommandItemsViewModel inherit from BaseViewModel some basic properties/interfaces like INotifiedPropertyChanged etc.

public class CommandItemsViewModel : BaseViewModel

Collection

The ViewModel contains an ObservableCollection of Type Item (see Item Class above). This collection will store our Items for the list View.

public ObservableCollection<Item> Items { get; set; }

INotifiedProperyChanged Property

When the user clicks on an Item Button, the Item which bonded to this List View Item has to be stored in a INotifiedProperyChanged Property. This property in our case is called “ClickedItem”. So, when the Item changes the UI will be notified that something with this property has changed and updates the view.

Command

A further important Property of the ViewModel is the ItemCommand Command. Consider that the execution logic is implemented direct in the command itself, so we don’t reference to an async Task. The Input Parameter of the Command is of type “object” whit this we can ensure that we can pass-through any type of objects as parameter value in the MainPage View. The only thing that we have to do later is to convert the value of the parameter into the type of our “Item” Model. After the conversion we can store our new Item in the Property “ClickedItem”. In case the Value of “ClickeItem” changes the UI gets notified and refreshed, this is the part which triggers the label to change the color.

Constructor

The ViewModel contains a basic constructor which initiate the Items for the List View and stores them in the ObservableCollection Items.

ManPage

This section describes the XAML Code

BindingContext

First of all, in the MainPage View you have to bind your ContentPage to your CommandItemViewModel. You also could do it in the Code Behind of the MainPage, but in our case we bind it directly in the ViewPage. After setting up the BindingContext to the ViewModel via ViewModelLocator pattern, you cand bind your controls of the MainPage View to all properties of the ViewModel.

Label Control

As a next step we add a Label to our MainPage and bind the Text and TextColor Attributes of the Label to the ClickedItem Property Attributes, since the ViewModel is bonded to the Context of the MainPage the Label component will recognize the referenced ClickedItem Property. Those Label will show us the Name of the clicked Item (color name) and change the text color of the Label to the color of the clicked view item.

Label Control XAML (you can find the entire code in the project file)

List View

The ItemsSource(1) of the List View Control reference to the Items Collection of the ViewModel. For each Element in the bound Source the List View creates an Item which contains two Labels and a Button Control (2). Labels are referencing to the properties of the Item Model and the Button Control to the ICommand of the ViewModel. For the Button BindingContext (3) we have to do explicit binding since the ItemsSource is bond to the Items Collection which does not contain the ICommand ItemCommand.