Question

I use ToolStripDropDownButton with Forecolor is white and Backcolor is trasparent. Text of "ToolStripDropDownButton" unreadable when mouse is above the control because "blue focus" is visible.

How to eliminate/remove the "blue focus" on ToolStripDropDownButton when mouse is above the control? Looks like the picture below. Thank You.

enter image description here Which produces output like digEmAll picture.

using System;
using System.Windows.Forms;
using System.Drawing;

namespace WindowsFormsApplication1
{
   public partial class Form1 : Form
   {
       public Form1()
       {
           InitializeComponent();

           toolStrip1.BackColor = Color.Transparent;
           toolStrip1.GripStyle = ToolStripGripStyle.Visible;
           toolStrip1.Renderer = new MyRenderer();
       }

       private class MyRenderer : ToolStripSystemRenderer
       {
          protected override void OnRenderArrow(ToolStripArrowRenderEventArgs e)
          {
              e.ArrowColor = Color.White;
              base.OnRenderArrow(e);
          }

          protected override void OnRenderToolStripBorder(ToolStripRenderEventArgs e)
          {
             // remove white line bellow button (http://connect.microsoft.com/VisualStudio/feedback/details/92862/toolstrip-always-draws-a-border-on-the-bottom-with-rendermode-system-and-docked-left-or-right)
             //base.OnRenderToolStripBorder(e);
          }
       }
    }
}
Was it helpful?

Solution

You can change the Renderer property of the ToolStrip. For example using ToolStripSystemRenderer instead of the default ToolStripProfessionalRenderer :

this.toolStrip.Renderer = new ToolStripSystemRenderer();

you'll get the following result:

enter image description here

If you want to customize it more heavily, you can extend ToolStripSystemRenderer. For example with the following code you can change the color of the arrow:

class MyRenderer : ToolStripSystemRenderer
{
    protected override void OnRenderArrow(ToolStripArrowRenderEventArgs e)
    {
        e.ArrowColor = Color.White;
        base.OnRenderArrow(e);
    }
}

Result:

enter image description here

OTHER TIPS

You can reassign the Renderer property for the ToolStrip to create your own renderer. Overriding the OnRenderSplitButtonBackground() is however very painful, a split button has a lot of doodahs that need to be painted and the stock painter methods are private. The easier approach in your case is to override the color table. Make it look like this:

public partial class Form1 : Form {
    public Form1() {
        InitializeComponent();
        toolStrip1.Renderer = new MyRenderer();
    }

    private class MyRenderer : ToolStripProfessionalRenderer {
        public MyRenderer() : base(new MyColors()) {}
    }

    private class MyColors : ProfessionalColorTable {
        public override Color ButtonSelectedGradientBegin {
            get { return Color.Black; }
        }
        public override Color ButtonSelectedGradientMiddle {
            get { return Color.Black; }
        }
        public override Color ButtonSelectedGradientEnd {
            get { return Color.Black; }
        }
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top