Creating a Professional ToolStrip in Windows Forms Part 2

In my previous post, I explained how to create the basic UI elements of a simple Windows Forms application with a nice looking vertical ToolStrip menu to host buttons and labels without ever leaving the Designer. In this post, I’ll explain how to wire up some events, load in some UserControl objects, and add a custom rendering method to style our MouseClick events on the ToolStrip buttons. We’ll begin by opening the project from our previous post. (seen here)

Prerequisites

  • Microsoft Visual Studio 2008 (or 2005, but I wrote this using 2008)
  • .NET Framework 3.5 (or 2.0, but I wrote this using 3.5)
  • Basic x,y coordinate knowledge to draw and position rectangles
  • Intermediate knowledge of C# and Windows Forms
    • Inheritance and overrides
    • Event handling

Step 1 – Create a Custom Rendering Class

  • Right click on the Project in the Solution Explorer, Add –> New Item… –> Class (.cs).
  • Name this class customRenderer.cs and click OK.

This class is going to inherit from ToolStripProfessionalRenderer so that we can override some of the rendering methods and make them do whatever we want. In this case, however, we will only be overriding the OnRenderButtonBackground method.

By overriding this method, we can change the behavior of how backgrounds are rendered. Some conditions will need to be applied in order to enforce that custom rendering only occurs on ToolStripButton objects and only when the objects are in a Checked state. Read through the comments in the next code block in order to understand some of the sections.

Take a few minutes to read through the above block of code in order to fully understand what’s happening. Follow the bullets below for an overview:

  • When Windows renders the button background on a ToolStrip, this overridden method will be called instead.
  • Only use our custom render code if the item is a ToolStripButton object.
  • Only use our custom render code if the ToolStripButton has its Checked property set to True.
  • Now, two different rectangles are going to be created and filled in order to achieve a 1 pixel border color that differs from the body color of the rendered button.
    • Get the height and width of the button, create a rectangle of exactly this size, and fill it with whatever color you want.
    • Get the height and width of the button, subtract 2 from both (in order to leave room for 1 pixel on top, left, bottom, and right sides to create the border), create a rectangle of exactly this size, offset its origin by 1,1, and fill it with whatever color you want.

Essentially, this step has rendered a smaller rectangle within another rectangle in order to create the look of a border. If any of the conditions prior to the rectangle events failed, simply call the normal render event of the base class (in this case, ToolStripProfessionalRenderer).

    Step 2 – Utilize the Custom Renderer in the ToolStrip Menu

    In order to use custom rendering on the ToolStrip in Form1, we need to set the ToolStrip’s Renderer property to an instance of our new custom rendering class at Form1’s construction.

    It’s really that simple. Anytime Windows goes to render our ToolStrip from now on, it will use our rendering class instead of the default. Remember that we’ve only overridden one method, so you can only expect the behavior to change as little as we added to our rendering class.

    Step 3 – Create Mutual Exclusion among Checked Items in the ToolStrip Menu

    If you’ve debugged the project at all during this time, you should notice that the menu still operates in a Multi Select fashion in that buttons will remain checked forever until that same button is clicked again. Instead, we would like to enforce a button to become unchecked when a different button is clicked. This will enforce intuitive and proper SDI functionality. The following block of code describes a method in which we can force all buttons in a ToolStrip to uncheck when we click a separate button. As usual, read the comments to understand the sections.

    The above block of code loops through all objects in the ToolStrip and checks only the button that sent the click event. Every other object (if it is a ToolStripButton) has its Checked property set to false.

    Up Next…

    Loading UserControl objects into our empty Panel after certain menu items in the ToolStrip are clicked and working with Microsoft Chart Controls.

    One thought on “Creating a Professional ToolStrip in Windows Forms Part 2

    Leave a Reply

    Your email address will not be published. Required fields are marked *