Innova
Innova

Reputation: 396

Shell: How to change selected text tab color

I need to change shell selected tab text color. I've this code in Styles.xaml:

<Style TargetType="Shell" ApplyToDerivedTypes="True">
    <Setter Property="Shell.BackgroundColor" Value="{StaticResource Tertiary900}" />
    <Setter Property="Shell.ForegroundColor" Value="{StaticResource White}" />
    <Setter Property="Shell.TabBarForegroundColor" Value="{StaticResource Primary}" />
    <Setter Property="Shell.TabBarTitleColor" Value="{StaticResource Primary}" />
    <Setter Property="Shell.TabBarUnselectedColor" Value="{StaticResource Gray200}" />
</Style>

This works fine in Android platform:

enter image description here

but in WinUI I get this:

enter image description here

It seems as if the TabBarTitleColor and TabBarUnselectedColor properties are ignored in WinUI.

Upvotes: 0

Views: 125

Answers (1)

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10148

On .NET 7: Currently on Windows, TabBarForegroundColor is the only API that appears to do anything.

On .NET 8: If users have those other APIs set for Windows those will now start applying correctly to Windows.

The tabs are generated from a WinUI template so if you need to workaround this before NET8 you can just replace the template here with your own template. Add below code to Platform/Windows/App.xaml file.

<maui:MauiWinUIApplication.Resources>
    <DataTemplate x:Key="TabBarNavigationViewMenuItem">
        <NavigationViewItem 
            x:Name="navViewItem"
            Content="Monkey" 
            Foreground="Pink" 
            Background="Green" 
            IsSelected="{Binding IsSelected, Mode=TwoWay}"
            MenuItemsSource="{Binding MenuItemsSource}"
            Icon="{Binding Icon}"
            />
    </DataTemplate>
</maui:MauiWinUIApplication.Resources>

For more information, you can refer to https://github.com/dotnet/maui/blob/main/src/Controls/src/Core/Platform/Windows/TabbedPage/TabbedPageStyle.xaml.

Upvotes: 0

Related Questions