Articles in this section
Category / Section

How to customize the text color of the header in .NET MAUI TabView?

5 mins read

In this article, you can learn how to customize the text color of the header in a .NET MAUI TabView. This can be achieved by using the VisualStateManager to define different visual states for the TabItem.

XAML

  1. Define a Style for SfTabItem: Create a style targeting TabItem and set the VisualStateManager.VisualStateGroups property.
  2. Define Visual States: Within the VisualStateGroup, define visual states such as Normal, Selected, SelectedFilled, and NormalFilled.
  3. Set TextColor for Each State: Use Setter elements within each VisualState to set the TextColor property.
<ContentPage.Resources>
    <ResourceDictionary>
        <Style TargetType="tabView:SfTabItem">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup>
                        <VisualState x:Name="Normal" >
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="Black" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="NormalFilled">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="Black" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="#6200EE" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="SelectedFilled">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="White" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="Red" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="PressedFilled">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="Red" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="InActivePressed">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="Yellow" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="InActivePressedFilled">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="Yellow" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

<ContentPage.Content>
    <Grid>            
        <tabView:SfTabView IndicatorPlacement="Fill">
            <tabView:SfTabItem Header="FAVOURITES">
                <!--TabItem Content-->
            </tabView:SfTabItem>
             ...
        </tabView:SfTabView>
    </Grid>
</ContentPage.Content>
  • Normal State: Sets the text color to the header when the tab item is normal and IndicatorPlacement is top or bottom.
  • Selected State: Sets the text color to the header when the tab item is selected and IndicatorPlacement is top or bottom.
  • NormalFilled State: Sets the text color to the header when the tab item is in its normal and IndicatorPlacement is fill.
  • SelectedFilled State: Sets the text color to the header when the tab item is selected and IndicatorPlacement is fill.

Output

HeaderColor_Normal.gif

HeaderColor_Filled.gif

Download the complete sample on GitHub

Conclusion

Hope you enjoyed learning about how to customize the text color of the header in .NET MAUI TabView.

You can refer to our .NET MAUI Tab View’s feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Tab View documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied