Xamarin Form Multi Item Select Demo

 

Github URL:  https://github.com/mistrypragnesh40/MultiSelectDemo

Models:

Employee.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Text;
 
namespace CheckBoxDemo.Models
{
    public class Employee :INotifyPropertyChanged
    {
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Email { get; set; }
        private bool _isChecked;
        public bool IsChecked
        {
            get => _isChecked;
            set { _isChecked = value;OnPropertyChanged(); }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
 

Views:

MultiSelectDemo.xml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CheckBoxDemo.Views.MultiSelectDemo">
    <ContentPage.Content>
        <StackLayout Margin="10">
            <Label FontSize="Medium" FontAttributes="Bold" HorizontalOptions="Center" Text="Multi Select Demo In Xamarin Forms" />
            <StackLayout  Orientation="Horizontal" HorizontalOptions="End">
                <Button Text="Fetch Selected Item Count"   Command="{Binding FetchSelectedItemCommand}"/>
                <Button Text="{Binding SelectedButtonText}"   Command="{Binding SelectAllCommand}"/>
            </StackLayout>
            <CollectionView Margin="0,0,0,50" ItemsSource="{Binding Employees}">
                <CollectionView.ItemsLayout>
                    <LinearItemsLayout ItemSpacing="10" Orientation="Vertical" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Frame  Padding="5" CornerRadius="5">
                            <Grid >
                                <Grid.RowDefinitions>
                                    <RowDefinition  Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="90*" />
                                    <ColumnDefinition Width="10*" />
                                </Grid.ColumnDefinitions>
                                <StackLayout  Grid.Row="0" Grid.Column="0">
                                    <Label Text="{Binding Name,StringFormat='Name: {0}'}" />
                                    <Label Text="{Binding Email,StringFormat='Email: {0}'}" />
                                    <Label Text="{Binding Gender,StringFormat='Gender: {0}'}" />
                                </StackLayout>
                                <CheckBox IsChecked="{Binding IsChecked}" Grid.Row="0" Grid.Column="1" />
                            </Grid>
                        </Frame>
 
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

MultiSelectDemo.xml.cs

using CheckBoxDemo.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
 
namespace CheckBoxDemo.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MultiSelectDemo : ContentPage
    {
        public MultiSelectDemo()
        {
            InitializeComponent();
            this.BindingContext = new MultiSelectDemoViewModel();
        }
    }
}

ViewModels:

MultiSelectDemoViewModel.cs

using CheckBoxDemo.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Windows.Input;
using Xamarin.Forms;
using Xamarin.Forms.Internals;
 
namespace CheckBoxDemo.ViewModels
{
    public class MultiSelectDemoViewModel : INotifyPropertyChanged
    {
 
        #region Propertites
        private string _selectedButtonText = "Check All";
        public string SelectedButtonText
        {
            get => _selectedButtonText;
            set { _selectedButtonText = value; OnPropertyChanged(); }
        }
        public ObservableCollection<Employee> Employees { get; set; }
        #endregion
 
        public MultiSelectDemoViewModel()
        {
            Employees = new ObservableCollection<Employee>();
            BindData();
        }
 
        #region Methods
        private void BindData()
        {
            Employee emp = new Employee();
            emp.Email = "abc@gmail.com";
            emp.Name = "Pragnesh";
            emp.Gender = "Male";
            Employees.Add(emp);
 
            emp = new Employee();
            emp.Email = "abc@gmail.com";
            emp.Name = "Vishal";
            emp.Gender = "Male";
            Employees.Add(emp);
 
            emp = new Employee();
            emp.Email = "abc@gmail.com";
            emp.Name = "Jharna";
            emp.Gender = "Female";
            Employees.Add(emp);
 
 
            emp = new Employee();
            emp.Email = "abc@gmail.com";
            emp.Name = "Rupali";
            emp.Gender = "Female";
            Employees.Add(emp);
 
            emp = new Employee();
            emp.Email = "abc@gmail.com";
            emp.Name = "Jignesh";
            emp.Gender = "Male";
            Employees.Add(emp);
 
            emp = new Employee();
            emp.Email = "abc@gmail.com";
            emp.Name = "Nirav";
            emp.Gender = "Male";
            Employees.Add(emp);
 
            emp = new Employee();
            emp.Email = "abc@gmail.com";
            emp.Name = "Viral";
            emp.Gender = "Male";
            Employees.Add(emp);
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
 
 
        #region Commands
        public ICommand SelectAllCommand
        {
            get
            {
                return new Command(() =>
                {
                    if (SelectedButtonText == "Check All")
                    {
                        Employees.ForEach(f => { f.IsChecked = true; });
                        SelectedButtonText = "UnCheck All";
                    }
                    else
                    {
                        Employees.ForEach(f => { f.IsChecked = false; });
                        SelectedButtonText = "Check All";
 
                    }
                });
            }
        }
 
        public ICommand FetchSelectedItemCommand
        {
            get
            {
                return new Command(() =>
                {
                    var selectedItem = Employees.Where(f => f.IsChecked == true).ToList();
                    App.Current.MainPage.DisplayAlert("Selected Item Count", selectedItem.Count + "", "OK");
                });
            }
        }
        #endregion
    }
}
 

Implementations

App.xaml.cs

 public App()
 {
     InitializeComponent();
 
     MainPage = new MultiSelectDemo();
 }