[Ready] Visual Studio 2010 Menu/ToolStrip

Hey there,


I've been working on a ToolStripRenderer that makes your Menu & Toolstrips look like the VS2010 theme.

Screenshots:
http://i44.tinypic.com/11wbscy.png
http://i43.tinypic.com/mljyhh.jpg
http://i42.tinypic.com/w2n636.jpg

(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!

Nice! The colors look a little bit off, but overall, it looks awesome.

Can't wait to try it :D

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 :p

http://i44.tinypic.com/fwpuo6.jpg

Ah. Gotcha. It must have just been my eyes ;)

Wow very nice, Can't wait for a release.

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.

Bump! MenuStrip and ToolStrip renderers + many additions ready for download. See first post for update.

Works great, thanks. Graphics are key :)

Is awsome. Works like a charm!

Also you could do checkboxes, radio buttons and buttons.

Hi Nick

This is great stuff, thanks.

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.

http://i43.tinypic.com/2wf8chg.jpg

Cool. I would be happy to take a look at it, I just started my own too but I see you already did most of the work :p

Great, How do want me to get it to you?

You could post the code, or PM it, or attach it, or...

PM sent

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 :p) I worked some more on my own version and got quite far:
http://i42.tinypic.com/2jamgzb.png

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

Quote:

---

Originally Posted by NickThissen

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 :p) I worked some more on my own version and got quite far:
http://www.vbforums.com/images/ieimages/2010/04/1.png

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?

Sorry for bringing up such an old topic but could I please have the source to the tabcontrol?

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.

Thank you very much :) BTW: I don't know what happened but my first post didn't appear, so i posted another. Sorry bout that.

Hey Nick,

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?

Quote:

---

Originally Posted by weirddemon

Hey Nick,

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)
            e.TextColor = Me.ColorTable.CommonColorTable.TextColor
            MyBase.OnRenderItemText(e)
        End Sub

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...)

Hi Nick,

great idea to use this VS-theme for rendering of controls! :thumb:

I think the looks of the dialog forms of the IDE are great too...
Do you think that you can do that for us? :)

Regards
Dietrich

Which do you mean exactly? Can you post a screenshot?

Hi Nick,
sorry and excuse me, but I had to write 'window' instead of dialog... :ehh:

http://imageshack.us/photo/my-images/695/idewindow.png/

It's a window like the local or direct window for debugging.
Could you create such a type of window? :thumb:

regards
Dietrich

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.

Hi Nick,
thanks for your answer!

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?

regards
Dietrich

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).

Thank you Nick for the very fast answer!! :thumb:

Now it functions and this is great because my project has many Menu/Toolstrips...

So long and greetings from Austria.
Dietrich

Quote:

---

Originally Posted by NickThissen

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.

http://img46.imageshack.us/img46/8/unledok.png

Quote:

---

Originally Posted by weirddemon

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.

---

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 :))

Quote:

---

Originally Posted by NickThissen

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.

http://img840.imageshack.us/img840/7002/unledpj.png

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

Quote:

---

Originally Posted by thibure

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

Quote:

---

Originally Posted by NickThissen

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.

Have a good day.

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.

Quote:

---

Originally Posted by NickThissen

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.

Thanks again, you're work is much appreciated.

Nick,

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:

Quote:

---

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.

Quote:

---

Originally Posted by weirddemon

Nick,

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 :ehh:

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?

Attachment 86757

Thanks again!

Hey Nick,

I'm currently using these controls in an application because it's a nice change of pace from the normal stuff and I don't want to change it to WPF.

But, I'm changing the color scheme because I want to make it look less like VS.

So I've been playing around with the color properties and I'm getting it close to how I want it (aside from the menu strip gradient >.<). But, I can't seem to figure out how change the yellow mouse hover.

http://i.snag.gy/DNU8l.jpg

Could you point out to me where this property is?

Quote:

---

Originally Posted by weirddemon

Hey Nick,

I'm currently using these controls in an application because it's a nice change of pace from the normal stuff and I don't want to change it to WPF.

But, I'm changing the color scheme because I want to make it look less like VS.

So I've been playing around with the color properties and I'm getting it close to how I want it (aside from the menu strip gradient >.<). But, I can't seem to figure out how change the yellow mouse hover.

Could you point out to me where this property is?

---

Ah, never mind. I found the property just as I posted this. It's the "Selected" properties within the common color table.

