We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to select a multiple chips from the Xamarin ChipGroup [SfChipGroup]

Platform: Xamarin.Forms |
Control: SfChipGroup |
Published Date: March 5, 2020 |
Last Revised Date: March 10, 2020

This article shows how to choose multiple chips from the Xamarin.Forms SfChipGroup. You can programmatically select the chips by using the SelectedItems property.

 

Let us have a use case to select more than one language from the list. To achieve those, populate the desired list and predefined selected items from the view model class as follows.

 

XAML:

  <buttons:SfChipGroup 
                Type="Filter"   
                ItemsSource="{Binding Languages}"
                SelectedChipBackgroundColor="Red"
                ChipPadding="8,8,0,0"
                SelectionIndicatorColor="White"
                SelectedItems="{Binding SelectedItems}"
   DisplayMemberPath="Name">
  </buttons:SfChipGroup>

 

 

C#:

 

  public class ViewModel : INotifyPropertyChanged
    {
 
        private ObservableCollection<Language> languages;
        public ObservableCollection<Language> Languages
        {
            get
            {
                return languages;
            }
            set
            {
                languages = value;
                OnPropertyChanged("Languages");
            }
        }
 
        private ObservableCollection<Language> selectedItems;
        public ObservableCollection<Language> SelectedItems
        {
            get
            {
                return selectedItems;
            }
            set
            {
                selectedItems = value;
                OnPropertyChanged("SelectedItems");
            }
        }
 
        public ViewModel()
        {
            Languages = new ObservableCollection<Language>();
            Languages.Add(new Language() { Name = "C#" });
            Languages.Add(new Language() { Name = "HTML" });
            Languages.Add(new Language() { Name = "Java" });
            Languages.Add(new Language() { Name = "JS" });
 
            selectedItems = new ObservableCollection<Language>() { Languages[0], Languages[1]     };
 
        }
…
    }

 

Output

MultiSelection mode of Xamarin.Forms SfChipGroup

 

 

Please download the sample here

 

See Also:

 

What are the types available in ChipGroup?

 

What are the customizations available in ChipGroup?

How to notify selection changes in ChipGroup?

 

 

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile