Category / Section
How to select a multiple chips from the Xamarin ChipGroup [SfChipGroup]
1 min read
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
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?