How to change the Fluent Ribbon UI backstage color

Question

How do I change the color of the Fluent Ribbon UI backstage menu which is – by default – blue?

Answer 1

You need to set the Backstage Background Color. This will update the MenuButton, BackstageTabItems and the swish in the corner of the backstage panel. Example below sets the color to Red.

<Fluent:Backstage Background="Red">
    <Fluent:BackstageTabControl>
        <Fluent:BackstageTabItem Header="New"/>
        <Fluent:BackstageTabItem Header="Print"/>
    </Fluent:BackstageTabControl>
</Fluent:Backstage>

Answer 2

Version 3.4.0: you can change the ribbon theme color using the MetroColors.ThemeColorKey property. Put the following code in App.xaml file:

<Application.Resources>
    <ResourceDictionary>

        <!--  This "override" is needed to change the ribbon theme color, do not remove!  -->
        <Color x:Key="{x:Static fluent:MetroColors.ThemeColorKey}">#FFF66AC1</Color>
...

Answer 3

UPDATE

With Fluent.Ribbon version 9.0.4 only the MenuButton is updated when setting the Backstage Background property.

To update the BackstageTabControl ItemsPanel you have to set the BackstageTabControl ItemsPanelBackground property.

You can also set the BackstageTabControl Background which is also not updated wile setting the Backstage Background property.

<Fluent:Backstage Header="myHeader" Background="Red">
    <Fluent:BackstageTabControl ItemsPanelBackground="Red" Background="Red">
         <Fluent:Button Header="Preferences" Command="{Binding OpenPreferencesCommand}" />
         <Fluent:BackstageTabItem Header="Print" />
         <Fluent:Button Header="Blue" />
    </Fluent:BackstageTabControl>
</Fluent:Backstage>