I've been working on a ToolStripRenderer that makes your Menu & Toolstrips look like the VS2010 theme.
Screenshots:
(There's also a zoomed in comparison screenshot a few posts down)
Known issues:
- Some things do not render properly when the ToolStrip is in vertical layout mode.
- I cannot control rendering of a ToolStripComboBox or ToolStripTextBox, so they look quite out of place. Looking for a way around this, none found yet.
Todo:
- Make stuff work in vertical layout too (grip, separators, etc, don't work yet)
- VS2010 checkmark image (little bit different from default)
- ContextMenuStrip (though this may already work by assigning the menustrip renderer manually!)
- StatusBar
- ComboBox?
- TabControl?
You can get the control library project from the attachment.
Please note: I created this in VS2010, but you should be able to open the project in VS2008. You should even be able to manually add the files using VS2005 (though probably not lower than that!).
It is a .NET 2.0 project, and I 'converted' it back to be compatible with VS2008. I tested it, and I can open it with VS2008, so I think you should have no trouble with it.
Usage: VS2008 or higher:
Add the 'Vs2010Renderers/Vs2010Renderers.vbproj' file to an existing solution (using Add Existing Project).
Alternatively, simply open the Vs2010Renderers.sln solution file and add a new project to it, to start with a blank project.
Build the solution succesfully.
Find the Vs2010MenuStrip and Vs2010ToolStrip controls in your Toolbox.
VS2005:
Create or Add a new Control Library Project.
Remove the automatically added UserControl1 file.
Use Add Existing Files to add all files to your project. The files you need are all the files in the ColorTables, Controls and Renderers folders. I advice you to keep the folder layout the same, although that is not a requirement.
Build the solution succesfully.
Find the Vs2010MenuStrip and Vs2010ToolStrip controls in your Toolbox.
In addition to the Vs2010MenuStrip and Vs2010ToolStrip controls, which already implemented the Vs2010 renderers (beside some other small features), you can also simply set the Renderer property of any existing MenuStrip or ToolStrip control to a new instance of the Renderers.Vs2010MenuStripRenderer and Renderers.Vs2010ToolStripRenderer classes, like so
vb.net Code:
MenuStrip1.Renderer = New Vs2010Renderers.Renderers.Vs2010MenuStripRenderer()
ToolStrip1.Renderer = New Vs2010Renderers.Renderers.Vs2010ToolStripRenderer()
This way, you don't have to recreate your menu and toolstrips, but you can keep using the existing ones.
The Vs2010MenuStrip control doesn't do anything else except use this renderer by default.
The Vs2010ToolStrip control also exposes one new property: AutoParentBackColor. If this is set to True, the Vs2010ToolStrip will change the Background color of any parenting ToolStripPanel to the Vs2010ToolStripColorTable.ParentBackground color. I advice you to leave this on because it simply looks better.
Advanced:
These renderers, by default, use the default color scheme for VS2010. However, I added a lot of flexibility here. The constructor of the Vs2010MenuStripRenderer accepts a Vs2010MenuStripColorTable. Likewise, the constructor of the Vs2010ToolStripRenderer accepts a Vs2010ToolStripColorTable (both color tables can also be get/set via the ColorTable property).
Should you wish to implement your own color scheme, you can inherit Vs2010MenuStripColorTable (or Vs2010ToolStripColorTable) and return appropriate colors for each property you must override.
Alternatively, you can also inherit Vs2010Default(Menu/Tool)StripColorTable. This way, you get the default colors, but you can override any color you want. This is a quick way to change one or two colors only, instead of having to define all colors manually.
Note that, if you do inherit the (non-default) Vs2010(Menu/Tool)StripColorTable, you must also override a property that returns an instance of a Vs2010CommonColorTable. This color table contains colors that are common to both strips (such as the selection colors). The same goes for this color table really: you can either inherit Vs2010CommonColorTable to override all colors, or inherit Vs2010DefaultColorTable to override just the colors you need to change.
Wew, that was enough rambling for one evening.
If you have any questions whatsoever, about how to use this or the custom color tables, or want to know how I did something, don't hesitate to ask (you can do that right here by leaving a reply).
If you have a suggestion, also don't hesitate to tell me.
Enjoy!
Last edited by NickThissen; Apr 21st, 2010 at 05:55 PM.
The colors should be exactly right, I copy/pasted their RGB values straight from Photoshop so it should match exactly
Here's a comparison pic. I agree some colors look slightly off, but photoshop tells me their RGB values are exactly the same so I think it's an optical illusion
I needed a set of matching controls for this, so right now I'm building a combobox with the same style as the VS2010 combobox (the ones on top of the code editor). I'm also probably going to need a listbox and other controls.
In the meantime, I have created a bunch of ColorTables that the renderers use. This way, you can create your own color table and completely customize the colors. You can also inherit the default color tables should you wish to change just one or two colors. I'll explain in detail once I release this.
I've been working on a VS2010 TabControl but I’ve taken it as far as my skills allow, would you be interested in taking this on to develop further? The scroller is one thing I am struggling with.
I only just saw the code you sent me Martin, since my internet was down a few hours. In the mean time (for lack of better things to do when internet is down ) I worked some more on my own version and got quite far:
There's a few problems, mainly with filling rounded rectangles. I need to use anti-aliased drawing to make the corners look right, but then the straight parts are 'blurred' which is quite visible even without zooming in. I don't have this problem when drawing a rounded rectangle (GraphicsPath.DrawPath instead of FillPath), that's why I didn't have this problem before in the menu strip...
And I haven't looked into the scroll buttons yet, I'm not sure how to do that either, but I'll try to figure it out.
Looking good, I missed the yellow bar at the bottom. Just needs to be rounded off and tabs aligned to the edge I left a thin strip under the top yellow bar on mine as it looked good the the project i'm using it in but of course that not in true VS 2010 style.
I also had an issue with the re-draw when the scrollers are visible. The HotTrack of the last tab doesn't clear when you scroll so it leaves it half drawn.
I think the scroller is going to be a tricky one. Might have to replace it with another custom control or something
I only just saw the code you sent me Martin, since my internet was down a few hours. In the mean time (for lack of better things to do when internet is down ) I worked some more on my own version and got quite far:
There's a few problems, mainly with filling rounded rectangles. I need to use anti-aliased drawing to make the corners look right, but then the straight parts are 'blurred' which is quite visible even without zooming in. I don't have this problem when drawing a rounded rectangle (GraphicsPath.DrawPath instead of FillPath), that's why I didn't have this problem before in the menu strip...
And I haven't looked into the scroll buttons yet, I'm not sure how to do that either, but I'll try to figure it out.
Hello, sorry for brining up an old topic, but could I please have the source to that control?
You're in luck, I fixed it up and uploaded it for someone else a couple of days ago. I attached it. It is a VS2010 project though, but you should be able to just add the files to an earlier version project manually.
I'm playing around with the ToolStrip control and I'm finding that the ForeColor property of the control, when changed, doesn't actually change.
Any ideas?
I think the forecolor of the item text is being set in the Renderer. I took a quick look and it seems like the CommonColorTable.TextColor is being used:
vb.net Code:
Protected Overrides Sub OnRenderItemText(ByVal e As System.Windows.Forms.ToolStripItemTextRenderEventArgs)
Try changing that color property, or try using the ForeColor property of the ToolStrip itself (which might be some more work because the renderer doesn't have (and shouldn't have) a reference to the ToolStrip...)
That's actually a whole different story; these ToolStrips are made by implementing a custom Renderer, drawing a whole window manually like that is more difficult and involves a lot of problems such as resizing without a border. It can be done, but I don't know if you can get it very similar to the actual VS2010 window. You'd have a much better time using WPF, like VS2010 does itself for the windows I believe.
I have another problem with your Menustrip solution.
I have done all as you described it, have added your library as a project to my own project. Then I wrote:
HTML Code:
MenuStrip1.Renderer = New Vs2010Renderers.Renderers.Vs2010MenuStripRenderer()
where MenuStrip1 is an existing strip (in a MDI form).
But I get at once the message that 'the type Vs2010Renderers.Renderers.Vs2010MenuStripRenderer is not defined'.
Don't no why... what could it be?
Did you reference my project from your own project? If you did and both projects build succesfully then you should get a Vs2010MenuStrip and Vs2010ToolStrip control in your toolbox. The code you are using is just an alternative and is useful if you already got your Menu/ToolStrip built (so that you don't have to delete it and add all the buttons to it again).
You're in luck, I fixed it up and uploaded it for someone else a couple of days ago. I attached it. It is a VS2010 project though, but you should be able to just add the files to an earlier version project manually.
Hey Nick,
You know, I'm curious if how easily the background theme for the tab control, can be implemented into the form's background. VS2010 uses this theme by default.
You know, I'm curious if how easily the background theme for the tab control, can be implemented into the form's background. VS2010 uses this theme by default.
It should be really easy, just look at the OnPaintTabHeaderBackground method of the renderer, it's drawn there using two HatchBrushes (one offset 1px from the other):
vb.net Code:
Public Overridable Sub OnPaintTabHeadersBackground(ByVal e As PaintEventArgs)
Using h1 As New HatchBrush(HatchStyle.Percent20, Me.ColorTable.BackgroundDotsLight, Me.ColorTable.Background)
e.Graphics.FillRectangle(h1, e.ClipRectangle)
End Using
Using h2 As New HatchBrush(HatchStyle.Percent20, Me.ColorTable.BackgroundDotsDark, Color.Transparent)
e.Graphics.RenderingOrigin = New Point(0, -1)
e.Graphics.FillRectangle(h2, e.ClipRectangle)
e.Graphics.RenderingOrigin = Point.Empty
End Using
End Sub
You could just copy/paste that code into the Paint event of your form. You can get the colors from the Vs2010DefaultTabControlColorTable:
vb.net Code:
Public Overrides ReadOnly Property Background As System.Drawing.Color
Get
Return Color.FromArgb(43, 60, 88)
End Get
End Property
Public Overrides ReadOnly Property BackgroundDotsLight As System.Drawing.Color
Get
Return Color.FromArgb(53, 73, 106)
End Get
End Property
Public Overrides ReadOnly Property BackgroundDotsDark As System.Drawing.Color
Get
Return Color.FromArgb(41, 57, 85)
End Get
End Property
I believe the real VS2010 background however also has a slight gradient applied to the dark background color. That is also pretty easy to implement by first drawing this gradient, then drawing the first HatchBrush with a Transparent second color (just like the second HatchBrush). I never went that far though so if you go this route you'll also have to check which colors the gradient is composed off... (it seems like a very slight radial gradient, but I could be wrong, it could be my monitor or just an optical illusion )
It should be really easy, just look at the OnPaintTabHeaderBackground method of the renderer, it's drawn there using two HatchBrushes (one offset 1px from the other):
vb.net Code:
Public Overridable Sub OnPaintTabHeadersBackground(ByVal e As PaintEventArgs)
Using h1 As New HatchBrush(HatchStyle.Percent20, Me.ColorTable.BackgroundDotsLight, Me.ColorTable.Background)
e.Graphics.FillRectangle(h1, e.ClipRectangle)
End Using
Using h2 As New HatchBrush(HatchStyle.Percent20, Me.ColorTable.BackgroundDotsDark, Color.Transparent)
e.Graphics.RenderingOrigin = New Point(0, -1)
e.Graphics.FillRectangle(h2, e.ClipRectangle)
e.Graphics.RenderingOrigin = Point.Empty
End Using
End Sub
You could just copy/paste that code into the Paint event of your form. You can get the colors from the Vs2010DefaultTabControlColorTable:
vb.net Code:
Public Overrides ReadOnly Property Background As System.Drawing.Color
Get
Return Color.FromArgb(43, 60, 88)
End Get
End Property
Public Overrides ReadOnly Property BackgroundDotsLight As System.Drawing.Color
Get
Return Color.FromArgb(53, 73, 106)
End Get
End Property
Public Overrides ReadOnly Property BackgroundDotsDark As System.Drawing.Color
Get
Return Color.FromArgb(41, 57, 85)
End Get
End Property
I believe the real VS2010 background however also has a slight gradient applied to the dark background color. That is also pretty easy to implement by first drawing this gradient, then drawing the first HatchBrush with a Transparent second color (just like the second HatchBrush). I never went that far though so if you go this route you'll also have to check which colors the gradient is composed off... (it seems like a very slight radial gradient, but I could be wrong, it could be my monitor or just an optical illusion )
Yeah, it was super simple. Looks great too. Thanks, Nick.
First of all, this renderer is amazing. Thanks for making it!
Secondly, do you allow this code to be used in a commercial application?
Thanks
I do allow it, but just understand that I won't be able to provide much support if anything is wrong with it. You can post any questions here but it depends on my time and mood if I'll help you
I do allow it, but just understand that I won't be able to provide much support if anything is wrong with it. You can post any questions here but it depends on my time and mood if I'll help you
Thanks! I have been developing for a while so I doubt I will need any support but I wanted to clear any licensing issues before I got too far into the project.
The 'problem' is mainly that it's not 100% finished yet. For example, ToolStripTextBoxes, ComboBoxes, etc, don't really fit in this renderer. There are probably more of these things that I never noticed before (because I've only used this renderer in one simple project) but which might become apparent once you start using it more intensively.
The 'problem' is mainly that it's not 100% finished yet. For example, ToolStripTextBoxes, ComboBoxes, etc, don't really fit in this renderer. There are probably more of these things that I never noticed before (because I've only used this renderer in one simple project) but which might become apparent once you start using it more intensively.
My project is really simple and only requires the use of a menu bar (with a few items and drop downs), a tab control (with only 3 tabs) and a few list views. Nothing more. I will add a link in the credits and about box to this thread to give proper credits.
As always, your controls are awesome. But, I'm using the TabControl in an application I'm making and I attempted to use it with an ImageList. When I set the ImageIndex of one of the TabPages, the icon doesn't appear. The tab's horizontal length increases, but you don't actually see the image.
That and it pretty much blew up the application. I received a ton of errors. Most of them saying that the controls you made didn't exist and the following cryptic message:
not a valid win32 application hresult: 0x 800700c1
Not using the images isn't a big deal for me, but I thought I'd let you know about it.
As always, your controls are awesome. But, I'm using the TabControl in an application I'm making and I attempted to use it with an ImageList. When I set the ImageIndex of one of the TabPages, the icon doesn't appear. The tab's horizontal length increases, but you don't actually see the image.
That and it pretty much blew up the application. I received a ton of errors. Most of them saying that the controls you made didn't exist and the following cryptic message:
Not using the images isn't a big deal for me, but I thought I'd let you know about it.
It's been ages since I last looked at this, but my guess is that there is simply no code to draw the images. Since the control is completely custom drawn, the icons won't appear and I'd have to draw them somewhere in the tab drawing routine. You can take a look in the TabControlRenderer, there should be a method where it draws the tab headers, and you might be able to draw your icon there (I'm not sure if you can get to the ImageList from there though).
As for the error, that seems strange... I've no idea why that would happen, and the error doesn't mean anything to me either
Thanks NickThissen for sharing your work. Help me a lot.
But now i have a question?
Is it possible to change the selected text forecolor.
I know how to change specific menu text color in a menustrip/toolstrip, but change selected text is another story.
The image attached, simulate a start menu. The text forecolor is always dark gray, even when menu option is selected like 'Exit' in image. How to change the menu option selected text forecolor to white when mouse over and return to original color on mouseleave?