locked
Xamarin.Forms Multi-Select Picker RRS feed

  • Question

  • User397066 posted

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

    Thursday, October 22, 2020 5:07 AM

Answers

  • User369978 posted

    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

    //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

    <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>
    

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

    ```

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, October 22, 2020 7:37 AM

All replies

  • User2148 posted

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

    Thursday, October 22, 2020 5:23 AM
  • User397289 posted

    @Vasanthakumar06 use synfusion control.

    Thursday, October 22, 2020 5:26 AM
  • User397066 posted

    @SimpleBoy Synfusion control paid one right ?

    Thursday, October 22, 2020 5:42 AM
  • User397289 posted

    @Vasanthakumar06 yes

    Thursday, October 22, 2020 5:45 AM
  • User397289 posted

    but it solve your problem

    Thursday, October 22, 2020 5:45 AM
  • User397066 posted

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

    Thursday, October 22, 2020 5:47 AM
  • User2148 posted

    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

    Thursday, October 22, 2020 5:48 AM
  • User397066 posted

    @SimpleBoy do you have any program ? using multiselect picker

    Thursday, October 22, 2020 5:49 AM
  • User369978 posted

    @Vasanthakumar06

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

    Thursday, October 22, 2020 6:51 AM
  • User397066 posted

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

    Thanks in Advance.

    Thursday, October 22, 2020 7:30 AM
  • User397066 posted

    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

    Thursday, October 22, 2020 7:33 AM
  • User369978 posted

    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

    //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

    <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>
    

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

    ```

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, October 22, 2020 7:37 AM
  • User397066 posted

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

    Thursday, October 22, 2020 7:54 AM
  • User397066 posted

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

    Did You have an solution for this ?

    Thursday, February 11, 2021 2:21 PM