[WIP] Custom Vista-style (blue/green) ToolStripRenderer

Hi,

Here is a nice Work In Progress for you: a ToolStripRenderer that will make your ToolStrip look like the Vista toolstrip equivalent.

Screenshots:
http://i34.tinypic.com/2a0gwug.jpg

Comparison pic (top is mine, bottom is actual Vista):
http://i38.tinypic.com/24yqn1c.jpg


As you may see, there are still lots of things I have to improve on, for example the colors are still a little off, as is the white gradient from the bottom to the dark blue middle.
Also, the size of the buttons seems to be a little small.
Finally the actual Vista toolstrip has a blurred shadow underneath the text on the buttons. I have not figured out yet how to blur the text (does anyone know?) but once I do I can add it pretty quickly.


The VistaToolStripRenderer class is attached.
Usage: Add the class file to your project, then use the following code (in the Form_Load event of the form hosting the ToolStrip) to set the Renderer property of the ToolStrip:

Code:

---

MyToolStrip.Renderer = New clsVistaToolStripRenderer

---

Note that this is still a WIP so I shall update this when I find the time. In the meantime, please feel free to download it and adapt it for your own use. If you manage to make it look even closer or add some new functionality don't hesitate the post it here and I will include it!

Do you have any screen shots of it working on XP?

No, I have not. I might get some soon but I am almost certain that (at least in this stage) it will not look well on XP.
The reason for that is because the 'button backgrounds' are the standard ToolStrip button backgrounds. There is no additional painting in the OnRenderButtonBackground override simply because I noticed the standard ToolStrip button background (on VISTA!) is the same as the button background the actual vista toolstrips use.

Since the button backgrounds are probably very different on XP I am certain it will look different, and you will have to custom draw the button backgrounds aswell.

This is on Win Xp.
http://www.hostanimage.com/files/j9r...jk6ghxc1s2.jpg

