Articles in this section
Category / Section

How to change the selection background for the selected backstage items in WPF Ribbon control?

4 mins read

You can change the background color of selected and hovered BackStage items by overriding the style and setting the background to appropriate elements in the style in WPF Ribbon control.

A new style has been added in App.Xaml with a key and then the key was used for assigning the style to BackstageItems in MainWindow.Xaml.

App XAML

The hover and selected background for BackstageTabItem has been set to Border with name `hoverBorder` and `selectedBorder` respectively. The hover background for BackstageCommandButton has been set to Border with name `hoverborder`.

<Application.Resources>
        <!--  BackStage TabItem Style  -->
        <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="#00000000">
                            <!--The hover Background color for the BackstageTabItem has been set to this Border-->
                            <Border x:Name="hoverBorder"
                                Width="{TemplateBinding Width}"
                                Height="{TemplateBinding Height}"
                                Margin="0,0,1,0"
                                Background="Yellow"
                                BorderBrush="{x:Null}"
                                BorderThickness="0"
                                Visibility="Collapsed">
                                <Border Background="#26000000" />
                            </Border>
                            <!--The selected Background color for the BackstageTabItem has been set to this Border-->
                            <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"
                                          ContentTemplate="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Backstage}},
                                                                    Path=TabHeaderTemplate}"
                                          ContentTemplateSelector="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Backstage}}, Path=ItemTemplateSelector}"
                                          TextElement.Foreground="{TemplateBinding Foreground}" />
                            <ContentPresenter x:Name="controlTemplateLabel"
                                          Margin="19,0"
                                          HorizontalAlignment="Left"
                                          VerticalAlignment="Center"
                                        
                                          ContentTemplate="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Backstage}},
                                                                    Path=TabHeaderTemplate}"
                                          ContentTemplateSelector="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Backstage}}, Path=ItemTemplateSelector}"
                                          TextElement.Foreground="{TemplateBinding Foreground}" />
 
                        </Grid>
                        <ControlTemplate.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Backstage}},Path=ItemsSource}" Value="{x:Null}">
                                <Setter Property="Visibility" Value="Collapsed" TargetName="controlTemplateLabel"/>
                                <Setter Property="Visibility" Value="Visible" TargetName="controlHeaderLabel"/>
                            </DataTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" />
                                    <Condition Property="IsEnabled" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="hoverBorder" Property="Visibility" Value="Visible" />
 
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="hoverBorder" Property="Visibility" Value="Hidden" />
                                <Setter TargetName="controlHeaderLabel" Property="Opacity" Value="0.5" />
                                <Setter TargetName="controlTemplateLabel" Property="Opacity" Value="0.5" />
                            </Trigger>
 
                            <Trigger Property="Selector.IsSelected" Value="True">
                                <Setter TargetName="selectedBorder" Property="Visibility" Value="Visible" />
                                <Setter TargetName="controlHeaderLabel" Property="TextElement.Foreground"  Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Backstage}},Path=SelectedTabItemForeground}" />
                                <Setter TargetName="controlTemplateLabel" Property="TextElement.Foreground"  Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Backstage}},Path=SelectedTabItemForeground}" />
 
 
                            </Trigger>
                            <Trigger Property="Selector.IsSelected" Value="false">
                                <Setter TargetName="selectedBorder" Property="Visibility" Value="Collapsed" />
                                <Setter TargetName="controlHeaderLabel" Property="TextElement.Foreground"  Value="white" />
                                <Setter TargetName="controlTemplateLabel" Property="TextElement.Foreground"  Value="white" />
 
 
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True" SourceName="layoutRoot" />
                                    <Condition Property="Selector.IsSelected" Value="True" />
                                </MultiTrigger.Conditions>
                                <Setter TargetName="hoverBorder" Property="Visibility" Value="Visible" />
                                <Setter TargetName="selectedBorder" Property="Visibility" Value="Collapsed" />
 
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 
        <!--  BackStage CommandButton Style  -->
        <Style x:Key="BackStageCommandButtonStyle" TargetType="{x:Type syncfusion:BackStageCommandButton}">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="SizeForm" Value="Small"/>
            <Style.Triggers>
                <Trigger Property="SizeForm" Value="Small">
                    <Setter Property="Height" Value="38" />
                    <Setter Property="Margin" Value="0,2,0,2" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type syncfusion:BackStageCommandButton}">
                                <Grid Background="#00000000">
                                    <!--The hover Background color for the BackstageCommandButton has been set to this Border-->
                                    <Border x:Name="hoverborder"
                                Width="{TemplateBinding Width}"
                                Height="{TemplateBinding Height}"
                                Background="Yellow"
                                BorderBrush="{Binding Path=BackStageColor,
                                                      RelativeSource={RelativeSource AncestorType={x:Type syncfusion:RibbonWindow}}}"
                                Visibility="Collapsed">
                                        <Border Background="#26000000" />
                                    </Border>
                                    <StackPanel Margin="16,0,15,0"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center"
                                    Orientation="Horizontal">
                                        <Image x:Name="iconImage"
                                   Width="16"
                                   Height="16"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   SnapsToDevicePixels="True"
                                   RenderOptions.BitmapScalingMode="NearestNeighbor"
                                   Source="{TemplateBinding Icon}" />
                                        <syncfusion:RibbonAutomatableTextBlock x:Name="controlLabel"
                                       Margin="5,0,0,0"
                                       HorizontalAlignment="Left"
                                       VerticalAlignment="Center"
                                       Text="{TemplateBinding Header}"
                                       TextTrimming="CharacterEllipsis"
                                       TextWrapping="NoWrap" />
                                    </StackPanel>
                                </Grid>
 
                                <ControlTemplate.Triggers>
                                    <Trigger Property="Icon" Value="{x:Null}">
                                        <Setter TargetName="iconImage" Property="Visibility"  Value="Collapsed" />
                                        <Setter TargetName="controlLabel" Property="Margin"  Value="3,0,0,0" />
 
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsMouseOver" Value="True" />
                                            <Condition Property="IsEnabled" Value="True" />
                                        </MultiTrigger.Conditions>
                                        <Setter TargetName="hoverborder" Property="Visibility" Value="Visible" />
 
                                    </MultiTrigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter TargetName="iconImage" Property="Opacity" Value="0.5" />
                                        <Setter TargetName="controlLabel" Property="Opacity" Value="0.5" />
 
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="SizeForm" Value="ExtraSmall">
                    <Setter Property="Padding" Value="3" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type syncfusion:BackStageCommandButton}">
                                <Border Name="OuterBorder"
                                    MinHeight="22"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="{TemplateBinding CornerRadius}"
                                    IsEnabled="{TemplateBinding IsEnabled}"
                                    Opacity="{TemplateBinding Opacity}">
                                    <Image x:Name="iconImage"
                                   Width="16"
                                   Height="16"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   SnapsToDevicePixels="True"
                                   Source="{TemplateBinding Icon}" />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="OuterBorder" Property="Background" Value="Yellow" />
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter TargetName="iconImage" Property="Opacity" Value="0.5" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
</Application.Resources>

