Xamarin.Forms Multi-Select Picker

Vasanthakumar06 · October 22

Hi Techie,
I'm looking for same output as like this . I tried lot but i couldn't able to find the solution.

ColeX · October 22

Before this you have to know multiple things

Binding basic
Messaging Center
Usage of Rg.Plugins.Popup
ListView

...

Here is an example you could refer to

Page1

   //xaml
   <ContentPage.Content>
        <StackLayout VerticalOptions="Start">
            <Entry Focused="Entry_Focused" Placeholder="Please select" x:Name="entry"/>
        </StackLayout>
    </ContentPage.Content>

  //code behind
   public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();
        }

        private async void Entry_Focused(object sender, FocusEventArgs e)
        {
            await Navigation.PushPopupAsync(new Page2());
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            MessagingCenter.Subscribe<object, string>(this,"Hi",(obj,s)=> {
                entry.Text = s;
            });
        }
    }

Page2

//xaml
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsApp.Page2"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
             xmlns:local="clr-namespace:FormsApp"
             >
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation 
            PositionIn="Center"
            PositionOut="Center"
            ScaleIn="1.2"
            ScaleOut="0.8"
            DurationIn="400"
            DurationOut="300"
            EasingIn="SinOut"
            EasingOut="SinIn"
            HasBackgroundAnimation="True"/>
    </pages:PopupPage.Animation>

    <StackLayout>
        <ListView x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                            <Label Text="{Binding Text}" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
                            <CheckBox IsChecked="{Binding IsChecked}" HorizontalOptions="EndAndExpand" Color="Black"/>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <Button Text="Done" Clicked="Button_Clicked" HorizontalOptions="Center" WidthRequest="100" VerticalOptions="EndAndExpand"/>
    </StackLayout>

</pages:PopupPage>



///Code behind
public class Model : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        // This method is called by the Set accessor of each property.  
        // The CallerMemberName attribute that is applied to the optional propertyName  
        // parameter causes the property name of the caller to be substituted as an argument.  
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        public Model()
        {
            IsChecked = false;
        }

        public string Text { get; set; }

        private bool isChecked;
        public bool IsChecked {
            get
            {
                return isChecked;
            }
            set {
                isChecked = value;
                NotifyPropertyChanged();
            }
        }
    }

    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Page2 : PopupPage
    {

        List<Model> list = new List<Model>();
        public Page2()
        {
            InitializeComponent();

            this.BackgroundColor = Color.White;


            list.Add(new Model() { Text = "A" });
            list.Add(new Model() { Text = "B" });
            list.Add(new Model() { Text = "C" });
            list.Add(new Model() { Text = "D" });

            listView.ItemsSource = list;
        }

        private async void Button_Clicked(object sender, EventArgs e)
        {
            await Navigation.PopPopupAsync();

            var result = list.Where(w => w.IsChecked==true).ToList();

            string s = "";

            int index = 0;
            foreach(var  model in result)
            {
                s = s + model.Text;
                if(index < result.Count-1)
                {
                    s = s + ",";
                }           
                index++;
            }

            MessagingCenter.Send<object,string>(this,"Hi",s);
        }
    }

AlessandroCaliaro · October 22

maybe a popup with a listview... each item has a label and a checkbox

SimpleBoy · October 22

@Vasanthakumar06 use synfusion control.

Vasanthakumar06 · October 22

@SimpleBoy Synfusion control paid one right ?

SimpleBoy · October 22

@Vasanthakumar06 yes

SimpleBoy · October 22

but it solve your problem

Vasanthakumar06 · October 22

@AlessandroCaliaro I'm new to Xamarin forms , can u give some example program .

AlessandroCaliaro · October 22

https://github.com/rotorgames/Rg.Plugins.Popup for the popup
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/ for the collectionview
https://docs.microsoft.com/it-it/xamarin/xamarin-forms/user-interface/checkbox for the checkbox

