[Solved] About the appearance of the color when a CommandBarButton is focused.

[Shiori]

Please refer to the image. The color of the CommandBarButton in the command bar changes when the cursor hovers over it—where can I configure the property for this color? (the red-framed area in the image)

[Nadya | Tech Support Engineer]

Hi, Shiori,

If I understand correctly, you want to remove the gray color when the mouse cursor hovers over the commandBarButton. To do so, you can use the SetThemeValueOverride() and override the theme settings at run time: WinForms Override Theme Settings at Run Time

Use the following code snippet:

this.commandBarButton2.SetThemeValueOverride(LightVisualElement.BackColorProperty, Color.Transparent, "CommandBarButton.ContainsMouse.MouseOver");

I hope this helps. Let me know if you have other questions.

Regards,
Nadya | Tech Support Engineer
Progress Telerik

[Shiori]

Hello, thank you very much for your reply.

I understand that the gray color displayed when hovering over the cursor can be removed.

We are implementing a specification where CommandBarButton and CommandBarSplitButton are added to a CommandBarStripElement.　 Will the arguments differ between CommandBarButton and CommandBarSplitButton?

If the gray color is not removed, would it be possible to change it to another color (such as red)?

 

[Nadya | Tech Support Engineer]

Hello, Shiori,

The CommandBarSplitButton is a composite element — it consists of ActionPart (button) and ArrowPart(arrow). Changing the fill color when mouse hover would need additional handling for these two elements to work properly.

For the ActionPart, you can use the following code snippet:

this.commandBarSplitButton1.SetThemeValueOverride(LightVisualElement.BackColorProperty, Color.Red, "CommandBarSplitButton.MouseOver.ActionPart");

However, I suppose that you would like to customize the arrow part as well. In such a case, I would recommend you create a custom CommandBarSplitButton and use the custom split button on your side. Here is a sample custom implementation that achieve red background color when the mouse hovers over the split button:

 public class CustomCommandBarSplitButton : CommandBarSplitButton
 {
     private Color mouseOverBackColor = Color.Red;

     /// <summary>
     /// Gets or sets the BackColor applied to the ActionPart/ArrowPart when the mouse is over it.
     /// </summary>
     public Color MouseOverBackColor
     {
         get { return this.mouseOverBackColor; }
         set { this.mouseOverBackColor = value; }
     }

     protected override Type ThemeEffectiveType
     {
         get
         {
             return typeof(CommandBarSplitButton);
         }
     }

     protected override void OnPropertyChanged(RadPropertyChangedEventArgs e)
     {
         base.OnPropertyChanged(e);

         if (e.Property == RadDropDownButtonElement.MouseOverStateProperty)
         {
             DropDownButtonMouseOverState state = (DropDownButtonMouseOverState)e.NewValue;

             switch (state)
             {
                 case DropDownButtonMouseOverState.OverArrowButton:
                     this.ArrowPart.DrawFill = true;
                     this.ArrowPart.BackColor = this.mouseOverBackColor;
                     this.ArrowPart.GradientStyle = GradientStyles.Solid;
                     ResetActionPart();
                     break;
                 case DropDownButtonMouseOverState.OverActionButton:
                     this.DrawFill = true;
                     this.BackColor = this.mouseOverBackColor;
                     this.GradientStyle = GradientStyles.Solid;
                     ResetArrowPart();
                     break;
                 default:
                     ResetActionPart();
                     ResetArrowPart();
                     break;
             }
         }
     }

     private void ResetActionPart()
     {
         this.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
         this.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
         this.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
     }

     private void ResetArrowPart()
     {
         this.ArrowPart.ResetValue(LightVisualElement.DrawFillProperty, ValueResetFlags.Local);
         this.ArrowPart.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
         this.ArrowPart.ResetValue(LightVisualElement.GradientStyleProperty, ValueResetFlags.Local);
     }
 }

This is a custom solution. Feel free to modify it further according to your needs.

I hope this helps. If you have any other questions, please let me know.