Click here to Skip to main content
Click here to Skip to main content

Custom Rendering for the ToolStrip, MenuStrip, and StatusStrip controls

, 19 Sep 2008
Rate this:
Please Sign up or sign in to vote.
Custom rendering for the ToolStrip, MenuStrip, and StatusStrip controls.

CustomToolStrip

Introduction

This article was written to demonstrate how to customize the display of the ToolStrip, MenuStrip, and StatusStrip controls. We will look at the ProfessionalColorTable class as well as the ToolStripCustomRenderer class.

Background

Over the past few months, I've created UIs using an MDI form. I wanted each UI to have its own custom color theme. The old Windows look starts to get old after awhile. Customizing the color schemes is fairly easy via code, but I wanted to edit the colors at design time. I also wanted something I could use over and over again.

Using the code

In my project, three different controls exist. Since each control is pretty much the same, I will just focus on the ToolStrip control.

To begin, we need the following two things:

  • A custom ToolStrip control
  • A custom color table

To create the custom control, simply add a new user control to the project. The file we just added inherits from the UserControl class. Instead, I want to inherit from the System.Windows.Forms.ToolStrip class, as shown below.

public partial class CustomToolStrip : ToolStrip

The reason I start with the UserControl is to 'steal' its InitializeComponent method. If you attempt to compile the project after changing the inheritance, you will receive an error. We will need to remove the AutoScale property from the InitializeComponent method.

Next, we need to create a class that holds our color scheme information. We do this by adding a blank class. We will need to make our class inherit from System.Windows.Forms.ProfessionalColorTable.

internal class CustomToolStripColorTable : ProfessionalColorTable

Now that we have the inheritance setup, we will need to override the methods for the colors we want to set. Listed below is what the completed class will look like (I will explain the Properties part next).

using System;
using System.Drawing;
using System.Windows.Forms;

namespace System.Windows.Forms
{

internal class CustomToolStripColorTable : ProfessionalColorTable
{
    /// <span class="code-SummaryComment"><summary></span>
    /// Gets the border color of the System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>

