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