How to customize the colors of Individual Chip controls in .NET MAUI (SfChips)?

The Chip is a versatile control in .NET MAUI that allows you to display information in a compact, interactive format. In this article, we will explore how to customize the colors of each Chip in a .NET MAUI ChipGroup based on the data source.

Step 1: XAML Implementation:

In the XAML code, use the ChipGroup with an ItemTemplate to display Chip controls. The Chip controls are bound to the Name for the Text property and the ChipColor for the Background property.

XAML

<core:SfChipGroup ItemsSource="{Binding Employees}">
    <core:SfChipGroup.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <core:SfChip WidthRequest="100" HeightRequest="50" Text="{Binding Name}" TextColor="White" Background="{Binding ChipColor}">
            </core:SfChip ></StackLayout>
        </DataTemplate>
    </core:SfChipGroup.ItemTemplate>
 </core:SfChipGroup>

Step 2: ViewModel

In the ViewModel class, define a collection of ‘Employee’ models, each with a Name and ChipColor. The ChipColor property is of type Color, allowing you to dynamically set the background color for each Chip.

C#

public class Model 
{
   public string Name { get; set; }
   public Color ChipColor { get; set; }
}

public class ViewModel : INotifyPropertyChanged 
{
  private ObservableCollection<model> employees;

  public event PropertyChangedEventHandler? PropertyChanged;

  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 = Colors.DarkCyan },
      new Model() { Name = "James", ChipColor = Colors.Black },
      new Model() { Name = "Linda", ChipColor = Colors.DarkBlue },
      new Model() { Name = "Mark", ChipColor = Colors.DeepPink }
      };
  }
}

Output

Conclusion
I hope you enjoyed learning how to customize the colors of individual Chip controls in .NET MAUI.

You can refer to our .NET MAUI ChipGroup’s feature tour page to learn about its other groundbreaking features. Explore our .NET MAUI Chips documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our .NET MAUI ChipGroup (SfChipGroup) and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!