Different background color for selected RibbonTab

Question

I have a WPF Window with a Ribbon with a dark background color (SolidColorBrush)

I have set the font color of the tabs to white, but that's not readable in the selected tab. So I would like to have a black background in the selected tab (or a black font color would also work). My app.xaml contains this code to style it:

<Application.Resources>
    <ResourceDictionary>
        <Style x:Key="SelectedRibbonTab" TargetType="RibbonTab">
            <Setter Property="Background" Value="Black"></Setter>
        </Style>
        <Style TargetType="RibbonTab">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="HeaderStyle" Value="{DynamicResource SelectedRibbonTab}"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="RibbonTabHeader">
            <Setter Property="Foreground" Value="White"></Setter>
        </Style>
    </ResourceDictionary>
</Application.Resources>

It is clearly not working, any solutions how I can fix this?

score 2 · Accepted Answer · answered Mar 25 '21 at 10:31

You can use a single style to change the header text color (Foreground) using IsRibbonTabSelected.

<Style TargetType="RibbonTabHeader">
   <Setter Property="Foreground" Value="White"/>
   <Style.Triggers>
      <Trigger Property="IsRibbonTabSelected" Value="True">
         <Setter Property="Foreground" Value="Black"/>
      </Trigger>
   </Style.Triggers>
</Style>

Changing the background of a ribbon tab is not recommended, as it is not that trivial. The ribbon and ribbon tab backgrounds can be customized by setting the Background property of the Ribbon itself. This will in turn adapt the background color of all tabs in all states. These backgrounds use gradients and are defined in the respective control templates. Again, it is not easy to even get these control templates, see:

How to customize the WPF Ribbon 4.5 (styles, templates, etc.)

If you want to try it nevertheless, here is a related post that links an MSDN forum answer that offers a possible style and control template that might be adapted. However, I recommend to simply use the style above.

An alternative is to use the Fluent.Ribbon instead, which offers more support for customization.

Different background color for selected RibbonTab

1 Answers1