Change individual chip color

[Artur Aksamit]

Is it possible to set some property (ex. background) for individual chips? I need to have different chips colors inside one group.

[Hemalatha Marikumar]

Hi Artur, 

  

Greeting from Syncfusion. 

  

You can achieve your requirement by using the ItemTemplate support for SfChipGroup and BackgroundColor property of SfChip. Please refer the below code. 

  

Code Snippet [XAML]: 

<syncfusion:SfChipGroup.ItemTemplate> 

    <DataTemplate> 

        <StackLayout> 

            <syncfusion:SfChip Text="{Binding Name}" BackgroundColor="{Binding ChipColor}"/> 

        </StackLayout> 

    </DataTemplate> 

</syncfusion:SfChipGroup.ItemTemplate> 

  

Code Snippet [C#]: Model class 

public class Model 

{ 

    public string Name { get; set; } 

  

    public Color ChipColor { get; set; } 

} 

  

Code Snippet [C#]: Viewmodel 

public class ViewModel : INotifyPropertyChanged 

{ 

    public ObservableCollection<Model> Employees 

    { 

        . . . 

    } 

    

    public ViewModel() 

    { 

        employees = new ObservableCollection<Model>(); 

        employees.Add(new Model() { Name = "John", ChipColor = Color.Red }); 

        employees.Add(new Model() { Name = "Stephen", ChipColor = Color.Yellow }); 

        employees.Add(new Model() { Name = "Michael", ChipColor = Color.Pink }); 

        employees.Add(new Model() { Name = "Joel", ChipColor = Color.Gray }); 

    } 

} 

  

  

Please download the prepared sample from below link   

  

Sample Link – https://www.syncfusion.com/downloads/support/forum/149409/ze/149409-sample-289291215.zip 

   

Screenshot:  

 

  

Please let us know if you need any further assistance on this.  

  

Regards, 

Hemalatha M.