MultiSelect Listview Xamarin.Forms

Hello! In this post we gonna see how to implement a MultiSelect Listview using Xamarin Forms.

First we need to create a custom ViewModel, in order of handle the items selected

	using System;
	using Xamarin.Forms;

	namespace MultiSelectListViewXF
	{
	public class ItemsMultiSelectVm: BaseViewModel
	{
	public ItemsMultiSelectVm(Persona person)
	{
	Persona = person;
	}

	protected int _index;
	public int Index
	{
	get { return _index; }
	set
	{
	_index = value;
	OnPropertyChanged(nameof(Index));
	}
	}

	protected bool _isSelected = false;
	public bool IsSelected
	{
	get { return _isSelected; }
	set
	{
	_isSelected = value;
	OnPropertyChanged(nameof(IsSelected));
	}
	}
	protected Color _ItemBackground = Color.FromHex("#B3E5FC");
	public Color ItemBackground
	{
	get { return _ItemBackground; }
	set
	{
	_ItemBackground = value;
	OnPropertyChanged(nameof(ItemBackground));
	}
	}

	protected Color _TextColor = Color.FromHex("#000000");
	public Color TextColor
	{
	get { return _TextColor; }
	set
	{
	_TextColor = value;
	OnPropertyChanged(nameof(TextColor));
	}
	}

	Persona _personaEnty;
	public Persona Persona
	{
	get { return _personaEnty; }
	set
	{
	_personaEnty = value;
	OnPropertyChanged(nameof(Persona));
	}
	}

	}
	}

view raw ItemsMultiSelectVm.cs hosted with ❤ by GitHub

After that we create add to our page the listview and another elements that help us to show the differents items in the ListView.

	using Xamarin.Forms;

	namespace MultiSelectListViewXF
	{
	public partial class MultiSelectListViewPage : ContentPage
	{
	MultiSelectVm ViewModel;
	public MultiSelectListViewPage()
	{
	InitializeComponent();
	ViewModel = new MultiSelectVm();
	BindingContext = ViewModel;

	myListView.SeparatorColor = Color.Gray;
	myListView.SetBinding(ListView.ItemsSourceProperty, ViewModel.BindTo(x => x.ItemMultiSource));
	myListView.SetBinding(ListView.SelectedItemProperty, nameof(ViewModel.ItemSelect), BindingMode.OneWay);
	myListView.ItemTemplate = new DataTemplate(CreateCell);
	myListView.BackgroundColor = Color.FromHex("#B3E5FC");
	myListView.ItemTapped += LstViewTeams_ItemTapped;
	}

	async void LstViewTeams_ItemTapped(object sender, ItemTappedEventArgs e)
	{
	var item = (ItemsMultiSelectVm)e.Item;
	if (item.IsSelected)
	{
	ViewModel.ItemMultiSource[item.Index].IsSelected = false;
	ViewModel.ItemMultiSource[item.Index].ItemBackground = Color.FromHex("#B3E5FC");
	ViewModel.ItemMultiSource[item.Index].TextColor = Color.FromHex("#000000");
	ViewModel.ItemToDelete(item);
	}
	else
	{
	ViewModel.ItemMultiSource[item.Index].IsSelected = true;
	ViewModel.ItemMultiSource[item.Index].ItemBackground = Color.FromHex("#01579B");
	ViewModel.ItemMultiSource[item.Index].TextColor = Color.FromHex("#FFFFFF");
	ViewModel.ItemSelect = item;
	}
	myListView.ItemTemplate = new DataTemplate(CreateCell);
	}
	Cell CreateCell()
	{
	var view = new CustomCellView() { };
	var cell = new ViewCell();
	cell.View = view;
	cell.Height = 100;
	return cell;
	}

	}
	}

view raw MultiSelectListViewPage.xaml.cs hosted with ❤ by GitHub

Now we add a ViewModel to handle the calls to UI

	using System;
	using System.Collections.ObjectModel;
	using Xamarin.Forms;

	namespace MultiSelectListViewXF
	{
	public class MultiSelectVm:BaseViewModel
	{
	public MultiSelectVm()
	{
	ItemMultiSource = new ObservableCollection<ItemsMultiSelectVm>();
	ItemsSelected = new ObservableCollection<ItemsMultiSelectVm>();
	RefreshData();
	}


	protected ItemsMultiSelectVm _itemSelect;
	public ItemsMultiSelectVm ItemSelect
	{
	get { return _itemSelect; }
	set
	{
	if (_itemSelect == value)
	return; _itemSelect = value;
	ItemsSelected.Add(value);
	if (ItemsSelected.Count == 0)
	Selected = "Selected";
	else if (ItemsSelected.Count == 1)
	Selected = "" + ItemsSelected.Count + " Item Selected";
	else
	Selected = "" + ItemsSelected.Count + " Items Selected";
	OnPropertyChanged(nameof(ItemsSelected));
	OnPropertyChanged(nameof(ItemSelect));
	}
	}

	protected ObservableCollection<ItemsMultiSelectVm> _itemsSelected;
	public ObservableCollection<ItemsMultiSelectVm> ItemsSelected
	{
	get { return _itemsSelected; }
	set
	{
	if (_itemsSelected == value)
	return; _itemsSelected = value;
	}
	}

	protected ObservableCollection<ItemsMultiSelectVm> _itemMultiSource;
	public ObservableCollection<ItemsMultiSelectVm> ItemMultiSource
	{
	get { return _itemMultiSource; }
	set
	{
	if (_itemMultiSource == value)
	return; _itemMultiSource = value;
	OnPropertyChanged(nameof(ItemMultiSource));
	}
	}

	protected string _selected = "Follow";
	public string Selected
	{
	get { return _selected; }
	set
	{
	if (_selected == value)
	return; _selected = value;
	OnPropertyChanged(nameof(Selected));
	}
	}

	async void RefreshData()
	{
	int con = 0;
	for (int i = 0; i < 10; i++)
	{
	Persona per = new Persona();
	per.Id = i;
	per.Name = "Osvaldo Santiago Estrada";
	per.Address = "Jalisco, Mexico";
	per.Profession = "Software developer";
	per.LastName = "S.E.";

	ItemsMultiSelectVm item = new ItemsMultiSelectVm(per);
	item.Index = con;
	ItemMultiSource.Add(item);
	con++;
	}


	}

	public void ItemToDelete(ItemsMultiSelectVm _deleteTeam)
	{
	ItemsSelected.Remove(_deleteTeam);

	if (ItemsSelected.Count == 0)
	Selected = "Selected";
	else if (ItemsSelected.Count == 1)
	Selected = "" + ItemsSelected.Count + " Item Selected";
	else
	Selected = "" + ItemsSelected.Count + " Items Selected";


	OnPropertyChanged(nameof(Selected));
	}

	}
	}