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();
 }

Xamarin Form Popup Page With Animation Effect

 

Github Project URL: https://github.com/mistrypragnesh40/RgPopupWithAnimation

Plugin Required.

Initialization of Plugin.

Xamarin.AndroidProject (MainActivity.cs)

using System;
using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
 
namespace RgPopupDemo.Droid
{
    [Activity(Label = "RgPopupDemo", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize )]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;
 
            base.OnCreate(savedInstanceState);
            Rg.Plugins.Popup.Popup.Init(this, savedInstanceState);
            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            LoadApplication(new App());
        }
        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
 
            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }
    }
}

Xamarin.iOSProject (AppDelegate.cs)

using System;
using System.Collections.Generic;
using System.Linq;
 
using Foundation;
using UIKit;
 
namespace RgPopupDemo.iOS
{
    // The UIApplicationDelegate for the application. This class is responsible for launching the 
    // User Interface of the application, as well as listening (and optionally responding) to 
    // application events from iOS.
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        //
        // This method is invoked when the application has loaded and is ready to run. In this 
        // method you should instantiate the window, load the UI into it and then make the window
        // visible.
        //
        // You have 17 seconds to return from this method, or iOS will terminate your application.
        //
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            Rg.Plugins.Popup.Popup.Init();
            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new App());
 
            return base.FinishedLaunching(app, options);
        }
    }
}
 

MainPage.xaml

<?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="RgPopupDemo.MainPage">
 
    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <Button Text="Click here to open Popup" Clicked="Button_Clicked" />
 
    </StackLayout>
 
</ContentPage>
 

MainPage.xaml.cs

using Rg.Plugins.Popup.Services;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
 
namespace RgPopupDemo
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
 
        private void Button_Clicked(object sender, EventArgs e)
        {
            Device.BeginInvokeOnMainThread(async () =>
            {
                await PopupNavigation.Instance.PushAsync(new PopupPage(), true);
            });
        }
    }
}
 

PopupPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
             x:Class="RgPopupDemo.PopupPage">
    <pages:PopupPage.Animation>
        <animations:MoveAnimation 
     PositionIn="Bottom"
     PositionOut="Bottom"
     DurationIn="500"
     DurationOut="500"
      EasingIn="BounceIn"
      EasingOut="BounceIn"
            />
    </pages:PopupPage.Animation>
    <ContentPage.Content>
        <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
            <Frame BackgroundColor="White" Margin="20"  HeightRequest="300"  CornerRadius="20" VerticalOptions="CenterAndExpand"  HorizontalOptions="CenterAndExpand">
                <StackLayout VerticalOptions="Center">
                    <Label VerticalTextAlignment="Center" Text="This Is Rg Popup Demo With Animation Effect"  />
                </StackLayout>
            </Frame>
        </StackLayout>
    </ContentPage.Content>
</pages:PopupPage>

PopupPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
 
namespace RgPopupDemo
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class PopupPage : Rg.Plugins.Popup.Pages.PopupPage
    {
        public PopupPage()
        {
            InitializeComponent();
        }
    }
}

How to Open Popup Page:

Device.BeginInvokeOnMainThread(async () =>
{
      await PopupNavigation.Instance.PushAsync(new PopupPage(), true);
});

How to Close Popup Page:

Device.BeginInvokeOnMainThread(async () =>
{
     await PopupNavigation.Instance.PopAsync();
});

Animation That you can Apply:

<pages:PopupPage.Animation>
        <animations:MoveAnimation 
     PositionIn="Bottom"
     PositionOut="Bottom"
     DurationIn="500"
     DurationOut="500"
      EasingIn="BounceIn"
      EasingOut="BounceIn"
            />

Note : namespace required in xml : 

xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"

Duration In / Duration Out : Specify Time in Millisecond 

PositionIn / PositionOut:

• Bottom
• Center
• Left
• Right
• Top

EasinIn / EasinOut:

• Linear
• SinOut
• SinIn
• SinInOut
• CubicIn
• CubicOut
• CubicInOut
• BounceOut
• BounceIn
• SpringIn
• SpringOut