Develop Reference

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.
The white block behind the Exit ToolstripMenuItem: it becomes wider when a Separator is used.
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;
}
}
}

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;

'White bar' on MenuStripDropDown

I currently have a custom Render set up for a MenuStrip on a C# windows forms application:
private class HeaderMenuRender : ProfessionalColorTable
{
public override Color MenuItemSelectedGradientBegin
{
get
{
return Color.Gray;
}
}
public override Color MenuItemSelectedGradientEnd
{
get
{
return Color.Gray;
}
}
public override Color MenuItemPressedGradientBegin
{
get
{
return Color.Gray;
}
}
public override Color MenuItemPressedGradientEnd
{
get
{
return Color.Gray;
}
}
public override Color MenuItemBorder
{
get
{
return Color.Gray;
}
}
public override Color MenuBorder
{
get
{
return Color.Gray;
}
}
}
This is then applied to an existing MenuStrip control on a form to create a Custom render.
However when running the application and making a selection from the menu which is displayed, despite the Menu options being the correct colour, there is a small 'White' (arguably could be 'Control' colour) bar which spans the length of the selected MenuStrip option (indicated in the blue box below):
Is there a particular property of the custom Renderer that I am not including or something I am missing which is setting this specific part of the MenuStrip selected item? The examples I have seen elsewhere do not seem to have this issue.

In the above code, it seems you made items Gray using BackColor property.
You can use override ToolStripDropDownBackground to return Color.Gray, this removes that while line.
Also you can overriding ImageMarginGradientBegin, ImageMarginGradientMiddle and ImageMarginGradientEnd to make also image/checkbox area Gray.
Here is What I added to your codes to get the desired value:
public override Color ImageMarginGradientBegin
{
get { return Color.Gray; }
}
public override Color ImageMarginGradientMiddle
{
get { return Color.Gray; }
}
public override Color ImageMarginGradientEnd
{
get { return Color.Gray; }
}
public override Color ToolStripDropDownBackground
{
get { return Color.Gray; }
}

Recoloring MenuStrip

I have a MenuStrip and I want to change it's color. So far, I have this code:
public class TestColorTable : ProfessionalColorTable
{
public override Color MenuItemSelected
{
get{ return Color.LightGray; } // Don't mind the colors...
}
public override Color MenuItemBorder
{
get { return Color.LightGray; }
}
public override Color MenuItemSelectedGradientBegin
{
get { return Color.LightGray; }
}
public override Color MenuItemSelectedGradientEnd
{
get { return Color.LightGray; }
}
public override Color MenuItemPressedGradientBegin
{
get { return Color.DimGray; }
}
public override Color MenuItemPressedGradientEnd
{
get { return Color.DimGray; }
}
public override Color MenuBorder
{
get { return Color.LightGray; }
}
}
With this code, as well as the designer, I managed to change the color of almost every element of my MenuStrip. Almost.
Here are the results:
As you can see, there are two issues: 1) The two separators and 2) That thin white border around the submenus.
Any ideas on how to change the color of those two parts of my MenuStrip?

For the separator color try overriding the SeparatorDark and or SeparatorLight property of the ProfessionalColorTable class.
As for the thin white border around the submenus..., well, its actually not a border. It's the ToolStripDropDown (the submenu) background itself. Try overriding the ToolStripDropDownBackground property of the ProfessionalColorTable class to change its color.
Example:
public class TestColorTable : ProfessionalColorTable
{
...
public override Color SeparatorDark
{
get { return Color.DimGray; }
}
public override Color ToolStripDropDownBackground
{
get { return Color.DimGray; }
}
...
}

Change the dropdown menu list item square

I coulnd find a proper name and phrase for this to explain, so here's a picture:
I'd like to change the white area's as shown above in the red circle to a desired color. I used the code below to change the other colors:
In the form itself:
menuStrip1.Renderer = new ToolStripProfessionalRenderer(new MenuStripColorTable());
The class:
class MenuStripColorTable : ProfessionalColorTable
{
private Color backColor = (Color) new ColorConverter().ConvertFromString("#333333");
//menu item background en border
public override Color MenuItemBorder
{
get{ return Color.White; }
}
public override Color MenuStripGradientBegin
{
get { return backColor; }
}
....
Any idea what I should override, or change?

By adding the folowing code I succesfully made teh white squares transparant:
Render class for menustrip:
public override Color ImageMarginGradientBegin
{
get { return Color.Transparent; }
}
public override Color ImageMarginGradientMiddle
{
get { return Color.Transparent; }
}
public override Color ImageMarginGradientEnd
{
get { return Color.Transparent; }
}
Altho the text isn't aligned to the left. But that's not that much of a problem. Credit to Franck aswell!

How to eliminate the blue focus on ToolStripDropDownButton when mouse is above the control

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

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

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: