Winforms MenuStrip - How to change white line on left edge of dropdown items?

Question

How do I change the color of this white line on a MenuStrip? I can't figure out what property to use.

So far I'm using this code to style all the other parts:

internal static class Clr
{
    public static Color White = Color.FromArgb(255, 255, 255);
    public static Color Grey64 = Color.FromArgb(64, 64, 64);
    public static Color Grey86 = Color.FromArgb(86, 86, 86);
    public static Color Grey127 = Color.FromArgb(127, 127, 127);
    public static Color Red = Color.FromArgb(255, 0, 0);
    public static Color Blue = Color.FromArgb(0, 0, 255);
    public static Color Green = Color.FromArgb(0, 255, 0);
}
public class Grey64Menu
{
    public void ConfigureMenu(ToolStrip toolStrip)
    {
        toolStrip.Renderer = new ToolStripProfessionalRenderer(new Grey64ClrTable());

        foreach (var topLevelItem in toolStrip.Items)
        {
            ToolStripMenuItem mainItem = (ToolStripMenuItem)topLevelItem;
            mainItem.ForeColor = Clr.White;
            mainItem.BackColor = Clr.Grey64;

            foreach (var itm in mainItem.DropDownItems)
            {
                ToolStripMenuItem m = (ToolStripMenuItem)itm;
                m.ForeColor = Clr.White;
                m.BackColor = Clr.Grey64;
            }

        }
    }
}

public class Grey64ClrTable : ProfessionalColorTable
{

    public override Color MenuBorder => Clr.Grey86;
    public override Color MenuItemBorder => Clr.Grey127;
    public override Color MenuStripGradientBegin => Clr.Red;
    public override Color MenuStripGradientEnd => Clr.Red;

    public override Color ToolStripGradientBegin => Clr.Red;
    public override Color ToolStripGradientEnd => Clr.Red;
    public override Color ToolStripBorder => Clr.Blue;

    //Dropdown Border Color
    public override Color ToolStripDropDownBackground => Clr.Grey64;

    public override Color MenuItemSelected => Clr.Grey86;
    public override Color MenuItemSelectedGradientBegin => Clr.Grey86;
    public override Color MenuItemSelectedGradientEnd => Clr.Grey86;
    public override Color MenuItemPressedGradientBegin => Clr.Grey86;
    public override Color MenuItemPressedGradientEnd => Clr.Grey86;
}

Answer 1

An alternative method, using a custom ToolStripProfessionalRenderer , to override OnRenderItemText and eliminate that initial loop ( foreach (var topLevelItem in toolStrip.Items) ) that doesn't consider sub-items.

Also, ImageMarginGradientMiddle should be set as well, otherwise you'll have weird results when adding sub-items. You shuld override the other middle parts, too.

You could add a public property to the custom renderer, to change the Menu text ForeColor when required.

public class Grey64Menu
{
    public Grey64Menu() : this(null) { }
    public Grey64Menu(ToolStrip menu) {
        if (menu != null) {
            ConfigureMenu(menu);
        }
    }
    public void ConfigureMenu(ToolStrip toolStrip)
    {
        toolStrip.Renderer = new MyMenuRenderer();
    }
}

public class MyMenuRenderer : ToolStripProfessionalRenderer
{
    public MyMenuRenderer() : this(new Grey64ClrTable()) { }
    public MyMenuRenderer(ProfessionalColorTable colorTable) : base(colorTable) { }

    protected override void OnRenderItemText(ToolStripItemTextRenderEventArgs e)
    {
        e.Item.ForeColor = Clr.White;
        base.OnRenderItemText(e);
    }
}

public class Grey64ClrTable : ProfessionalColorTable
{
    // (...)
    // Fill the Image area: ImageMarginGradientMiddle is required for sub-items
    public override Color ImageMarginGradientMiddle => Clr.Grey64;
    public override Color ImageMarginGradientBegin => Clr.Grey64;
    public override Color ImageMarginGradientEnd => Clr.Grey64;
}

Answer 2

Per Hans Passant's comment:

That line is the background color for the Image Margin. So I was able to fix it by adding these two lines to my ProfessionalColorTable:

public override Color ImageMarginGradientBegin => Clr.Grey64;
public override Color ImageMarginGradientEnd => Clr.Grey64;

Thank you, Hans Passant

Answer 3

You can do this by creating your own ColorTable, and overriding the properties you wish to change the colour of:

public  class TestColorTable : ProfessionalColorTable
{
    public override Color MenuItemSelected
    {
        get { return Color.Red; }
    }

    public override Color MenuBorder
    {
        get { return Color.Green; }
    }

}

You would use it like this:

private void Form1_Load(object sender, EventArgs e)
{
    menuStrip1.Renderer = new ToolStripProfessionalRenderer(new TestColorTable());
}