|
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?
|
2X faster development
The ultimate Xamarin UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
