How to apply selection indicator in .NET MAUI Chip Group?

Overview

This article covers implementing a selection indicator for the .NET MAUI Chip when the chip type is Choice. The steps involve setting up the model and the view model and managing the selection behavior with the appropriate event handler to indicate the selected chip.

Model Definition

The ChipModel class should implement the INotifyPropertyChanged interface to notify the UI of property changes. Here’s an example of how to define the model:

public class ChipModel: INotifyPropertyChanged
{
    //Declare method and event for PropertyChanged

    private bool showSelectionIndicator;

    public bool ShowSelectionIndicator
    {
        get
        {
            return showSelectionIndicator;
        }
        set
        {
            showSelectionIndicator = value;
            OnPropertyChanged(nameof(ShowSelectionIndicator));
        }
    }
    private Color selectedColor;
    
    public Color SelectedColor
    {
        get
        {
            return selectedColor;
        }
        set
        {
            selectedColor = value;
            OnPropertyChanged(nameof(SelectedColor));
        }
    }

    public string Name { get; set; }
    public int ID { get; set; }
}

ViewModel Setup

Define the view model to manage the collection of chips.

public class ChipViewModel: INotifyPropertyChanged
{
    //Declare method and event for PropertyChanged
    
    private ObservableCollection<ChipModel> dataList;
    public ObservableCollection<ChipModel> DataList
    {
        get { return dataList; }
        set
        {
            dataList= value;
            OnPropertyChanged(nameof(DataList));
        }
    }

    public ChipViewModel()
    {
        // Initialize DataList with sample data
    }
}

XAML Layout

Define the SfChipGroup in XAML:

<chip:SfChipGroup x:Name="chipgroup" HeightRequest="40" HorizontalOptions="Center"
               ChipType="Choice" SelectedChipBackground="#00B0FF"
               SelectionChanged="chipgroup_SelectionChanged"
               ItemsSource="{Binding DataList}">
    <chip:SfChipGroup.ItemTemplate>
        <DataTemplate>
            <chip:SfChip Text="{Binding Name}" 
                         TextColor="{Binding SelectedColor}"
                         SelectionIndicatorColor="Red" 
                         FontAttributes="{Binding FontAttributes}"
                         ShowSelectionIndicator="{Binding ShowSelectionIndicator}">
            </chip:SfChip>
        </DataTemplate>
    </chip:SfChipGroup.ItemTemplate>
</chip:SfChipGroup>

Code Behind

Handle the SelectionChanged event to update the selected and deselected chips:

private void chipgroup_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var addedChip = e.AddedItem;
    var removedChip = e.RemovedItem;
    if (viewModel != null)
    {
        if(addedChip != null)
        {
            foreach (var item in viewModel.DataList)
            {
                if (addedChip.Equals(item))
                {
                    item.ShowSelectionIndicator= true;
                    item.SelectedColor = Colors.White;
                    item.FontAttributes = FontAttributes.Bold;
                }
            }
        }
        if(removedChip != null)
        {
            foreach (var item in viewModel.DataList)
            {
                if (removedChip.Equals(item))
                {
                    item.ShowSelectionIndicator= false;
                    item.SelectedColor = Colors.Black;
                    item.FontAttributes = FontAttributes.None;
                }
            }
        }
    }            

By following these steps, you can successfully apply a selection indicator to choice chips in a .NET MAUI application.

Output

Download the complete sample in GitHub

Conclusion
I hope you found this guide on applying a selection indicator to choice chips in .NET MAUI Chips group informative.

You can refer to our .NET MAUI Chip feature tour to learn about its other groundbreaking features. You can explore our .NET MAUI Chip documentation to understand how to present and manipulate data.

For current customers, our .NET MAUI components from the License and Downloads page. If you’re new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI Chip group (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’re always happy to assist you!