As I expected, the background which is custom rendered draws fine, but the buttons render like XP renders them on default, because there is no custom drawing done there. (I didn't do that because the standard Vista ToolStripButton background is the same as the buttons used in these 'special' toolstrips (possibly even exactly the same).

If I find the time to continue with this control (custom drawing takes a lot of patience, finding the right colors and 'sizes' and stuff.. :p) I'll try to do the button backgrounds custom drawn too, that will make it work on XP better.

Any way very good project

Good work there Nick. Keep at it :thumb:

Not true my friend, you CAN custom paint (draw) the button backgrounds.

To custom draw a ToolStripButton, create code in OnRenderButtonBackGround
To custom draw a ToolStripDropDown, create code in OnRenderDropDownBackGround

and also, I noticed in your class code that you create code in the overrides for OnRenderToolStripPanelBackground. You do realize the ToolStirpContentPanel is the ContentPanel on a ToolStripContainer right? It is not actually part of the ToolStrip itself? And that if you are not hosting the toolstrip in the ToolStripContainer that the code does nothing?

Other usefull information:

All toolstrip buttons, labels, progressbars, splitbuttons, et al...are all inherit ToolStripItem. If you want to create custom labels, butons, images etc... you can create a class which inherits the ToolStripItem.

One exemption to this is the ToolStripProgress Bar which is inherits a ToolStripControlHost.

You can custom paint any and ALL controls and the toolstrip and the ToolStrip's Container.

If you need help, let me know,

P.S. Rendering theese controls does NOT take a lot of time, you already have the basic Gradients understood. If you notice, the ToolStripRenderer is not the only toolstrip class you can use. Try the ToolStripProfessionalRenderer instead, it is almost identical except it allow you to round the corners of the toolstrip automatically, and it hold a color table which you can load/set values into instead of declaring custom color values through variable, also, the color table itself has a derived class you can use to create more color tables. Pretty cool.. check it out...

I know I CAN paint on the button backgrounds, but there was no need on Vista because they already look exactly the same (as far as I can tell) without custom drawing them. It's a different story in XP ofcourse.

Obviously I did not realize the code is not doing anything, otherwise I wouldn't have put it there ;)
Can you explain that part further? I don't really understand?
Do you mean that the code paints on the ToolStripContainer if the ToolStrip is hosted in one?

Yes, for example the ToolStripContainer has 5 sub controls in it. The TopPanel, BottomPanel, LeftPanel and RightPanel, and the ContentPanel.
The Top, Bottom, Left, and Right panels host ToolStrips, while the ContentPanel can host any control. This is what the Overrides sub OnRenderToolStripPanelBackground allows you to custom draw.

The ToolStripContainer has a Renderer property exactly like the toolstrips do. You can create custom renderer for them also exactly as you have done for the ToolStrips in your clsVistaRenderers. But without actually having toolstrip in them.

In your code, you created overrides methods for the OnRenderToolStripPanelBackground(ByVal e As System.Windows.Forms.ToolStripPanelRenderEventArgs)

This code will ONLY get executed if you place a ToolStripContainer on your parent form and then place the toolstrip in one of the Panels on the ToolStripContainer.

When you override this method, it overrides what ever Panel of the toolstripcontainer that houses the toolstrip you are custom rendering and then the code will execute.

Here is the flow:

Parent Form --> ToolStripContainer --> ToolStripPanel --> ToolStrip --> ToolStripItem.

- OR IF YOU ARE NOT USING A ToolStripContainer -

Parent Form --> ToolStrip --> ToolStripItem

Believe it or not, I created an entire multimedia application from just a form and ToolStripContainers and ToolStrips in which I custom rendered everything.

Why?

Because if you doublebuffer the graphics on the parent form, the Custom Renderers produce alomost NO FLICKER or ARTIFACTS. It looks abaolutely beautiful!

Another cool advantage?

The code executes lightning fast AND you can create controls with tranceparency and alpha!

You can also control the parent controls such as the actual toolbar, its items, and the parent form from inside the clsVistaRenderers that you created!

For example try this.

In your class:

Private WithEvents ParentToolStrip as ToolStrip

Now in the overrides sub for Initialize, the EventArgs (e) holds a reference to the toolstrip. Assign the toolstrip to your declared withevents toolstrip like this:

(This is the code from your class)

Protected Overrides Sub Initialize(ByVal toolStrip As System.Windows.Forms.ToolStrip)

me.ParentToolStrip = toolstrip

MyBase.Initialize(toolStrip)

toolStrip.AutoSize = False
toolStrip.Height = 32
toolStrip.ForeColor = Color.White
toolStrip.Padding = New Padding(5, 2, 5, 2)

End Sub

Now guess what? You can hook all the events from the actual toolstrip you are rendering!

For example, you can place code in the Resize() code handler and use it to get the width of the ToolStrip to center text on your labels on the ToolStrip, create custom springing controls, center the toolbar on the parent control, resize controls to avoid them overflowing...etc.

All of this may seem very complex but in fact if all windows controls were designed like the base classes for the ToolStripRenderer classes are, we could do amazing graphics inside of vb.

By the way, I don't know if you are aware of this or not, but there are three classes of ToolStripRender

they are:

ToolStripRenderer
ToolStripSystemRenderer
ToolStripProfessionalRenderer

The ProfessionalRenderer is the best bet if you want to create Vista Style Controls, because at its core it has a ColorTable property which accepts a ColorTable that hold all of the color required to render the toolstrip. This class also can be overriden and custom colors can be place into it and loaded into the ToolStripRenderer, there by allowing color changes to the toolbar at runtime exactly like Windows Media Player does.

And yet another class the ToolStripManager accepts a Renderer also, then each toolstrip in theToolStripManager renders exactly the same, withen the entire parent form. You can also use the ToolStripManager to merge toolstrips, menu strips, context menus, etc. AND the ToolStripManager automatically saves and restores EVERYTHING about the ToolStrips, Menus, etc. (position, size, colors, renderss, text, visible / hidden items...)


If you need any help, please let me know.

Or if you need me to post a clas file thats OK also.

Thanks for clearing all that up, but I don't see myself using it in the near future. I just wanted to make a quick start on a vista toolstrip control appearance and managed it as far as I required at the time. I decided to post the code here if anyone needed it. If I ever find the need to expand this I will probably post it here again.

Cool.

Now that I've gotten into using this control for a new app I'm working on I've noticed a couple of quirks with it. If you have both Text and Image showing then the Text below the image displays fine but the image itself is squished like the ToolStrip itself has a shorter height than the standard ToolStrip.

I've also noticed that if you have a DropDown Button on the ToolStrip the background gradient on the DropDown Menu is god-awful. Each menu item has the light green on the top half and the dark green on the bottom half, it looks weird, if they all had a solid color instead of each one with a gradient it would remove the Dark & Light green lines.

Here's a screenshot of both issues I'm talking about:
Attachment 75051
The 2nd ToolStrip in that screen shot is the regular one in the Framework with the same icons and text to show how it's normally rendered.

Yeah, as I said it is stlil a work in progress, and sadly I have never finished it. I may still finish it at a later stage but it's starting to look like a dying project, sorry! But you got the code, so you can try to finish it yourself. If you do I can help you if you get stuck somewhere, and you're free to post the new version if you want!

I just might do that, I dunno when I'll get to it but if I do I'll post it here. Right now I'm using the Office2003Blue from your other thread in the app, it goes nicely with the clsMenuRenderer you've got in a 3rd thread here.

Which menu renderer? :p Just so you know, I also added a customizable MenuStrip to my customizable Toolstrip submission. It works in the same way so you can have your MenuStrip use the Office2003Blue style for the MenuStrip too.

K, Here is the Pic of what it looks like for me. How do you get it to look the way pictured at the top?

Thanks!
E

Hey, I got my problem figured out. I also made a Couple of Improvements (I do Hope I am not stepping on your ground, Nick) Anyway, I just fixed it up so that its size does not have to be 32px. Not a large change but, I think it would be quite useful :) I tried fixing the Dropdown problem but to no avail. :(

E

Quote:

---

Originally Posted by Matchlighter

Hey, I got my problem figured out. I also made a Couple of Improvements (I do Hope I am not stepping on your ground, Nick) Anyway, I just fixed it up so that its size does not have to be 32px. Not a large change but, I think it would be quite useful :) I tried fixing the Dropdown problem but to no avail. :(

E

---

No problem, I'm posting this so anyone can use and improve it. Thanks :)

Hey, I was looking through some other renders that support the other Items in the Toolstrip family. I added some more things to what I posted above including Support for Context Menus, DropDowns and MenuBars. I made the Context menus look similar to those in Vista. I also made the menu strip look like the ones in Vista. I hope you like it!

E