Modifying the Backstage "Side" Color

[Christopher Thibeault]

I'm currently using a Ribbon in my WPF application and I'm trying to modify the color that appears in the "side" panel (where the BackstageTabItems go) when Backstage opens. Right now, it always appears to use a color defined by the theme in use, even if I set BackstageColor to a different value. 

How can I override this behavior to provide a different color, separate from any built-in themes? 

[Mason Green]

Customizing the backstage appearance can really help applications feel more consistent with a brand’s overall UI theme. The solution and screenshots were very helpful for understanding how the side color styling works in Syncfusion.

[Raghavendra Sudhakar]

Hi Christopher Thibeault,

Thank you for reaching out to us.

We understand that you would like to customize the BackStageColor, as well as the selection and hover background colors of the BackstageTabItem and BackStageCommandButton, independently of the built-in themes.

When a theme is applied, it typically overrides the default background properties for hover and selection states. To apply your own custom colors, it is necessary to override the ControlTemplate for both controls using custom styles.

To achieve this, you can extract the default templates and explicitly set the Background property for the elements responsible for these visual states (commonly named hoverBorder and selectedBorder).

Below is an example demonstrating how this can be implemented in the application (for BackStageTabItem):

1. Define Custom Styles (e.g., in App.xaml)

In this example, the hover background is set to Yellow and the selection background to Red. You may adjust these values as needed.

<Style x:Key="BackstageTabItemstyle" TargetType="{x:Type syncfusion:BackstageTabItem}">

    <Setter Property="MinHeight" Value="38" />

    <Setter Property="MinWidth" Value="125" />

    <Setter Property="Margin" Value="0,2,0,1" />

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type syncfusion:BackstageTabItem}">

                <Grid x:Name="layoutRoot" Background="Transparent">

                    <!-- Hover Background -->

                    <Border x:Name="hoverBorder"

                            Width="{TemplateBinding Width}"

                            Height="{TemplateBinding Height}"

                            Margin="0,0,1,0"

                            Background="Yellow"

                            Visibility="Collapsed" />

                    <!-- Selection Background -->

                    <Border x:Name="selectedBorder"

                            Width="{TemplateBinding Width}"

                            Height="{TemplateBinding Height}"

                            Background="Red"

                            Visibility="Collapsed" />

                    <ContentPresenter x:Name="controlHeaderLabel"

                                      Margin="19,0"

                                      HorizontalAlignment="Left"

                                      VerticalAlignment="Center"

                                      ContentSource="Header"

                                      TextElement.Foreground="{TemplateBinding Foreground}" />

                </Grid>

                <ControlTemplate.Triggers>

                    <!-- Hover -->

                    <Trigger Property="IsMouseOver" Value="True">

                        <Setter TargetName="hoverBorder" Property="Visibility" Value="Visible" />

                    </Trigger>

                    <!-- Selected -->

                    <Trigger Property="Selector.IsSelected" Value="True">

                        <Setter TargetName="selectedBorder" Property="Visibility" Value="Visible" />

                        <Setter TargetName="controlHeaderLabel" Property="TextElement.Foreground" Value="White" />

                    </Trigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

2. Apply the Styles (e.g., in MainWindow.xaml)

<syncfusion:Ribbon BackStageColor="Brown" x:Name="_ribbon" VerticalAlignment="Top">

<syncfusion:Ribbon.BackStage>

    <syncfusion:Backstage>

        <!-- Apply custom styles -->

        <syncfusion:BackstageTabItem

            Style="{StaticResource BackstageTabItemstyle}"

            Header="Tab1" />

        <syncfusion:BackstageTabItem

            Style="{StaticResource BackstageTabItemstyle}"

            Header="Tab2" />

        <syncfusion:BackStageCommandButton

            Style="{StaticResource BackStageCommandButtonStyle}"

            Header="Button1" />

        <syncfusion:BackStageCommandButton

            Style="{StaticResource BackStageCommandButtonStyle}"

            Header="Button2" />

    </syncfusion:Backstage>

We have also attached a sample application and included a reference link demonstrating this implementation:

Link: How To Change The Selection Background For The Selected Backstage Items In WPF Ribbon Control? | Syncfusion Code Examples

Please review the sample and let us know if you need any further clarification or assistance. We would be happy to help.

Regards,

Raghavendra S

Attachment: Ribbon_2ea3df57.zip