    public override Color ToolStripBorder
    {
        get
        {
            return Properties.Settings.Default.ToolStripBorder;
        }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets the starting color of the content panel gradient
    /// on System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>

    public override Color ToolStripContentPanelGradientBegin
    {
        get
        {
            return Properties.Settings.Default.ToolStripContentPanelGradientBegin;
        }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets the ending color of the content panel gradient
    /// on System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>

    public override Color ToolStripContentPanelGradientEnd
    {
        get
        {
            return Properties.Settings.Default.ToolStripContentPanelGradientEnd;
        }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets the background color of the drop down
    /// on the System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>

    public override Color ToolStripDropDownBackground
    {
        get
        {
            return Properties.Settings.Default.ToolStripDropDownBackground;
        }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets the starting color of the gradient
    /// on the System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>

    public override Color ToolStripGradientBegin
    {
        get
        {
            return Properties.Settings.Default.ToolStripGradientBegin;
        }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets the middle color of the gradient
    /// on the System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>

    public override Color ToolStripGradientMiddle
    {
        get
        {
            return Properties.Settings.Default.ToolStripGradientMiddle;
        }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets the ending color of the gradient
    /// on the System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>

    public override Color ToolStripGradientEnd
    {
        get
        {
            return Properties.Settings.Default.ToolStripGradientEnd;
        }
    }
}
}

As you can see, the return values are set to Properties.Settings.Default.xxxxx. The reason I've instructed you to create the methods first is so we can copy and paste the method names into our Settings file.

Within the Properties folder in the Solution Explorer, there should be a Settings.settings file. If it does not exist, add it. Go ahead and create a setting for each color item. Each item should be of type System.Drawing.Color. Select the default colors for each.

The reason we are creating the settings file is so that we can persist changes. To persist user changes, we need to make sure the scope is set to User rather than Application (this is read only).

Now, it is time to revisit our custom control and pull everything together. First, we need to tell the control to render from our custom color table.

#region Constructor
public CustomToolStrip()
{
    InitializeComponent();
    this.RenderMode = ToolStripRenderMode.Professional;
    this.Renderer = new ToolStripProfessionalRenderer(
                    new CustomToolStripColorTable());
}
#endregion

The next step is to set the control up to be edited in design time. The following code demonstrates this task:

using System;
using System.ComponentModel;
using System.Drawing;
using System.Windows.Forms;

namespace System.Windows.Forms
{
public partial class CustomToolStrip : ToolStrip
{

#region Constructor

    public CustomToolStrip()
    {
        InitializeComponent();
        this.RenderMode = ToolStripRenderMode.Professional;
        this.Renderer = new ToolStripProfessionalRenderer(
                        new CustomToolStripColorTable());
    }
#endregion

#region Properties

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets or sets the ForeColor
    /// of the System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>

    [Category("Style")]
    [DisplayName("ToolStripForeColor")]
    public Color ToolStripForeColor
    {
        get { return Properties.Settings.Default.ToolStripForeColor; }
        set
        {
            Properties.Settings.Default.ToolStripForeColor = value;
            this.ForeColor = value;
        }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets or sets the border color
    /// of the System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>

    [Category("Style")]
    [DisplayName("ToolStripBorder")]
    public Color ToolStripBorder
    {
        get { return Properties.Settings.Default.ToolStripBorder; }
        set { Properties.Settings.Default.ToolStripBorder = value; }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets or sets the starting color of the content panel
    /// gradient on System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>
    [Category("Style")]
    [DisplayName("ToolStripContentPanelGradientBegin")]

    public Color ToolStripContentPanelGradientBegin
    {
        get { return Properties.Settings.Default.ToolStripContentPanelGradientBegin; }
        set { Properties.Settings.Default.ToolStripContentPanelGradientBegin = value; }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets or sets the ending color of the content panel
    /// gradient on System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>
    [Category("Style")]
    [DisplayName("ToolStripContentPanelGradientEnd")]

    public Color ToolStripContentPanelGradientEnd
    {
        get { return Properties.Settings.Default.ToolStripContentPanelGradientEnd; }
        set { Properties.Settings.Default.ToolStripContentPanelGradientEnd = value; }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets or sets the background color of the drop down
    /// on the System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>
    [Category("Style")]
    [DisplayName("ToolStripDropDownBackground")]

    public Color ToolStripDropDownBackground
    {
        get { return Properties.Settings.Default.ToolStripDropDownBackground; }
        set { Properties.Settings.Default.ToolStripDropDownBackground = value; }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets or sets the starting color of the gradient
    /// on the System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>
    [Category("Style")]
    [DisplayName("ToolStripGradientBegin")]

    public Color ToolStripGradientBegin
    {
        get { return Properties.Settings.Default.ToolStripGradientBegin; }
        set { Properties.Settings.Default.ToolStripGradientBegin = value; }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets or sets the middle color of the gradient
    /// on the System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>
    [Category("Style")]
    [DisplayName("ToolStripGradientMiddle")]

    public Color ToolStripGradientMiddle
    {
        get { return Properties.Settings.Default.ToolStripGradientMiddle; }
        set { Properties.Settings.Default.ToolStripGradientMiddle = value; }
    }

    /// <span class="code-SummaryComment"><summary></span>
    /// Gets or sets the ending color of the gradient
    /// on the System.Windows.Forms.ToolStrip control.
    /// <span class="code-SummaryComment"></summary></span>
    [Category("Style")]
    [DisplayName("ToolStripGradientEnd")]

    public Color ToolStripGradientEnd
    {
        get { return Properties.Settings.Default.ToolStripGradientEnd; }
        set { Properties.Settings.Default.ToolStripGradientEnd = value; }
    }
#endregion
}
}

The attributes I've added (Category, DisplayName) are totally optional, but are nice to have when looking for the items in the designer.

To wrap things up, we can build the project, and then the custom control will show up in the toolbox. Go ahead and add the control, and edit the colors via the designer.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

bcryner
Other
United States United States
No Biography provided

Comments and Discussions

 
QuestionStatusStrip button Hover/selection color PinmemberSandhraPrakash10-Mar-14 22:38 
GeneralMy vote of 3 PinmemberJonathan H Berber14-Mar-12 7:09 
GeneralRun Time Problem Pinmemberjacky4lad25-Sep-10 2:18 
GeneralRe: Run Time Problem PinmemberTeryaki31-Dec-10 15:01 
GeneralUnhandled exception has occurred Pinmemberkrishnavaradharajan6-Aug-10 16:19 
Questioninsert gripper into toolstrip Pinmember101619-Nov-08 4:50 
GeneralProject failed to open PinmemberbuyValu18-Nov-08 10:16 
Could not open project because cSharp components missing.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 19 Sep 2008
Article Copyright 2008 by bcryner
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid