How to remove the indicator icon from Xamarin.Forms chip group (SfChipGroup)

1 min read

This article illustrates how the selected chip selection indicator icon in the Xamarin ChipGroup can be hidden in the filtered type. That was achieved by adding the SfChip as the ItemTemplate of a ChipGroup. The default value of the SfChip's ShowSelectionIndicator property is false. Since, the selection indicator icon will be hidden by default while using the SfChip as an ItemTemplate.

In addition, we have to set the Transparent color to the BackgroundColor and BorderColor of the Chip in the ItemTemplate. It will take the BackgroundColor from the SelectedChipBackgroundColor and ChipBackgroundColor properties of ChipGroup. TextColor of the chips has been updated based on the IsChecked value with ChipTextColor and SelectedChipTextColor properties as per the following code example.

XAML:

…
<buttons:SfChipGroup 
                Type="Filter" 
                x:Name="chipGroup"
                SelectedChipBackgroundColor="DarkGray"
                ChipBackgroundColor="LightGray"
                ChipTextColor="Black"
                SelectedChipTextColor="White"
                SelectionChanged="SessionListFilterOptions_SelectionChanged"
    ItemsSource="{Binding Languages}"
    ChipPadding="8,8,0,0"
                SelectionIndicatorColor="White"
    >
                <buttons:SfChipGroup.ItemTemplate>
                    <DataTemplate>
                        <buttons:SfChip  Text="{Binding Name}"
                                         InputTransparent="True"
                                         BorderColor="Transparent" 
                                         BorderWidth="0"
                                         TextColor="{Binding Source={x:Reference chipGroup},Path=ChipTextColor}"
                                         BackgroundColor="Transparent">
                            <buttons:SfChip.Triggers>
                                <DataTrigger TargetType="buttons:SfChip" Binding="{Binding IsChecked}"  Value="True" >
                                    <Setter Property="TextColor" Value="{Binding Source= {x:Reference chipGroup}, Path=SelectedChipTextColor}"/>
                                </DataTrigger>
                            </buttons:SfChip.Triggers>
                        </buttons:SfChip>
                    </DataTemplate>
                </buttons:SfChipGroup.ItemTemplate>
            </buttons:SfChipGroup>
…

C#:

        private void SessionListFilterOptions_SelectionChanged(object sender, Syncfusion.Buttons.XForms.SfChip.SelectionChangedEventArgs e)
        {
            if (e.AddedItem != null)
            {
                (e.AddedItem as Language).IsChecked = true;
            }
 
            if (e.RemovedItem != null)
            {
                (e.RemovedItem as Language).IsChecked = false;
            }
        }

Output

Xamarin.Forms ChipGroup to remove the selected chip icon.

View the sample in GitHub.

How to remove the indicator icon from Xamarin.Forms chip group (SfChipGroup)

Output

Access denied