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 display each chip in different colors in the Xamarin.Forms ChipGroup?

Platform: Xamarin.Forms |
Control: SfChipGroup

You can display each chip in different colors by using the ItemTemplate support of SfChipGroup and the BackgroundColor property of SfChip.

The following code sample explains how to display each chip in different colors of the ChipGroup.

XAML:

<syncfusion:SfChipGroup ItemsSource="{Binding Employees}" ChipBackgroundColor="Transparent"
    SelectedChipBackgroundColor="Transparent" Type="Filter" >
 
    <syncfusion:SfChipGroup.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <syncfusion:SfChip Text="{Binding Name}" BackgroundColor="{Binding ChipColor}"/>
            </StackLayout>
        </DataTemplate>
    </syncfusion:SfChipGroup.ItemTemplate>
 
    <syncfusion:SfChipGroup.ChipLayout>
        <FlexLayout HorizontalOptions="Start" 
    VerticalOptions="Center" 
    Direction="Row" 
    Wrap="Wrap"
    JustifyContent="Start"
    AlignContent="Start" 
    AlignItems="Start"/>
    </syncfusion:SfChipGroup.ChipLayout>
 
</syncfusion:SfChipGroup>

C#:

public class ViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Model> employees;
    public ObservableCollection<Model> Employees
    {
        get { return employees; }
        set
        {
            employees = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Employees"));
        }
    }
 
    public ViewModel()
    {
        Employees = new ObservableCollection<Model>()
        {
            new Model() { Name = "John", ChipColor = Color.DarkCyan },
            new Model() { Name = "James", ChipColor = Color.Black },
            new Model() { Name = "Linda", ChipColor = Color.DarkBlue },
            new Model() { Name = "Mark", ChipColor = Color.DeepPink }
        };
    }
}

Output:

SfChip with different colors

See Also:

 

Customize the appearance of Xamarin SfChip

 

How to change the chips type in Xamarin SfChip

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Vincent
Feb 14, 2020

when i copy this code the "Text" appear blank. I have to remove the ChipLayout for it to appear correctly. It seams like the DataTemplate and ChipLayout are mutually exclusive. Is this correct?

Reply
Saravanan Madheswaran [Syncfusion]
Aug 19, 2020

Hi Vincent,

Due to having the framework level issue with FlexLayout in the latest Xamarin.Forms 4.2.x.x and above, it has been occurred. Could you please ensure this with 3.6 version? To obtain the same behavior as per in this document, please change the any other layout instead of FlexLayout.

Thankyou.

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