How to change text color of a MahApps TabItem

Question

I use MahApps in a WPF application and I have serveral TabControls.

I found how to change font size with :

<TabControl.Resources>
    <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
       <Setter Property="controls:HeaderedControlHelper.HeaderFontSize" Value="12" />
    </Style>
</TabControl.Resources>

I would like to modify the text color, too, but I don't find how to do it.

Could anyone help me please?

Answer 1

Unfortunately, neither HeaderedControlHelper nor TabControlHelper can be used to set the header brushes, as they are hard-coded in the control template of the default style for TabItem.

In order to change the header brushes, you have to copy the default style for TabItem from GitHub and adapt the Foreground brushes which determine the text color in all control states that you need. There are five sections where the foreground brushes are set.

1. Default foreground if not overridden by any other state.

   <Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.Text}" />
   

2. Foreground brush in the selected state of a tab.

   <Trigger Property="IsSelected" Value="true">
      <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.Accent}" />
      <Setter TargetName="Underline" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:TabControlHelper.UnderlineSelectedBrush), Mode=OneWay}" />
   </Trigger>
   

3. Foreground brush when a tab is not selected.

   <Trigger Property="IsSelected" Value="false">
      <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.Gray}" />
   </Trigger>
   

4. Foreground brush when the mouse is over the tab header.

   <Trigger SourceName="Border" Property="IsMouseOver" Value="True">
      <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.Gray.MouseOver}" />
      <Setter TargetName="Underline" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:TabControlHelper.UnderlineMouseOverBrush), Mode=OneWay}" />
   </Trigger>
   

5. Foreground brush when the mouse is over the tab header but not selected.

   <MultiTrigger>
      <MultiTrigger.Conditions>
         <Condition SourceName="Border" Property="IsMouseOver" Value="True" />
         <Condition Property="IsSelected" Value="True" />
      </MultiTrigger.Conditions>
      <Setter TargetName="ContentSite" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.Highlight}" />
      <Setter TargetName="Underline" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:TabControlHelper.UnderlineMouseOverSelectedBrush), Mode=OneWay}" />
   </MultiTrigger>
   

Move your adapted style to a resource dictionary and reference the style by key explicitly or remove the x:Key to make it implicit so it will be applied to all tab items in scope automatically.