After watching Joe Stegman's DEV260 overview of Windows Forms “2.0” I was fascinated by the new MenuStrip and ToolStrip controls. I love the fact that MS is giving us access to controls that will have a very similar look and feel, by default, to the current MS applications. What's even better is these new strips can use a custom renderer to create your own look and feel. That means when Office v.next comes out we'll immeidately be able to update our own look and feel to match the new UI.
I've included a sample of an Xbox theme I hacked together just to get a basic feel for creating a custom renderer. I'm sure I'm far off best practices, but I'm happy to get this working for a start.
The following code you'll need in your Form with the ToolStrip and MenuStrip objects.
MyRenderer rend = new MyRenderer();
ToolStripManager.Renderer = rend;
toolStrip1.Renderer = rend;
menuStrip1.Renderer = rend;
The important thing to note in this code is the ToolStripManager.Renderer = rend; line. This seems to be the key to having the OnRenderRaftingContainerBackground event called in your customer renderer. Without it you'll end up with a rafting container that is blue or the system colors. (The rafting container I've picked up is the object under the MenuStrip and ToolStrip that tie things together. This is pretty much the area no drawn over by the strips.)
Unfortunately, at least to me, this seems a little unintuitive. I was expecting to be able to set a Renderer property on the instance of the RaftingContainer object. Instead there is this static property that gets set. I'm sure there is something under the hood I don't understand yet that has led to this implementation.
The next piece is inheriting from ToolStripRenderer to create your own renderer. I've included below a sample of one of the more interesting events that is fired. This is the code that implements the drawing of the greenish yellow gradient when the user hovers over a toolbar button with the mouse, and clicks on a button.
//The drawing that happens on the background of the button.
protected override void OnRenderButtonBackground(ToolStripItemRenderEventArgs e)
{
base.OnRenderButtonBackground(e);
Graphics g = e.Graphics;
//if the mouse is over the given buttin
if (e.Item.Selected)
{
//if the mouse has been pressed on the button,
//we want to make the colors a little
//darker so the user knows something happened.
if (e.Item.Pressed)
{
using (LinearGradientBrush b = new LinearGradientBrush(new Rectangle(0, 0, e.Item.Bounds.Width, e.Item.Bounds.Height), Color.FromArgb(Color.Yellow.R, Color.Yellow.G, Color.Yellow.B + 50), Color.DarkGreen, 90))
{
g.FillRectangle(b, new Rectangle(0, 0, e.Item.Bounds.Width, e.Item.Bounds.Height));
}
}
//draw the case when the mouse is just hovering.
else
{
using (LinearGradientBrush b = new LinearGradientBrush(new Rectangle(0, 0, e.Item.Bounds.Width, e.Item.Bounds.Height), Color.Yellow, Color.Green, 90))
{
g.FillRectangle(b, new Rectangle(0, 0, e.Item.Bounds.Width, e.Item.Bounds.Height));
}
}
}
}
Hopefully this will get a few people started writing custom renderers. I was really surprised at how easy it is to write one. Please feel free to let me know what you think. I'm learning as I go, so I'm sure there are some places that I can definitely learn a litle more.
BTW this was built and runs on Visual Studio 2005 CTP May, the version released at TechEd and on MSDN at the same time.