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

Customizable Drag-drop ToolStrip

By , 5 Dec 2011
 
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.

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'.

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.

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)

About the Author

Daniel Bennett
United Kingdom United Kingdom
Member
No Biography provided

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
Hint: For improved responsiveness ensure Javascript is enabled and choose 'Normal' from the Layout dropdown and hit 'Update'.
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
QuestionExcellent.. How to use the code inside my applicationmemberMember 228177121 Jun '12 - 22:14 
QuestionDownload links in article. Please!membercp200804285 Dec '11 - 13:13 
AnswerRe: Download links in article. Please!memberDaniel Bennett5 Dec '11 - 13:42 

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

Permalink | Advertise | Privacy | Mobile
Web02 | 2.6.130513.1 | Last Updated 5 Dec 2011
Article Copyright 2011 by Daniel Bennett
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid