Search code examples
c#wpfribbon

RibbonCombobox: orange border is appeared after changing color


I’ve got a simple ribbon combobox (MS Ribbon for WPF) and try to change its style. When I set properties "PressedBackground" and "PressedBorderBrush" to any colors, an orange border is appeared.

See screenshot:

enter image description here

XAML:

<ribbon:RibbonComboBox SelectionBoxWidth="110" PressedBackground="Blue" PressedBorderBrush="Black">
    <ribbon:RibbonGallery></ribbon:RibbonGallery>                                                    
</ribbon:RibbonComboBox>       

Any ideas to remove this border?


Solution

  • In order to change that you must edit the RibbonComboBox template and change where that Orange border appears, to do that i prefer using Blend or the Vs designer :

    Select the RibbonComboBox control,

    Convert the RibbonComboBox to local resource in the properties window:

    enter image description here

    Under the IsChecked Trigger change the InnerBorder from the gradient Orange,

    <Trigger Property="IsChecked" Value="True">
     <Setter Property="Background" TargetName="OuterBorder" Value="{Binding CheckedBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
     <Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding CheckedBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
     <Setter Property="BorderBrush" TargetName="InnerBorder">
      <Setter.Value>
        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
         <GradientStop Color="#FFE7CBAD" Offset="0"/>
         <GradientStop Color="#FFF7D7B5" Offset="0.1"/>
         <GradientStop Color="#FFFFD38C" Offset="0.36"/>
         <GradientStop Color="#FFFFC75A" Offset="0.36"/>
         <GradientStop Color="#FFFFEFA5" Offset="1"/>
        </LinearGradientBrush>
      </Setter.Value>
     </Setter>
    </Trigger>
    

    To whatever color you want :

    <Trigger Property="IsChecked" Value="True">
     <Setter Property="Background" TargetName="OuterBorder" Value="{Binding CheckedBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
     <Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding CheckedBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
     <Setter Property="BorderBrush" TargetName="InnerBorder">
     <Setter.Value>
      <SolidColorBrush Color="Red"></SolidColorBrush>
    </Setter.Value>
    

    Output :

    enter image description here