How to fix C# WPF Tab Hover Color to NOT change color when Tab is set to background custom color?

Question

In my Visual Studio 2010 C# WPF Application, I have 7 tabs with alternating colors which is what my client needs. They do not like the Hovering over the tab with a mouse and having the background color of the tab change even though the tab is not getting selected.

Partial WPF XAML Code for Dialog looks like the following:

 .
 .
 .
 <TabControl Width="auto" Height="auto" Name="MyTabs" SelectionChanged="MyTabs_SelectionChanged">
    <TabItem Header="Tab 1" >
       <TabItem.Resources>
          <Style TargetType="{x:Type TabItem}">
             <Setter Property="Background" Value="LightGreen"></Setter>
          </Style>
       </TabItem.Resources>
 .
 .
 . Tab Contents
 .
 .
 .
    </TabItem>
 .
 .
 .
    <TabItem Header="Tab 2" >
       <TabItem.Resources>
          <Style TargetType="{x:Type TabItem}">
             <Setter Property="Background" Value="LightBlue"></Setter>
          </Style>
       </TabItem.Resources>
 .
 .
 . Tab Contents
 .
 .
 .
    </TabItem>
 .
 .
 .
 </TabControl>

If I do not change the Tab Background colors, there is no issue. However for the end user having the Tabs colored helps in the particular application.

My question is how NOT to change the Tab Color when Hovering over the Tab with the Mouse when I need to have custom background colors for the WPF Tabs?

Answer 1

"Your post appears to contain code that is not properly formatted as code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, click the [?] toolbar icon."

When attempting to post the solution. Have tried multiple times to paste the code sample here.

My fix is posted here: (No behind the scenes code needed!) https://docs.microsoft.com/en-us/answers/questions/29021/visual-studio-2010-how-to-fix-c-wpf-tab-hover-colo.html?childToView=29528#answer-29528

Answer 2

