How to Wrap and Auto-Size Chips in .NET MAUI ChipGroup?

This section explains how to wrap chip items with auto-sizing in .NET MAUI Chips. To achieve this, the FlexLayout is used as the ChipLayout, and each chip is placed inside a HorizontalStackLayout within the ItemTemplate, which helps maintain individual widths for the chips.

Steps to Achieve This:

Step 1: Define ChipGroup with FlexLayout and Wrap Property

The ChipGroup uses a FlexLayout for arranging the chips. Set the Wrap property of the FlexLayout to “Wrap” to ensure chips are wrapped correctly and maintain their individual size.

XAML:

<chip:SfChipGroup ItemsSource="{Binding Employees}">
    <chip:SfChipGroup.ChipLayout>
        <FlexLayout Wrap="Wrap"/>
    </chip:SfChipGroup.ChipLayout>
    <chip:SfChipGroup.ItemTemplate>
        <DataTemplate>
            <HorizontalStackLayout>
                <chip:SfChip Text="{Binding Name}" />
            </HorizontalStackLayout>
        </DataTemplate>
    </chip:SfChipGroup.ItemTemplate>
</chip:SfChipGroup>

In this example:
• FlexLayout: The Wrap=“Wrap” property ensures that when the screen width is full, chips will wrap to the next line, preventing overflow.
• HorizontalStackLayout: Each SfChip is placed inside a HorizontalStackLayout to maintain auto-sizing behavior based on the text length.

Step 2: Add Items to ChipGroup

The ItemsSource property is bound to the collection (in this case, Employees), which provides the list of chips to display. The Text property of each SfChip is set to the Name property from each Employee object.

C#:

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

    public ObservableCollection<Person> Employees
    {
        get { return employees; }
        set { employees = value; OnPropertyChanged("Employees"); }
    }

    public ViewModel()
    {
        employees = new ObservableCollection<Person>();
        employees.Add(new Person() { Name = "Johnathan Alexander" });
        employees.Add(new Person() { Name = "Jameson William" });
        employees.Add(new Person() { Name = "Linda-Marie Johnson" });
        employees.Add(new Person() { Name = "Rosemary Thompson" });
        employees.Add(new Person() { Name = "Jameson Michael" });
        employees.Add(new Person() { Name = "Jameson Lee" });
        employees.Add(new Person() { Name = "Jameson Carter" });
        employees.Add(new Person() { Name = "Jameson Thomas" });
        employees.Add(new Person() { Name = "Markus Theodore" });
        employees.Add(new Person() { Name = "Elizabeth Grace" });
    }
}

Step 3: Test the Chip Overflow Behavior

As you add more items to the ItemsSource, the chips should maintain their auto-sizing behavior and wrap to the next line once they reach the edge of the parent container.

Output:

Download the complete sample from the GitHub.

Conclusion

I hope you enjoyed learning how to wrap chip items with auto-sizing in SfChipGroup using FlexLayout in the .NET MAUI Chip (SfChip).

Refer to our .NET MAUI Chips feature tour page for other groundbreaking features. You can explore our .NET MAUI Chips documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI Chip and other .NET MAUI components.

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