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

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
Hope you enjoyed learning about how to apply selection indicator for choice chip type in .NET MAUI Chips group.

You can refer to our .NET MAUI Chip feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Chip 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 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 are always happy to assist you!