We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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


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.

 

See Also:

 

What are the types available in ChipGroup?

 

What are the customizations available in ChipGroup?

How to notify selection changes in ChipGroup?

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile