Xamarin.Forms Multi-Select Picker

Vasanthakumar06

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

ColeX

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

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

SimpleBoy

@Vasanthakumar06 use synfusion control.

Vasanthakumar06

@SimpleBoy Synfusion control paid one right ?

SimpleBoy

@Vasanthakumar06 yes

SimpleBoy

but it solve your problem

Vasanthakumar06

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

AlessandroCaliaro

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

@SimpleBoy do you have any program ? using multiselect picker

ColeX

@Vasanthakumar06

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

Vasanthakumar06

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

Thanks in Advance.

Vasanthakumar06

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

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

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

Vasanthakumar06

@Colex https://forums.xamarin.com/discussion/187377/passing-checkbox-value-to-button-click-event#latest

Did You have an solution for this ?