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.

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);
          }
       }
    }
}

Answer 1

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:

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: