Skip to content

This repository contains a sample explaining how to hide the selection indicator in .NET MAUI TabView.

Notifications You must be signed in to change notification settings

SyncfusionExamples/How-to-Hide-the-Selection-Indicator-in-.NET-MAUI-TabView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

This article explains how to hide the selection indicator in .NET MAUI TabView. 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="&#xfeb6;" 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

TabView-Indicator.gif

About

This repository contains a sample explaining how to hide the selection indicator in .NET MAUI TabView.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages