MaterialDesignNavigationRailTabControl with materialDesign:ColorZoneAssist.Mode="Custom" #3962
Description
Bug explanation
Here's a simple TabControl:
<!-- MainMenuTabControl -->
<TabControl Grid.Row="0"
materialDesign:ColorZoneAssist.Mode="PrimaryDark"
materialDesign:NavigationRailAssist.ShowSelectionBackground="True"
Background="White"
TabStripPlacement="Left"
Style="{StaticResource MaterialDesignNavigationRailTabControl}">
<!-- ProfilesMenu -->
<TabItem x:Name="MainMenuTabItem"
Width="150"
Height="80">
<TabItem.Header>
<StackPanel>
<materialDesign:PackIcon Width="32"
Height="32"
Margin="0,0,0,5"
HorizontalAlignment="Center"
Kind="BadgeAccount" />
<TextBlock HorizontalAlignment="Center"
d:Text="Profiles"
Text="{DynamicResource Menu_Profiles}"
TextAlignment="Center" />
</StackPanel>
</TabItem.Header>
</TabItem>When we launch this we get this. Everything is fine.
Now if I want to use some custom colors like this:
<!-- MainMenuTabControl -->
<TabControl Grid.Row="0"
materialDesign:ColorZoneAssist.Background="Black"
materialDesign:ColorZoneAssist.Foreground="White"
materialDesign:ColorZoneAssist.Mode="Custom"
materialDesign:NavigationRailAssist.ShowSelectionBackground="True"
Background="White"
TabStripPlacement="Left"
Style="{StaticResource MaterialDesignNavigationRailTabControl}">The result is this:
The items 'disappear', they're still there but their foreground is either the same as the background or transparent. Something changes their foreground color. Even if I add it explicitly on the tab item (Foreground="White") on the designer is shows up but when I run the application it will be the same result as the previous image.
Is there a way I can change the side menu of the tab control to a custom color and still have the items behave normally?
Here's a link to a tiny demo test of this: demoApp
Version
5.2.1