I'm sorry for sounding noob, But I tried to add it to my project and itw on't work .A lot of errors. Could you hel pme out?

What are the errors?

I don't know... it's really weird. Wait, to add it to my project I just copy the classes in the same folders as you have in your project posted here?

Read the 'Usage' part of the first post again. For VS2008 or higher all you need to do is copy the files you downloaded to whatever location (for example your VS20xx Projects folder). Then in the project where you want to use these controls, you rightclick the solution in the Solution Explorer and choose Add - Add Existing Project. Browse to the project you downloaded (vbproj file I think) and select it. Finally build your solution (via the Build menu). That should be all...

Hi nick. Do you have any idea how i would do this. Transparent Contextmenu. Hate windows default blue.

http://www.vbforums.com/showthread.php?t=678106

Hey Nick,

I really appreciate all your contributions to this site. I have a couple of questions for you. First, is it possible to square off the edges of your custom toolbar versus the rounded edges?

Second question, how could I get the vs2010 background look as the background for the form I'm working on.

Any help would be greatly appreciated.

Thanks
Ron

For the squared off edges, you can probably simply set the RoundedEdges property of the Vs2010ToolStripRenderer to False. If that doesn't help, then I'm probably drawing those edges myself and you'd need to change the drawing code (I don't think so though).

For the form background, have a look a couple posts back in this very thread ;)

Thanks for your reply Nick, I really do appreciate it. As far as setting the roundededges property for the toolstrip renderer where do I set that at?

As for my second question I tried cutting and pasting the background code in my forms paint event and errors were generated. I will post the errors that were generated shortly.

Thanks for all your help.

Ron

Probably this is enough:

Code:

---

toolstrip.Renderer.RoundedEdges = False

---

(where 'toolstrip' is your Vs2010ToolStripRenderer).

Thanks for your quick reply Nick. Where in your code am I actually setting that property?

Ron

You set it when you want to change to happen. Most likely when your form loads: so in the Form_Loaded event for example.

Thanks, that makes perfect sense. I thought you were referring to making the change in the renderer itself.

Ron

Nick, I've pasted the code you recommended in the form paint event to mimic the background used in vs2010 and I'm getting a couple of errors. Below is the code I've pasted:

Code:

---

Private Sub frmMain_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint

        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

---

The two errors I'm getting are Type 'HatchBrush' is not defined.

Any help would be greatly appreciated.

Thanks
Ron

Talk about coming late to the party...
If anyone still follows this thread - here's a problem that's been chapping my backside for an hour now. Any help would be appreciated.

Create a Panel and put a Menustrip inside it.
Add a couple of ToolstripMenuItems (Add, Edit, Delete for example)
Set the .Enabled for all three items = False
Now inside the Panel.Click event, turn all three .Enabled = True

Works just fine yes? Try this - identical code:
Have your mouse OUTSIDE the panel while the buttons are disabled.
Roll your mouse across one of the ToolstripMenuItems on your way into the panel.
Click the panel.

The menu items go from .Enabled = False to .Enabled = True sure enough...but whatever ToolstripMenuItem you rolled over getting there is SELECTED.

In my application, it's the DELETE menu item and when the items go from disabled to enabled suddenly the delete menu item is highlighted. This behaviour is built into the default menustrip which the VS2010MenuStrip inherits so I'm not shocked but now try and turn those selected items off. You'll find its a READONLY property and takes an act of God to correct...i still haven't found a way.

If anyone can offer suggestions, that would be appreciated.

-LK

Hello everyone. I know its a pretty old thread but I am stuck and I need help guys.

I downloaded the Vs2010TabControlLib.zip file shared by Nick. However I can't seem to add it or compile it and the project generated 9 errors *see screenshot.
Attachment 111947

Quote:

---

Originally Posted by kasbaba

Hello everyone. I know its a pretty old thread but I am stuck and I need help guys.

I downloaded the Vs2010TabControlLib.zip file shared by Nick. However I can't seem to add it or compile it and the project generated 9 errors *see screenshot.
Attachment 111947

---

I can help, but I need some more information. But, it would be easier if you could just share your project with me. Can you zip it up and add it as an attachment so I can download it and fix the issue?

Hi WeirdDemon - thank you for pitching in. Basically I am trying to get the original project (uploaded by Nick) to work. Here is a link to it. http://www.vbforums.com/attachment.p...5&d=1271889167

I am using Visual Studio 2008 with .NET 3.5 - do you think this relates to the .NET framework.

Many thanks.