100% Customizable MenuStrip / ToolStrip / StatusStrip, including common presets

[NickThissen]

EDIT 4 - Added CustomizableBindingNavigator
- Added Office2007Black preset style
Thanks to dherr!

EDIT 3 - Added CustomizableToolStripPanel as a separate file (too lazy to zip it up again )

EDIT 2 - Added CustomizableContextMenuStrip as a separate file (too lazy to zip it up again )


EDIT - New version.
New in this version:
- Appearance Editor window
- Loading and Saving appearances to XML files
- StatusStrip colors added
- Few minor bug fixes

---------------


Hey all,


This is a completely new version of my old Customizable ToolStrip codebank submission, taking care of the problem of having to customize each Menu/ToolStrip separately.


In this release, there are six controls, one form, and one component (and one other class):

• CustomizableMenuStrip
• CustomizableToolStrip
• CustomizableStatusStrip
• CustomizableContextMenuStrip
• CustomizableToolStripPanel
• CustomizableBindingNavigator
• AppearanceControl
• frmAppearanceEditor
• CustomAppearancePropertyEditor

(Because I can only upload 5 files, I had to zip them. The zip file contains all the files you need, just add them to a new or existing VB.NET project and build it)

The CustomizableMenuStrip, CustomizableToolStrip, CustomizableStatusStrip and CustomizableContextMenuStrip (after this called 'Strips' for short) aren't very exciting. The only real difference is that they all have a new property called Appearance. This is where the AppearanceControl comes into play.

The CustomAppearancePropertyEditor is a UITypeEditor that takes care of showing the frmAppearanceEditor form.

The AppearanceControl is a component (I named it control because it controls the appearance, sorry for confusion), which means it sits in the component tray (just like the ToolTip component for example) and has no visual representation on the form.

The AppearanceControl has a large number of properties that allow you to completely control the look of any of the three Strips. There is a property for each possible color, so you can choose whatever you like.
New: These properties are now accessible via the CustomAppearance property. Click the [...] button next to it in the properties list and the Appearance Editor window will open.

As said, each of the three Strips have an Appearance property. You assign an instance of the AppearanceControl component to that property (usually you would have one AppearanceControl, and have many Strips using that one component). The Strips will then use the colors as defined in the AppearanceControl.

This way, you can use a single AppearanceControl to control the colors of as many (Context)MenuStrips, ToolStrips and now even StatusStrips that you like. Obviously, each will have the exact same colors. If you need your MenuStrip to have different colors then your ToolStrip, you simply use two AppearanceControl components, and assign one to the MenuStrip and the other to the ToolStrip.


Here are some screenshots:

A completely custom red style.


Form showing two different styles at the same time.


Screenshot of the new Appearance Editor window.

In the last screenshot you can also see the Load and Save buttons which allow you to load and save any custom appearance to an XML file. This way you can also exchange cool appearances with others (for example, in this thread!).

Finally, as a bonus, you get 6 presets which you can simply select. They are shown in the following screenshot in this order:

• Office 2007 (Blue)
• Office 2007 (Black) (not shown in image)
• Office 2003 (Blue) (default on XP blue)
• Office 2003 (Olive) (default on XP olive)
• Office 2003 (Silver) (default on XP silver)
• Office XP (default on Vista/Win7)
• Office Classic (default on classic style)

So you no longer have to deal with the colors that the users theme gives you. With this, you can always use the blue Office 2003 theme (which is usually only available automatically on the blue XP theme), even on Vista or Windows 7 or on different themes.

To select a preset you simply select on from the list in the Preset property.