XAML:

<Grid>
     <syncfusion:Ribbon BackStageColor="Brown" x:Name="_ribbon"  VerticalAlignment="Top">
        <syncfusion:RibbonTab Caption="Home">
           <syncfusion:RibbonBar></syncfusion:RibbonBar>
        </syncfusion:RibbonTab>
        <syncfusion:Ribbon.BackStage>
           <syncfusion:Backstage>
              <!--Apply the overriden style using the key-->
              <syncfusion:BackstageTabItem Style="{StaticResource BackstageTabItemstyle}" Header="Tab1" ></syncfusion:BackstageTabItem>
              <syncfusion:BackstageTabItem Style="{StaticResource BackstageTabItemstyle}" Header="Tab2" ></syncfusion:BackstageTabItem>
              <syncfusion:BackStageCommandButton Style="{StaticResource BackStageCommandButtonStyle}"  Header="Button1" ></syncfusion:BackStageCommandButton>
              <syncfusion:BackStageCommandButton Style="{StaticResource BackStageCommandButtonStyle}"  Header="Button2" ></syncfusion:BackStageCommandButton>
           </syncfusion:Backstage>
        </syncfusion:Ribbon.BackStage>
     </syncfusion:Ribbon>
</Grid>

              Customize the BackStageTabItem and BackstageCommandButton

Documentation link: https://help.syncfusion.com/wpf/ribbon/backstage

View sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied