Populating Items in .NET MAUI Chips (SfChipGroup)

27 Jul 20265 minutes to read

SfChipGroup supports two ways to populate its items:

  • Business objects - bind a collection to the ItemsSource property.
  • SfChip instances - add SfChip controls to the Items collection.

This section explain how to populate the chips control with business objects and SfChip.

Prerequisites

Before using the SfChip, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Core

For a step-by-step setup, refer to the Getting Started documentation.

Populate with business objects

Business objects can be populated in Chips using the ItemsSource property. By default, the Chip’s Text is set to the string representation of each item. Use DisplayMemberPath to bind a specific property of the business object.

The following example uses a simple Employee model and list of employees exposed by a view model.

<chip:SfChipGroup x:Name="chipGroup"
                  Type="Action"
                  DisplayMemberPath="Name"
                  ItemsSource="{Binding Employees}">
    <chip:SfChipGroup.BindingContext>
		<local:ViewModel />
	</chip:SfChipGroup.BindingContext>
</chip:SfChipGroup>
var viewModel = new EmployeeViewModel();
BindingContext = viewModel;
var chipGroup = new SfChipGroup
{
    ChipType = SfChipsType.Action,
    DisplayMemberPath = nameof(Employee.Name),
    ItemsSource = viewModel.Employees
};
Content = chipGroup;
public class Employee
{
    public string Name { get; set; } = string.Empty;
}

public class EmployeeViewModel
{
    public ObservableCollection<Employee> Employees { get; } = new()
    {
        new Employee { Name = "John" },
        new Employee { Name = "Jane" },
        new Employee { Name = "Alex" }
    };
}

NOTE

To render a custom view for each item, set the ItemTemplate property instead of DisplayMemberPath. The template receives each business object as its BindingContext.

Populate with SfChip instances

Add SfChip controls to the Items collection. Use this approach when you need full control over each chip’s appearance or when the items are not derived from a data model.

<chip:SfChipGroup x:Name="chipGroup" 
                  ChipType="Action">
    <chip:SfChipGroup.Items>
        <chip:SfChip Text="Extra Small" 
                     TextColor="White" 
                     Background="Blue" />
        <chip:SfChip Text="Small" 
                     TextColor="White" 
                     Background="Blue" />
        <chip:SfChip Text="Medium" 
                     TextColor="White" 
                     Background="Blue" />
        <chip:SfChip Text="Large" 
                     TextColor="White" 
                     Background="Blue" />
        <chip:SfChip Text="Extra Large" 
                     TextColor="White" 
                     Background="Blue" />
    </chip:SfChipGroup.Items>
</chip:SfChipGroup>
var chipGroup = new SfChipGroup
{
    ChipType = SfChipsType.Action,
};

chipGroup.Items.Add(new SfChip { Text = "Extra Small", Background = Colors.Blue, TextColor = Colors.White });
chipGroup.Items.Add(new SfChip { Text = "Small", Background = Colors.Blue, TextColor = Colors.White });
chipGroup.Items.Add(new SfChip { Text = "Medium", Background = Colors.Blue, TextColor = Colors.White });
chipGroup.Items.Add(new SfChip { Text = "Large", Background = Colors.Blue, TextColor = Colors.White });
chipGroup.Items.Add(new SfChip { Text = "Extra Large", Background = Colors.Blue, TextColor = Colors.White });

Content = chipGroup;

SfChipGroup populated with five SfChip instances using the Action chip type

See Also