Oh, I almost forgot, the CustomizableToolStrip also exposes the RoundedEdges property to allow you to disable the rounded edges (thanks the JuggaloBrotha for reminding me and thanks to Deepak Sakpal for bringing it to everyones attention


I still have a few ideas left to implement:

• Design time Editor window - DONE
• Loading / saving customizations - DONE
• More presets

But they will have to wait until I find time

For now, enjoy them!





To use:
If you downloaded the separate files zip, simply add all the files to your project (possibly a new class library).
If you downloaded the control library project zip, just open the project.

Build the project, and find them at the top of your Toolbox!

Drag an AppearanceControl to the form. Then drag any of the Strips to the form, and set their Appearance property to that AppearanceControl. Then use the Customizable[Menu/Tool/Status]Strip controls as you usually would.

[JuggaloBrotha]

Very nice, I like how you made it so the three controls reference the Appearance control so 1 setting changes all three on the form.

[NickThissen]

I updated the first post with some new stuff and updated the files.

New in this version:
- Appearance Editor window with a real-time preview of the appearance.
- Ability to load and save appearances to an XML file (also in the editor window).

Bug fixes:
- Strips will now revert to default renderer (and colors) when their Appearance property is changed back to (none).
- When an AppearanceControl (in use by a Strip) is removed from the form, all Strips using it will change their Appearance property back to (none), instead of throwing null reference exceptions.

[JuggaloBrotha]

very nice, the only suggestion I have is to have the dialog be sizable so it can be made taller to show more properties on the screen at once.

[NickThissen]

Well, you have to source so you can add that yourself
I'll add it in a later version though if I ever make another update.

[JuggaloBrotha]

Well, you have to source so you can add that yourself
I'll add it in a later version though if I ever make another update.

I did before posting

[NickThissen]

I completely forgot about the ContextMenuStrip! I've now also added a CustomizableContextMenuStrip that works in just the same way as the other strips. I couldn't be bothered to re-zip and re-upload the files so I just added it separately.

[JuggaloBrotha]

I like the ContextMenuStrip, I'd forgotten about it too.

Also with the ToolStrip I noticed that the RoundedEdges wasn't working at all when a Preset was selected so I went ahead and fixed it:

    Public Property RoundedEdges() As Boolean
        Get
            Return _RoundedEdges
        End Get
        Set(ByVal value As Boolean)
            If _RoundedEdges <> value Then
                _RoundedEdges = value
                CType(Me.Renderer, ToolStripProfessionalRenderer).RoundedEdges = _RoundedEdges
                Me.Invalidate()
            End If
        End Set
    End Property

[andrewb]

Hi folks, hopefully someone is still following this thread. This is an awesomely useful tool - and I'm trying to apply it to another control, namely ToolStripPanel (to hold toolstrips, in my case in an MDI app) because it seems at the moment - this was designed for toolstrips that aren't inside a container (i.e. not docked to "top").

I used the CustomizableMenuStrip class as a starting point, as normally the container that holds a toolstrip underneath a menustrip has the same gradient, and then has it's toolstrip(s) inside that container, auto-sized rather than docked to fill the width of the window. Anyway, I muddled my way through creating the class - got a working control that inherited from ToolStripPanel - and then set up what I thought was needed in the AppearanceControl.vb file.

Anyway, my fiddling created a node and gradient properties for ToolStripPanel in the CustomAppearance designer, but I've not been able to get the control to change appearance - it continues to default to a standard XP/Office 2003 blue gradient.

Does anyone have any pointers? I've probably just overlooked a step, as dabbling in custom controls and renderers is a bit of new ground for me. Thanks!

[NickThissen]

The AppearanceControl already has two properties for the ToolStripPanel: ToolStripAppearance.PanelGradientBegin and ToolStripAppearance.PanelGradientEnd.

You don't need to change anything in the AppearanceControl at all. All you need to do is add a new CustomizableToolStripPanel class. You can copy the code exactly from the CustomizableToolStrip class:

Public Class CustomizableToolStripPanel
    Inherits ToolStripPanel
 
    Public Event AppearanceControlChanged As EventHandler
 
    Public Sub New()
        MyBase.New()
        Me.RoundedEdges = True
    End Sub
 
    Private _Appearance As AppearanceControl
    Public Property Appearance() As AppearanceControl
        Get
            Return _Appearance
        End Get
        Set(ByVal value As AppearanceControl)
            _Appearance = value
            If value IsNot Nothing Then
                Me.Renderer = value.Renderer
            End If
            Me.Invalidate()
            Me.OnAppearanceControlChanged(EventArgs.Empty)
        End Set
    End Property
 
    Private _RoundedEdges As Boolean
    Public Property RoundedEdges() As Boolean
        Get
            Return _RoundedEdges
        End Get
        Set(ByVal value As Boolean)
            If _RoundedEdges <> value Then
                _RoundedEdges = value
                CType(Me.Renderer, ToolStripProfessionalRenderer).RoundedEdges = _RoundedEdges
                Me.Invalidate()
            End If
        End Set
    End Property
 
    Protected Overridable Sub OnAppearanceControlChanged(ByVal e As EventArgs)
        If Me.Appearance IsNot Nothing Then
            AddHandler Me.Appearance.AppearanceChanged, AddressOf AppearanceControl_AppearanceChanged
            AddHandler Me.Appearance.Disposed, AddressOf AppearanceControl_Disposed
            Me.Renderer = Me.Appearance.Renderer
        Else
            Me.Renderer = New ToolStripProfessionalRenderer()
        End If
        Me.Invalidate()
 
        RaiseEvent AppearanceControlChanged(Me, e)
    End Sub
 
    Private Sub AppearanceControl_Disposed(ByVal sender As Object, ByVal e As EventArgs)
        Me.Appearance = Nothing
        Me.OnAppearanceControlChanged(EventArgs.Empty)
    End Sub
 
    Private Sub AppearanceControl_AppearanceChanged(ByVal sender As Object, ByVal e As EventArgs)
        Me.Renderer = Me.Appearance.Renderer
        CType(Me.Renderer, ToolStripProfessionalRenderer).RoundedEdges = _RoundedEdges
        Me.Invalidate()
    End Sub
 
End Class

(I don't think the RoundedEdges property does anything for a ToolStripPanel, but it can't hurt)

Now all you need to do is put your CustomizableToolStrip in this CustomizableToolStripPanel, set the Appearance property (of the panel as well!) to the AppearanceControl you want to use, and change its panel properties (the two I listed above).

This will give you a horizontal gradient in the ToolStripPanel (unless you chose the same color for begin and end obviously). If you want a vertical gradient, or some other shape, then you're out of luck, my control cannot help you with that. My control merely exposes the properties of the ProfessionalColorTable class (which is used by the ToolStripProfessionalRenderer to draw the toolstrips), allowing you to change them at will. You cannot change how the drawing is done, only the colors.

If you still want to change the shape (vertical gradient for example), then your only option is to create your own ToolStripProfessionalRenderer, override the methods you need, and let the ToolStripPanel use that instead of the default.



But thanks for bringing this to my attention, I did not realize that the two panel properties were absolutely useless until now, because there wasn't a CustomizableToolStripPanel yet. I will add it to the first post now.

[andrewb]

Wow, thanks for the quick and thorough response Nick! I don't know how on earth I missed those properties, works like a charm!

The horizontal gradient is exactly what I was after, to get the same style most apps use with the gradients on the menubar and toolstrippanel matching.

[arcanine]

I have about a year of .NET programming under my belt, so a lot of things are still new and cool to me. However, this is really cool! Stellar job!

Actually, I've been playing with the property grid, and was trying to figure out how to make a custom editor. Now, I can learn from your code! I love it.

Thanks again for all of your effort.

[strosala]

Thanks for this tutorial. All examples are very good.

[dherr]

Hi Nick,

how do you think about a customizable BindingNavigator, it has RenderingMode too?

Regards
Dietrich

[dherr]

Hi Nick,

I have added the Office2007BlackColortable to the AppearanceControl. Are you interested of the code?

Dietrich

[NickThissen]

Hi Nick,

how do you think about a customizable BindingNavigator, it has RenderingMode too?

Regards
Dietrich

I have never actually worked with that control, but I can see now that it inherits ToolStrip. Then it should be quite easy to add it as a supported control for the AppearanceControl. I don't have time right now but you are welcome to try it. What you should do is basically create a class that inherits BindingNavigator and give it an Appearance property (of type AppearanceControl). You can take a look at all the other controls (CustomizableToolStrip, MenuStrip, ContextMenuStrip, StatusStrip, etc) which all do the same thing.

Hi Nick,

I have added the Office2007BlackColortable to the AppearanceControl. Are you interested of the code?

Dietrich

Sure, that would be cool. Do you have a screenshot too? I'm actually not familiar with a black office 2007 theme, where did you get the colors from? I used Visio 2007 (which was the only Office 2007 product left without a Ribbon) for the blue colors but I don't remember it having a black version too. Maybe it did but I was just too lazy to implement it

[dherr]

I got this ColorTable from

http://www.codeproject.com/KB/miscct...rControls.aspx

I will send you the code of the complete AppearanceControl in the evening.

Dietrich

[dherr]

Hi Nick,

see the attachement...

-Dietrich

[dherr]

And here is the prescription how to make a CustomizableBindingNavigator:

make a new class, name it CustomizableBindingNavigator
take the Code of the CustomizableToolstrip control
copy and paste this code into the new class
change the lines

Public Class CustomizableToolStrip
    Inherits ToolStrip

into

Public Class CustomizableBindingNavigator
	Inherits BindingNavigator

That's all!
The new control can be changed via AppearanceControl.

Dietrich

[NickThissen]

Thanks dherr, I have added a CustomizableBindingNavigator and an updated AppearanceControl in my first post to include the black style. I think it's god ugly, but hey, no reason not to provide it Thanks for doing the dirty work

[dherr]

These properties are now accessible via the CustomAppearance property. Click the [...] button next to it in the properties list and the Appearance Editor window will open.

Nick, you wrote this in the first thread. But I can't use this function, the ... button is not shown when I click into the propertyfield.
What can I do?

Dietrich

[NickThissen]

Hm, it seems the Editor attribute for the CustomAppearance property was changed, did you do that?
This

<Editor(GetType(AppearanceProperties), GetType(UITypeEditor))> _
    Public Property CustomAppearance() As AppearanceProperties

should be

<Editor(GetType(CustomAppearancePropertyEditor), GetType(UITypeEditor))> _
    Public Property CustomAppearance() As AppearanceProperties

I fixed it and changed the ZIP file in the first post, try it now

[dherr]

Thanks for the very fast answer
It works now!

Nice weekend for you!

D.

[arcanine]

I've probably said this before, but this is great!

Also, it's really minimal, but when you have a CustomizableToolStrip and you change the RoundedEdges property in the designer, it doesn't update.

I don't know if this is the proper way to update the control, but I've added the following line of code to the Set method of the RoundedEdges property:

If _Appearance IsNot Nothing Then _Appearance.OnAppearanceChanged(EventArgs.Empty)

[NickThissen]

I'm not sure what is required to make the ToolStrip redraw its edges. Perhaps a simple Invalidate call would work, or re-assigning the Renderer is probably the way to go. Calling the OnAppearanceChanged method of the Appearance control doesn't seem like a really good solution; for one, that method should be Protected and would not be accessible from the CustomizableToolStrip at all (did you make it Public, or did I make a mistake there and did not make it Protected or at least Pivate?).

[arcanine]

I don't have the code on this computer, but I know I didn't change the scope of the OnAppearanceChanged method. Also, I tried using Me.Invalidate within the Set method of the RoundedEdges property. That didn't work, though, which led me to trying other things.

I should point out that when I had two CustomizableToolStrips on the same form, whichever RoundedEdges property was set last was the flag that was used for both CustomizableToolStrips. Of course, this could have been a byproduct of me call the OnAppearanceChanged method inside the RoundedEdges property. I know setting one toolstrip to have rounded edges and the other to not have rounded edges is rather strange, I just wanted to bring it up, because it might help shed light on the situation.

[dherr]

Hi Nick,

a question:
Is it possible to do something like this?

Dim myColor as Color = (a CustomToolstrip elements color for instance the ToolStripGradientMiddle color)
...
But how?

Dietrich

[NickThissen]

Sure, just get the color from one of the many ColorTables. I'm pretty sure you can get the ColorTable currently in use from an existing CustomizableToolStrip via

Dim colors As ColorTable = toolStrip1.Renderer.ColorTable

Perhaps you have to cast the Renderer to ToolStripProfessionalRenderer;

Dim colors As ColorTable = ((ToolStripProfessionalRenderer)toolStrip1.Renderer).ColorTable

Then just use the color property you need from that

Dim color As Color = colors.ToolStripGradientMiddle

[dherr]

Thanks for your lead

I do it this way now:

Dim myRender As ToolStripProfessionalRenderer = DirectCast(ToolStrip1.Renderer, ToolStripProfessionalRenderer)
Dim myColors As ProfessionalColorTable = myRender.ColorTable
Dim myColor As Color = myColors.ButtonSelectedGradientEnd

[NickThissen]

Yeah, sorry, that should have been the code. What I wrote is a mixture of VB and C#, sorry about that

[AMedina]

Hi Nick and dherr,

I am new to programming Vb.net. Yesterday I downloaded the files in CustomizableStripsLibrary.zip and then inserted into a project I'm developing, but when I tried to build the solution, for each input file, the error 'Type is not defined' is declared, for example :
Type 'CustomizableStrips.CustomizableToolStrip' is not defined.
Can you help me solve this problem?

[NickThissen]

Are there errors in any (all?) of those files? What version of the .NET Framework are you compiling against? Is it a Windows Forms Project, or a Control Library project (what this boils down to: did you reference System.Windows.Forms?). Can you post ALL of the errors here?

[AMedina]

I'm compiling with .NET Framework 4 Client, Windows Forms Project, System.Windows.Forms referenced.
The errors are:
Error 1 Type 'CustomizableStrips.CustomizableToolStrip' is not defined.
Error 2 Type 'CustomizableStrips.AppearanceControl' is not defined.
Error 3 Type 'CustomizableStrips.CustomizableStatusStrip' is not defined.
Error 4 Type 'CustomizableStrips.CustomizableMenuStrip' is not defined.
Error 5 Type 'CustomizableStrips.CustomizableToolStrip' is not defined.
Error 6 Type 'CustomizableStrips.CustomizableStatusStrip' is not defined.
Error 7 Type 'CustomizableStrips.CustomizableMenuStrip' is not defined.
Error 8 Type 'CustomizableStrips.AppearanceControl' is not defined.

[NickThissen]

Where are you getting these errors? What did you do with any of the controls? If you just add the files to the project and build then I don't understand why you'd get these errors.

[AMedina]

Yes, I just add the files to the project and build. After click on built vb is showing the error list.

[arcanine]

Yes, I just add the files to the project and build. After click on built vb is showing the error list.

I've had those errors too. The name of the solution that NickThissen used to create the Customizable Strips was named "CustomizableStrips", so when you added them to your project, they are referencing a NameSpace that doesn't exist. If you go to each line of code that has that error and change "CustomizableStrips" to the name of your solution, the errors should go away.

[NickThissen]

I've had those errors too. The name of the solution that NickThissen used to create the Customizable Strips was named "CustomizableStrips", so when you added them to your project, they are referencing a NameSpace that doesn't exist. If you go to each line of code that has that error and change "CustomizableStrips" to the name of your solution, the errors should go away.

Ah, good catch! An easier fix is to put the files in a new control library project called CustomizableStrips, or just wrap each class in a namespace called called like that.

[arcanine]

Ah, good catch! An easier fix is to put the files in a new control library project called CustomizableStrips, or just wrap each class in a namespace called called like that.

Agreed! I added them manually a couple of times and then started using the controls library method, and it is a whole lot better!

[AMedina]

Agreed! I added them manually a couple of times and then started using the controls library method, and it is a whole lot better!

Thank you, Arcanine and Nick. I have the application working.
One question: is possible to get menus such as Visual Studio 2010, where there are items with color gradients?. I've tried, but I have not been able to achieve.

[NickThissen]

One question: is possible to get menus such as Visual Studio 2010, where there are items with color gradients?. I've tried, but I have not been able to achieve.

Not with these controls.

There are basically two ways to custom render a ToolStrip (and MenuStrip, etc):

(1) Implement your own ProfessionalColorTable, where you specify which colors the ToolStrip uses.

(2) Implement your own ToolStripProfessionalRenderer, where you draw everything manually using GDI+ techniques.


My control here uses option (1). It basically tells the ToolStrip to render itself like it usually does, except you tell it to use some different colors. Simply said: you can only change the colors, but you cannot add new colors or color stuff where the regular ToolStrip doesn't paint. You cannot create gradients that don't exist in the regular ToolStrip.


Option (2) gives you much more freedom, you can draw whatever you want and however you want it. This way you are free to draw a gradient wherever you want. Unfortunately, it's a lot more work!


Luckily for you, I happened to have created quite a few custom ToolStripProfessionalRenderers (option 2), including a VS2008 style and a VS2010 style You can find the links in my signature.