<Window x:Class="WPF_Tab_Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
        Width="800"
        Height="600"
        >
   <Window.Resources>
      <Style x:Key="tabItemStyle" TargetType="{x:Type TabItem}">
         <Setter Property="FocusVisualStyle">
            <Setter.Value>
               <Style>
                  <Setter Property="Control.Template">
                     <Setter.Value>
                        <ControlTemplate>
                           <Rectangle Margin="2" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                        </ControlTemplate>
                     </Setter.Value>
                  </Setter>
               </Style>
            </Setter.Value>
         </Setter>
         <Setter Property="Foreground" Value="Black"/>
         <Setter Property="Background">
            <Setter.Value>
               <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                  <GradientStop Color="#FFF0F0F0" Offset="0"/>
                  <GradientStop Color="#FFE5E5E5" Offset="1"/>
               </LinearGradientBrush>
            </Setter.Value>
         </Setter>
         <Setter Property="BorderBrush" Value="#FFACACAC"/>
         <Setter Property="Margin" Value="0"/>
         <Setter Property="Padding" Value="6,2"/>
         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
         <Setter Property="VerticalContentAlignment" Value="Stretch"/>
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type TabItem}">
                  <Grid x:Name="templateRoot" SnapsToDevicePixels="True">
                     <Border x:Name="mainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Margin="0">
                        <Border x:Name="innerBorder" BorderBrush="#FFACACAC" BorderThickness="1,1,1,0" Background="White" Margin="-1" Opacity="0"/>
                     </Border>
                     <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
                  </Grid>
                  <ControlTemplate.Triggers>
                     <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                           <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                           <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Left"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                        <Setter Property="Background" TargetName="mainBorder" Value="#FFF0F0F0"/>
                        <Setter Property="BorderBrush" TargetName="mainBorder" Value="#FFD9D9D9"/>
                        <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/>
                        <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>
                     </MultiDataTrigger>
                     <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                           <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                           <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Bottom"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                        <Setter Property="Background" TargetName="mainBorder" Value="#FFF0F0F0"/>
                        <Setter Property="BorderBrush" TargetName="mainBorder" Value="#FFD9D9D9"/>
                        <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/>
                        <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>
                     </MultiDataTrigger>
                     <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                           <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                           <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Right"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                        <Setter Property="Background" TargetName="mainBorder" Value="#FFF0F0F0"/>
                        <Setter Property="BorderBrush" TargetName="mainBorder" Value="#FFD9D9D9"/>
                        <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/>
                        <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>
                     </MultiDataTrigger>
                     <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                           <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                           <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Top"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Opacity" TargetName="contentPresenter" Value="0.56"/>
                        <Setter Property="Background" TargetName="mainBorder" Value="#FFF0F0F0"/>
                        <Setter Property="BorderBrush" TargetName="mainBorder" Value="#FFD9D9D9"/>
                        <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                        <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                     </MultiDataTrigger>
                     <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                           <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                           <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Left"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/>
                        <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>
                     </MultiDataTrigger>
                     <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                           <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                           <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Left"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Panel.ZIndex" Value="1"/>
                        <Setter Property="Margin" Value="-2,-2,0,-2"/>
                        <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                        <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,0,1"/>
                        <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,0,1"/>
                     </MultiDataTrigger>
                     <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                           <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                           <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Bottom"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/>
                        <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>
                     </MultiDataTrigger>
                     <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                           <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                           <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Bottom"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Panel.ZIndex" Value="1"/>
                        <Setter Property="Margin" Value="-2,0,-2,-2"/>
                        <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                        <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,0,1,1"/>
                        <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,0,1,1"/>
                     </MultiDataTrigger>
                     <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                           <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                           <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Right"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/>
                        <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>
                     </MultiDataTrigger>
                     <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                           <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                           <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Right"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Panel.ZIndex" Value="1"/>
                        <Setter Property="Margin" Value="0,-2,-2,-2"/>
                        <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                        <Setter Property="BorderThickness" TargetName="innerBorder" Value="0,1,1,1"/>
                        <Setter Property="BorderThickness" TargetName="mainBorder" Value="0,1,1,1"/>
                     </MultiDataTrigger>
                     <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                           <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                           <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Top"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                        <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                     </MultiDataTrigger>
                     <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                           <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                           <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Top"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Panel.ZIndex" Value="1"/>
                        <Setter Property="Margin" Value="-2,-2,-2,0"/>
                        <Setter Property="Opacity" TargetName="innerBorder" Value="1"/>
                        <Setter Property="BorderThickness" TargetName="innerBorder" Value="1,1,1,0"/>
                        <Setter Property="BorderThickness" TargetName="mainBorder" Value="1,1,1,0"/>
                     </MultiDataTrigger>
                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>
   </Window.Resources>

   <Grid>
      <TabControl Width="auto" Height="auto" Name="MyTabs" >
         <TabItem Header="Tab 1 - No Hover Color Change" >
            <TabItem.Resources>
               <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource  tabItemStyle}">
                  <Setter Property="Background" Value="LightGreen"></Setter>
               </Style>
            </TabItem.Resources>
         </TabItem>
         <TabItem Header="Tab 2 - No Hover Color Change" >
            <TabItem.Resources>
               <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource  tabItemStyle}">
                  <Setter Property="Background" Value="LightBlue"></Setter>
               </Style>
            </TabItem.Resources>
         </TabItem>
         <TabItem Header="Tab 3 - No Hover Color Change" >
            <TabItem.Resources>
               <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource  tabItemStyle}">
                  <Setter Property="Background" Value="LightGreen"></Setter>
               </Style>
            </TabItem.Resources>
         </TabItem>
         <TabItem Header="Tab 4 - No Hover Color Change" >
            <TabItem.Resources>
               <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource tabItemStyle}">
                  <Setter Property="Background" Value="LightBlue"></Setter>
               </Style>
            </TabItem.Resources>
         </TabItem>
         <TabItem Header="Tab 5 - Hover Color Changes" >
            <TabItem.Resources>
               <Style TargetType="{x:Type TabItem}">
                  <Setter Property="Background" Value="LightGreen"></Setter>
               </Style>
            </TabItem.Resources>
         </TabItem>
         <TabItem Header="Tab 6 - Hover Color Changes" >
            <TabItem.Resources>
               <Style TargetType="{x:Type TabItem}">
                  <Setter Property="Background" Value="LightBlue"></Setter>
               </Style>
            </TabItem.Resources>
         </TabItem>
         <TabItem Header="Tab 7 - No Hover Color Change" >
            <TabItem.Resources>
               <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource tabItemStyle}">
                  <Setter Property="Background" Value="LightGray"></Setter>
               </Style>
            </TabItem.Resources>
         </TabItem>
         <TabItem Header="Tab 8 - Hover Color Changes" >
            <TabItem.Resources>
               <Style TargetType="{x:Type TabItem}">
                  <Setter Property="Background" Value="LightGray"></Setter>
               </Style>
            </TabItem.Resources>
         </TabItem>
      </TabControl>   
   </Grid>
</Window>