Overview

This article covers implementing a selection indicator for the .NET MAUI ChipGroup 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