Change the border color of Winforms menu dropdown list

Is it possible to change the border color of a toolstrip menu dropdown list.

Yes. A class which inherits from ProfessionalColorTable works as expected:

class MenuColorTable : ProfessionalColorTable
{
    public MenuColorTable()
    {
        // see notes
        base.UseSystemColors = false;
    }
    public override System.Drawing.Color MenuBorder
    {
        get{return Color.Fuchsia;}
    }
    public override System.Drawing.Color MenuItemBorder
    {
        get{return Color.DarkViolet;}
    }
    public override Color MenuItemSelected
    {
        get { return Color.Cornsilk;}
    }
    public override Color MenuItemSelectedGradientBegin
    {
        get{return Color.LawnGreen;}
    }
    public override Color MenuItemSelectedGradientEnd
    {
        get { return Color.MediumSeaGreen; }
    }
    public override Color MenuStripGradientBegin
    {
        get { return Color.AliceBlue; }
    }
    public override Color MenuStripGradientEnd
    {
        get { return Color.DodgerBlue; }
    }
}

In form load:

menuStrip1.Renderer = new ToolStripProfessionalRenderer(new MenuColorTable());

If visual styles are not turned on, not all the color table items will be used and some SystemColors will be used instead. You enable visual styles in Main():

// must be done before any UI elements are used
Application.EnableVisualStyles();

You may want to also disable system colors as shown in the ctor. The default should be false whether visual styles are enabled or not, but maybe something else has changed it?

base.UseSystemColors = false;

Both EnableVisualStyles() and UseSystemColors = false; have to be in place for all the rendering elements in your color table to be implemented, otherwise only some are used. (Though, MenuBorder does seem to work no matter what.) Otherwise, results are as expected:

enter image description here

The menu gradient goes from AliceBlue to DodgerBlue; an item with the mouse over it uses a top to bottom gradient of LawnGreen to MediumSeaGreen (mouse not shown).

enter image description here

When open, the menu border is Fuschia (mmmm, soothing!)

enter image description here

With the mouse over one of the items (mouse not shown), the item uses the MenuItemSelected color which was Consilk.

If you are having trouble getting your overrides to work, check that you are using the right ones (or that they mean what the name implies, some are misleading at first).

You might also check that you are using a MenuStrip for the menu, Net does have another (older) menu class though you have to go searching to find it. You might also change or disable any Theme to see if that might be causing adverse effects.


To Change the border color it is enough to follow Plutonix solution that is described in accepted answer. But to remove that white border between the item and menu border, you should follow one of these solution:

Solution 1


You can do it by implementing your custom color table that inherits ProfessionalColorTable and overriding correct properties. To do so, follow these steps:

Steps

  1. Put a ToolStrip on your form and add DropDownButton and its sub items to it, and Set ForeColor of sub items to White.
  2. Create a CustomColorTable class Inheriting from ProfessionalColorTable
  3. Override ImageMarginGradientBegin, ImageMarginGradientMiddle, ImageMarginGradientEnd, ToolStripDropDownBackground and return the color you want (blue).from
  4. In your Form Load event set Renderer property of ToolStripManager to use a ToolStripProfessionalRenderer that uses your CustomColorTable.

CustomColorTable Code

public class CustomColorTable:ProfessionalColorTable
{
    public override Color ImageMarginGradientBegin
    {
        get
        {
            return Color.MidnightBlue;
        }
    }

    public override Color ImageMarginGradientMiddle
    {
        get
        {
            return Color.MidnightBlue;
        }
    }

    public override Color ImageMarginGradientEnd
    {
        get
        {
            return Color.MidnightBlue; 
        }
    }

    public override Color ToolStripDropDownBackground
    {
        get
        {
            return Color.MidnightBlue;
        }
    }
}

Form Load Code

private void Form_Load(object sender, EventArgs e)
{
    ToolStripManager.Renderer = new ToolStripProfessionalRenderer(new CustomColorTable());
}

Screenshot

Here is normal screenshot

enter image description here

And here is a 2x magnified screenshot:

enter image description here

Solution 2


There is also an alternative solution that is applicable if you don't want to use images in your menu items. In this case, find the DropDown property of your dropdownbutton and cast it to ToolStripDropDownMenu, then set ShowImageMargin property of it to false and BackColor of it to the color you want (blue).

private void Form_Load(object sender, EventArgs e)
{
    //The item with text "My Menu" in your sample
    var dropDownMenu = (ToolStripDropDownMenu)this.myMenuToolStripDropDownButton1.DropDown;
    dropDownMenu.ShowImageMargin = false;
    dropDownMenu.BackColor = Color.Navy;
}

enter image description here