Click here to Skip to main content
15,881,089 members
Articles / Programming Languages / C#

Customizable Drag-drop ToolStrip

Rate me:
Please Sign up or sign in to vote.
4.90/5 (7 votes)
5 Dec 2011CPOL3 min read 32.7K   2.8K   29   3
.NET ToolStrip allows drag and drop customizaton
screenshot.JPG

Introduction

Do you want to be able to add a drag/drop customizable toolStrip to your .NET project, similar to that found in Firefox?

Background

I wrote this control based on the .NET toolStrip with the following purposes/constraints in mind:

  • The code must be easy to use, and easy to incorporate into existing projects that have already implemented ToolStrips.
  • The code should be as lightweight as possible and not be dependant on any external 3rd party libraries.
  • It should be flexible allowing different 'customization dialogs' and methods of persisting user settings.
  • There should be no maintenance overhead if items are added or removed from the toolstrip during further project development.

Using the Code

New ToolStrip

Add the ToolStripCustom control to your form, other than the additional properties use is similar to the .NET ToolStrip.

Existing ToolStrip

Be careful. If you haven't already done so, back-up your project/solution.

  • Check you have a valid assembly, the 'ToolStripCustom' control should be visible in your toolbox.
  • Open the designer file for the form containing the toolbar, find the definition for your existing ToolStrip and change the type to ToolStripCustom.
  • Where the ToolStrip is created, change the constructor from ToolStrip to ToolStripCustom.
  • If the ImageScalingSize property is modified, change the property to SmallImageScalingSize.

Customizing the ToolStrip

Call the ToolStripCustom's customize method to display the customization dialog, allowing the user to drag and drop tools to and from the toolstrip and the dialog, and reorder tools within the toolstrip.

C#
private void btnCustomize_Click(object sender, EventArgs e)
{
    this.toolStripCustom.Customize();
} 

Persisting User Settings in the Registry

The control exposes two methods that are used to save the users settings in the registry and retrieve them to modify the toolstrip.

'LoadUserLayoutFromRegistry' retrieves the users' settings from the registry and modifies the position and visibility of items on the toolstrip and the toolstrip's styles, if the given key exists. It takes 2 strings as parameters that are used to name the application and field keys in the registry.

'SaveUserLayoutToRegistry' saves the current layout and style of the toolstrip in the registry under the key name set by a previous call to 'LoadUserLayoutFromRegistry'.

C#
private void Demo_Load(object sender, EventArgs e)
{
     this.toolStripCustom.LoadUserLayoutFromRegistry("DemoApp", "ToolStripSettings"); 
}

private void Demo_FormClosed(object sender, FormClosedEventArgs e)
{
     this.toolStripCustom.SaveUserLayoutToRegistry();
} 

Serializing User Settings

The 'toolstripdata' class that stores the user settings is exposed as a property of the toolstripcustom, and is serialisable, this allows the user settings to be stored other than in the registry. The example below uses isolated storage to store the user settings as binary data.

C#
public class UserSettings
{
    public ToolStripData MainToolStripUserSettings;
           
    public void LoadUserSettings()
    {
        IsolatedStorageFileStream fs = new IsolatedStorageFileStream
                ("Solar01.cfg", FileMode.OpenOrCreate);
        BinaryFormatter bf = new BinaryFormatter();

        if (fs.Length > 0)
        {
            try
        {
             MainToolStripUserSettings = (ToolStripData)bf.Deserialize(fs);
                 //deserialize other user preferences
        }
        catch(Exception e)
        {
        //serialization exception caught            
        }
        }
        else
        {
            MainToolStripUserSettings = new ToolStripData();            
        }

        fs.Close();
    }

    public void SaveUserSettings()
    {
        IsolatedStorageFileStream fs = new IsolatedStorageFileStream
                ("Solar01.cfg", FileMode.Create);
        BinaryFormatter bf = new BinaryFormatter();

    if ( MainToolStripUserSettings != null )
    {
        try
        {
            bf.Serialize(fs, MainToolStripUserSettings);
                //serialize other user preferences
        }
        catch(Exception e)
        {
            //serialization exception caught
        }
        }                
        fs.Close();
    } 
private void MDIParent_Load(object sender, EventArgs e)
{
    this.mainToolStrip.UserData = _userSettings.MainToolStripUserSettings;
}

Separators and Available Tools

If there are any separators in the toolstrip, then a separator will appear in the available tools list in the customisation dialog. Therefore if you don't want a separator visible in the toolstrip by default, but do want one to appear in the customisation dialog, then add a separator to the toolstrip and set its Visible property to false.

Likewise, any other tools whose visible property is set to false will appear as available tools in the customisation dialog, but not on the default toolstrip.

Image Sizes and the LargeImageList

The toolstrip supports two different image icon sizes and allows the user to select large or small icons.

The 'LargeIcons' property determines whether the toolstrip items display large or small images. The small images are from each toolstrip items image property, the large images from the toolStripCustom's 'LargeImageList' property. If no large image is found for an item, and that item's 'ImageScalingProperty' is set to 'SizeToFit' then the items image is stretched to the 'LargeImageSize'.

Icons supplied by http://pixel-mixer.com.

History

  • 5th December, 2011: Initial post

License

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


Written By
United Kingdom United Kingdom
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionExcellent.. How to use the code inside my application Pin
Member 228177121-Jun-12 22:14
Member 228177121-Jun-12 22:14 
QuestionDownload links in article. Please! Pin
cp200804285-Dec-11 13:13
cp200804285-Dec-11 13:13 
AnswerRe: Download links in article. Please! Pin
Daniel Bennett5-Dec-11 13:42
Daniel Bennett5-Dec-11 13:42 
Oops just done!

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

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