How to Hide the Selection Indicator in .NET MAUI Tab View?

This article explains how to hide the selection indicator in .NET MAUI Tab View. The selection indicator highlights the currently selected tab. If you need to hide this indicator, you can set the IndicatorStrokeThickness property to 0.

Instead of using an indicator, you can highlight the selected tab by changing its TextColor property using the VisualStateManager. The following example demonstrates how to achieve this:

<ContentPage.Resources>
    <Style TargetType="tabView:SfTabItem">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup>
                    <VisualState x:Name="Normal" >
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="Brown" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="Green" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</ContentPage.Resources>
<tabView:SfTabView x:Name="tabView" IndicatorStrokeThickness="0">
    <tabView:SfTabView.Items>
        <tabView:SfTabItem Header="Call" x:Name="callItem" ImageTextSpacing="3"
                     ImagePosition="Top" >
            <tabView:SfTabItem.ImageSource>
                <FontImageSource Glyph="ﺶ" x:Name="call"
                                 Color="{Binding Source={x:Reference callItem},Path=TextColor}"
                             FontFamily="MaterialDesignIcons"/>
            </tabView:SfTabItem.ImageSource>
            <tabView:SfTabItem.Content>
                <ListView RowHeight="50">
                    <ListView.ItemsSource>
                        <x:Array Type="{x:Type x:String}">
                            <x:String>James</x:String>
                            <x:String>Richard</x:String>
                            <x:String>Michael</x:String>
                            <x:String>Alex</x:String>
                            <x:String>Clara</x:String>
                        </x:Array>
                    </ListView.ItemsSource>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Grid Margin="10,5">
                                    <Label VerticalOptions="Start"
                                           HorizontalOptions="Start"
                                           TextColor="#666666"
                                           FontSize="16"
                                           Text="{Binding}" />
                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
        <!-- Add TabItems -->
    </tabView:SfTabView.Items>
</tabView:SfTabView>

This customization is useful when you want a minimalistic design or if you are implementing a custom visual style for the selected tab.

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to hide the selection indicator in .NET MAUI Tab View.
You can refer to our .NET MAUI Tab View feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our .NET MAUI Tab View example to understand how to create and manipulate data.

For current customers, our components are available on the License and Download page. If you are new to Syncfusion®, try our 30-day free trial to try our other controls.

Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!