Vasanthakumar06 · October 22

@SimpleBoy do you have any program ? using multiselect picker

ColeX · October 22

@Vasanthakumar06

As Alessandro suggested, you could simply use popup + collecitonview/listview + checkbox ,which part is difficult for you?

Vasanthakumar06 · October 22

@ColeX Can you give me sample program regarding this probelm .

Thanks in Advance.

Vasanthakumar06 · October 22

Hi @ColeX Im looking for Sample like , I have an Entry , If i tapped an Entry it will pop up and show all the collection view with check box and once submit.Selected Index will display like label with commas.

Thanks,
Vasanth

ColeX · October 22

Before this you have to know multiple things

Binding basic
Messaging Center
Usage of Rg.Plugins.Popup
ListView

...

Here is an example you could refer to

Page1

   //xaml
   <ContentPage.Content>
        <StackLayout VerticalOptions="Start">
            <Entry Focused="Entry_Focused" Placeholder="Please select" x:Name="entry"/>
        </StackLayout>
    </ContentPage.Content>

  //code behind
   public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();
        }

        private async void Entry_Focused(object sender, FocusEventArgs e)
        {
            await Navigation.PushPopupAsync(new Page2());
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            MessagingCenter.Subscribe<object, string>(this,"Hi",(obj,s)=> {
                entry.Text = s;
            });
        }
    }

Page2

//xaml
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsApp.Page2"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
             xmlns:local="clr-namespace:FormsApp"
             >
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation 
            PositionIn="Center"
            PositionOut="Center"
            ScaleIn="1.2"
            ScaleOut="0.8"
            DurationIn="400"
            DurationOut="300"
            EasingIn="SinOut"
            EasingOut="SinIn"
            HasBackgroundAnimation="True"/>
    </pages:PopupPage.Animation>

    <StackLayout>
        <ListView x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                            <Label Text="{Binding Text}" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
                            <CheckBox IsChecked="{Binding IsChecked}" HorizontalOptions="EndAndExpand" Color="Black"/>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <Button Text="Done" Clicked="Button_Clicked" HorizontalOptions="Center" WidthRequest="100" VerticalOptions="EndAndExpand"/>
    </StackLayout>

</pages:PopupPage>



///Code behind
public class Model : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        // This method is called by the Set accessor of each property.  
        // The CallerMemberName attribute that is applied to the optional propertyName  
        // parameter causes the property name of the caller to be substituted as an argument.  
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        public Model()
        {
            IsChecked = false;
        }

        public string Text { get; set; }

        private bool isChecked;
        public bool IsChecked {
            get
            {
                return isChecked;
            }
            set {
                isChecked = value;
                NotifyPropertyChanged();
            }
        }
    }

    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Page2 : PopupPage
    {

        List<Model> list = new List<Model>();
        public Page2()
        {
            InitializeComponent();

            this.BackgroundColor = Color.White;


            list.Add(new Model() { Text = "A" });
            list.Add(new Model() { Text = "B" });
            list.Add(new Model() { Text = "C" });
            list.Add(new Model() { Text = "D" });

            listView.ItemsSource = list;
        }

        private async void Button_Clicked(object sender, EventArgs e)
        {
            await Navigation.PopPopupAsync();

            var result = list.Where(w => w.IsChecked==true).ToList();

            string s = "";

            int index = 0;
            foreach(var  model in result)
            {
                s = s + model.Text;
                if(index < result.Count-1)
                {
                    s = s + ",";
                }           
                index++;
            }

            MessagingCenter.Send<object,string>(this,"Hi",s);
        }
    }

Vasanthakumar06 · October 22

@ColeX Partially program is working , Once i done with selected index . Its throwing error "Object reference not set to an instance of an object.'"

Xamarin

Quick Links

Xamarin.Forms Multi-Select Picker

Best Answer

Page1

Page2

Answers

Page1

Page2