Multi-select ListView and MVVM
Finally I was able to develop something using Xamarin.Forms and part of what I’ve been doing had to do with implementing a list that allowed the multiple election of rows and was compatible with the MVVM pattern.
Doing some research, I found that the
ListView control, which is the most used to show data in a list, does not allow multiple selection and developers should find a workaround to this matter. In Xamarin documentation there is also an article where it is explained a way to complete this task, and this post is based on it.
To make this task possible, we should make use of some auxiliary classes that I will explain later on this post.
For this example, we will be showing a list of Pokemons and allow the user to select some of them through a list, the model class is the following:
Apart from the model, there is a need from an auxiliary class that you can tell by the name, acts as wrapper for the model, its definition is the following:
IsSelected property will be used to determine whether the user had selected an item or not, while
Item will contain the model.
(Si prefieres trabajar solo con C#, ve este post)
For this app we will use two Forms pages, one to show all the Pokemons and other to show only those who had been selected by the user.
For the first one, where all the Pokemons will be shown, we will have to modify slightly the way we are used to create a cell template, and the reason is that every row in the list will be binded to a
SelectableItemWrapper<Pokemon> not to a
The list will be declared in XAML and the collection
Pokemons will be set as the
As we know, now every element in the collection will be a row in the list.
For this cell it is necessary to show the name, weight and height of the Pokemon binded to it, along with a control to let the user choose or not such item. That is why some bindable properties are needed.
That is why in order to show the information three labels are created, and for the selection issue a
Switch control will be used (I tried to use the CheckBox de XLabs, but I ran into an issue with the
You can design the cell as you want, but it is important that inside of it you bind a boolean property, such as
Checked, to the property
IsSelected of the
SelectableItemWrapper class. For this example, a line like this should be enough:
I should remark that the binding is defined within the cell implementation, and not in the view where the bindings are usually defined.
Back to the View
Now, again back to the view, we can use the cell in our
ListView, we can define other bindings:
You can notice that te binding routes aren’t “direct”, instead we are referring first to an
Item before the real properties, that is because we are binding to a
SelectableItemWrapper<Pokemon>, not to a
For the ViewModel we require two collections:
- One to hold a list of all Pokemons
- One to hold the selected Pokemons
Here are the definitions for them:
The first one,
Pokemons is an
Pokemon because it holds all the selectable items. Whereas the second one is just another collection. Like the ones we are used to.
Therefore, in the ViewModel we can get all the selected items using a simple Linq query:
Or mark all or none items as selected:
And all of that, from the ViewMdoel. Remember, you can always check the source code. By the way, look at the finished app:
SelectMultipleBasePage<T> in which all the info in this post is based on, was written by Glenn Stephens from Xamarin University, see the original post.