Search code examples
c#winforms.net-core-3.1menustrip

Trying to color a MenuStrip, a white border appears on the left side


I'm creating a Form and I want the menu bar to have different colors. There are many posts on this, I've managed to alter all the colors, except for a white block/line down the left hand side of the menu.
I'm using .Net Core 3.1, Windows Forms application.

enter image description here

The white block behind the Exit ToolstripMenuItem: it becomes wider when a Separator is used.

enter image description here

Thin white line on the above menus.

I'm using a professional renderer to override the colors.

public class DxColorTable : ToolStripProfessionalRenderer
{
    public DxColorTable(dynamic theme) : base(new DxCols(theme)) { }
}

public class DxCols : ProfessionalColorTable
{
    private readonly dynamic theme = DefaultTheme.Default;
    public DxCols(dynamic theme)
    {
        this.theme = theme;
    }

    public override Color MenuBorder
    {
        get { return this.theme.MenuSelectedColor; }
    }
    public override Color MenuItemBorder
    {
        get { return this.theme.MenuSelectedColor; }
    }
    public override Color MenuItemPressedGradientBegin
    {
        get { return this.theme.MenuSelectedColor; }
    }

    public override Color MenuItemPressedGradientEnd
    {
        get { return this.theme.MenuSelectedColor; }
    }
    public override Color MenuItemSelected
    {              
        get { return this.theme.MenuSelectedColor; }
    }
    public override Color MenuItemSelectedGradientBegin
    {            
        get { return this.theme.MenuSelectedColor; }
    }
    public override Color MenuItemSelectedGradientEnd
    {
        get { return this.theme.MenuSelectedColor; }
    }

    public override Color ToolStripBorder
    {
        get { return this.theme.MenuBackgroundColor; }
    }
    
    public override Color ToolStripDropDownBackground
    {
        get { return this.theme.MenuBackgroundColor; }
    }
    public override Color ToolStripGradientBegin
    {
        get { return this.theme.MenuBackgroundColor; }
    }
    public override Color ToolStripGradientEnd
    {
        get { return this.theme.MenuBackgroundColor; }
    }
    public override Color ToolStripGradientMiddle
    {
        get { return this.theme.MenuBackgroundColor; }
    }

    public override Color ToolStripContentPanelGradientBegin
    {
        get
        {
            return this.theme.MenuBackgroundColor; 
        }
    }

    public override Color ToolStripContentPanelGradientEnd
    {
        get
        {
            return this.theme.MenuBackgroundColor;
        }
    }
}

Solution

  • You forgot to override the three properties that define the Image margin area.
    You need to specify a Color value for the ImageMarginGradient part.

    It's particularily visible when you add a ToolStripComboBox or a ToolStripSeparator. Note that it doesn't affect standard ToolStripMenuItems, even when these show an Image, when a Background Color has already been set in the designer.

    public override Color ImageMarginGradientBegin => this.theme.MenuBackgroundColor;
    public override Color ImageMarginGradientMiddle => this.theme.MenuBackgroundColor;
    public override Color ImageMarginGradientEnd => this.theme.MenuBackgroundColor; 
    

    If you don't need to show Images, you can hide the Image margin area:

    ([Your ToolStripMenuItem].DropDown as ToolStripDropDownMenu).ShowImageMargin = false;