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; }
}
...
}
Related
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;
I'm coloring a menustrip to match my apps theme. However, every time I attempt it, I get this strange visual anomaly to the left of panel separators (the white rectangle) There is also some odd positioning of check-boxes also (possibly related?).
What is causing this, and how do I remove it?
Thank you
Example code:
private Color MainColor = Color.FromArgb(39, 40, 34);
public class MenuStripRenderer : ToolStripProfessionalRenderer
{
protected override void OnRenderMenuItemBackground(ToolStripItemRenderEventArgs e)
{
Rectangle rect = new Rectangle(Point.Empty, e.Item.Size);
if (e.Item.Selected)
{
Color color = Color.FromArgb(24, 25, 19);
using (SolidBrush brush = new SolidBrush(color))
e.Graphics.FillRectangle(brush, rect);
}
else
{
using (SolidBrush brush = new SolidBrush(MainColor))
e.Graphics.FillRectangle(brush, rect);
}
}
protected override void OnRenderItemText(ToolStripItemTextRenderEventArgs e)
{
e.Item.ForeColor = Color.White;
base.OnRenderItemText(e);
}
protected override void OnRenderSeparator(ToolStripSeparatorRenderEventArgs e)
{
base.OnRenderSeparator(e);
}
public MenuStripRenderer() : base(new MenuStripColors()) { }
}
public class MenuStripColors : ProfessionalColorTable
{
public override Color ToolStripDropDownBackground
{
get { return MainColor; }
}
public override Color ToolStripContentPanelGradientBegin
{
get { return MainColor; }
}
public override Color ToolStripContentPanelGradientEnd
{
get { return MainColor; }
}
public override Color MenuItemSelected
{
get { return MainColor; }
}
public override Color MenuItemBorder
{
get { return MainColor; }
}
public override Color MenuItemSelectedGradientBegin
{
get { return MainColor; }
}
public override Color MenuItemSelectedGradientEnd
{
get { return MainColor; }
}
public override Color MenuBorder
{
get { return MainColor; }
}
}
// In the forms Load()
this.menuStrip1.Renderer = new MenuStripRenderer();
this.menuStrip1.BackColor = MainColor;
this.menuStrip1.ForeColor = Color.White;
I believe you have to override the ImageMargin drawing, too:
protected override void OnRenderImageMargin(ToolStripRenderEventArgs e) {
//base.OnRenderImageMargin(e);
using (SolidBrush brush = new SolidBrush(MainColor)) {
e.Graphics.FillRectangle(brush, e.AffectedBounds);
}
}
I don't know what is causing your check mark issue since I can't duplicate that issue on my machine. I'm guessing maybe that's a graphic DPI setting in your windows.
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; }
}
This question already has answers here:
How to change menu hover color
(4 answers)
Closed 7 years ago.
I have looked into all search results from StackOverflow to no avail, including: How to change menu hover color
I have a menu strip which is black with white font color. When you select it the font stays white but the box turns white too. How do i set the "selected" back color of a menu item?
By "selected" i mean you clicked on the menu option. NOT hover.
https://msdn.microsoft.com/en-us/library/System.Windows.Forms.ProfessionalColorTable(v=vs.110).aspx
I checked this out but none of these targeted the top tier menu item.
private class MyRenderer : ToolStripProfessionalRenderer
{
public MyRenderer() : base(new MyColors()) { }
}
private class MyColors : ProfessionalColorTable
{
public override Color ToolStripDropDownBackground
{
get { return Color.Black; }
}
public override Color MenuItemSelectedGradientBegin
{
get { return Color.Gray; }
}
public override Color MenuItemSelectedGradientEnd
{
get { return Color.Red; }
}
}
Use MenuItemPressedGradientBegin / End instead of MenuItemSelectedGradientBegin / End to change the color of the "primary" bar.
Menu.Renderer = new MyRenderer();
private class MyRenderer : ToolStripProfessionalRenderer
{
public MyRenderer() : base(new MyColors()) { }
}
private class MyColors : ProfessionalColorTable
{
public override Color MenuItemPressedGradientBegin
{
get { return Color.Gray; }
}
public override Color MenuItemPressedGradientEnd
{
get { return Color.Red; }
}
}
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!