Search code examples
c#wpfxamlribbon

Change WPF RibbonQuickAccess Gradient background

I try to style my app using black and white theme and I have a very stubborn component in the name of "Ribbon" and I can't seem to make it look like I want it. I have the following Ribbon enter image description here

Code behind

<Ribbon x:Name="AppRibbon"
               DockPanel.Dock="Top"
               BorderThickness="1"
               Grid.Row="0"
               MaxHeight="138"
               SelectedIndex="0">
           <Ribbon.QuickAccessToolBar>
               <RibbonQuickAccessToolBar Padding="10" Margin="2" Background="Red" Foreground="Aquamarine" OverridesDefaultStyle="True" Style="{DynamicResource CustomQuickAccessStyle}">
               <RibbonButton x:Name="QuickAccessFileOpenButton"
                             SmallImageSource="{svgc:SvgImage Source='pack://application:,,,/Resources/ApplicationToolbar/file_open.svg'}">
                   <RibbonButton.ToolTip>
                       <uc:CustomTemplateTooltip Placement="Bottom"
                                                 Header="{x:Static p:Resources.Quick_Access_File_Open_Tooltip_Header}"
                                                 Body="{x:Static p:Resources.Quick_Access_File_Open_Tooltip_Body}"
                                                 Template="{StaticResource CustomToolTipTemplate}" />
                   </RibbonButton.ToolTip>
               </RibbonButton>
               <RibbonToggleButton x:Name="AutoOpenLastFileButton"
                                   SmallImageSource="{svgc:SvgImage Source='pack://application:,,,/Resources/HomeTab/File/auto_open_file.svg'}">
                   <RibbonToggleButton.ToolTip>
                       <uc:CustomTemplateTooltip Placement="Bottom"
                                                 Header="{x:Static p:Resources.Quick_Access_File_Auto_Open_Tooltip_Header}"
                                                 Body="{x:Static p:Resources.Quick_Access_File_Auto_Open_Tooltip_Body}"
                                                 Template="{StaticResource CustomToolTipTemplate}" />
                   </RibbonToggleButton.ToolTip>
               </RibbonToggleButton>
               <RibbonButton x:Name="QuickAccessPublishButton"
                             SmallImageSource="{svgc:SvgImage Source='pack://application:,,,/Resources/ApplicationToolbar/publish_to_png.svg'}">
                   <RibbonButton.ToolTip>
                       <uc:CustomTemplateTooltip Placement="Bottom"
                                                 Header="{x:Static p:Resources.Tooltip_Export_Export_Png_Button_Header}"
                                                 Body="{x:Static p:Resources.Tooltip_Export_Export_Png_Button_Body}"
                                                 Template="{StaticResource CustomToolTipTemplate}" />
                   </RibbonButton.ToolTip>
               </RibbonButton>
               <RibbonButton x:Name="QuickAccessDeleteFileButton"
                             Label="{x:Static p:Resources.Ribbon_File_Delete}"
                             SmallImageSource="{svgc:SvgImage Source='pack://application:,,,/Resources/QuickAccessToolbar/file_delete.svg'}">
                   <RibbonButton.ToolTip>
                       <uc:CustomTemplateTooltip Placement="Bottom"
                                                 Header="{x:Static p:Resources.Tooltip_Home_Delete_Image_Header}"
                                                 Body="{x:Static p:Resources.Tooltip_Home_Delete_Image_Body}"
                                                 Template="{StaticResource CustomToolTipTemplate}" />
                   </RibbonButton.ToolTip>
               </RibbonButton>
               <RibbonButton x:Name="QuickAccessRenameFileButton"
                             Label="{x:Static p:Resources.Ribbon_File_Rename}"
                             SmallImageSource="{svgc:SvgImage Source='pack://application:,,,/Resources/QuickAccessToolbar/file_rename.svg'}">
                   <RibbonButton.ToolTip>
                       <uc:CustomTemplateTooltip Placement="Bottom"
                                                 Header="{x:Static p:Resources.Tooltip_Home_Rename_Image_Header}"
                                                 Body="{x:Static p:Resources.Tooltip_Home_Rename_Image_Body}"
                                                 Template="{StaticResource CustomToolTipTemplate}" />
                   </RibbonButton.ToolTip>
               </RibbonButton>
               <RibbonButton x:Name="QuickAccessFileProperitiesButton"
                             Label="{x:Static p:Resources.Ribbon_File_Properties}"
                             SmallImageSource="{svgc:SvgImage Source='pack://application:,,,/Resources/HomeTab/File/file_properties.svg'}">
                   <RibbonButton.ToolTip>
                       <uc:CustomTemplateTooltip Placement="Bottom"
                                                 Header="{x:Static p:Resources.Tooltip_Home_Image_Properties_Header}"
                                                 Body="{x:Static p:Resources.Tooltip_Home_Image_Properties_Body}"
                                                 Template="{StaticResource CustomToolTipTemplate}" />
                   </RibbonButton.ToolTip>
                   </RibbonButton>
               </RibbonQuickAccessToolBar>
           </Ribbon.QuickAccessToolBar>    
</Ribbon>

I try to change the gradient of the quick access to a solid color. I tried (as you can see) setting the background to red and foreground basically I tried to change it color, but nothing is reflected (it takes the color info from Ribbon itself) I also tried a custom style

  <Style  x:Key="CustomQuickAccessStyle" TargetType="{x:Type RibbonQuickAccessToolBar}">
        <Setter Property="OverridesDefaultStyle"
                Value="True" />
        <Setter Property="Background"
                Value="Red" />
        <Setter Property="BorderBrush"
                Value="Blue" />
        <Setter Property="Foreground"
                Value="DarkGreen" />
        <Setter Property="FocusVisualStyle"
                Value="{StaticResource FocusVisual}" />
    </Style>

I have the same problem with RibbonTab when it's selected as it's background is to white and I would like a more Gray background.

 <Style TargetType="{x:Type RibbonTabHeader}">
        <Setter Property="Foreground"
                Value="Red" />
        <Style.Triggers>
            <Trigger Property="IsRibbonTabSelected"
                     Value="True">
                <Setter Property="Foreground"
                        Value="Green" />
            </Trigger>
        </Style.Triggers>
    </Style>

But this does not work either. So I assume that style per components in Ribbon just don't seem to work, I've busted my head for hours now to change this and I am getting a headache so I finally gave up and decided to ask here.

Any guiding would be very appreciated. To add more to this, I inspect the object using Live Property Explorer and looks like this. I can see my color both from Local styling and theme styling.
enter image description here enter image description here

Solution

  • After long research and countless of try and fail solutions, I gave up on default Ribbon and used https://github.com/fluentribbon/Fluent.Ribbon. It is quite straightforward to adapt a default Ribbon to a Fluent Ribbon and the controls and styling available is quite impressive. Posting this answer for anyone else struggling with this.