A Flyout Toolbar in C#

• Download demo - 62.5 KB
• Download source code - 6 KB

Introduction 

I looked for a kind of flyout toolbar in C#. The only article I found was: "Creating Flyout Toolbars". You can find the article here. But the code is written in C++. So I decided to write my own version in C#. 

The principle 

The goal is to have not too many buttons on a toolbar. If you click long enough on a button, a toolbar appears. Simply drag the cursor on the toolbar and select the button of your choice by releasing the mouse button. After that, if you quickly click this button, the corresponding function is performed. 

How to create a CSFOToolbar 

• Copy the file 'CSFOToolbar.cs' into the directory of your project and in the solution, add the file with 'Add existing item...' 
• Build up a first time the solution. You will see a new component in the toolbar of Visual Studio. 
• Drag a CSFOToolbar component to the form or in a toolstrip container. Remark: the CSFOToolbar component behaves like a classic ToolStrip. 
• Add some toolstrip buttons in the CSFOToolbar component. 
• Add one or more classic toolstrip(s) on the main form. 
• Add toolstrip buttons into those toolstrips. 
• Add click events for those toolstrip buttons. Attention: each button must have a click event defined previously otherwise it won't work out (the button could not be selected).   
• Add the form_load method in the project and call the method 'AddFlyout()' of the CSFOToolbar for each button you want to attach a flyout toolbar to. By doing this, the classic toolstrip will become a flyout toolbar.   

Example:

private void Form1_Load(object sender, EventArgs e)
{
     csfoToolBar1.AddFylout(newToolStripButton, toolStrip1, 0);
     csfoToolBar1.AddFylout(helpToolStripButton, toolStrip2, 0);
}  

The parameters of the method 'AddFlyout()' are:

• The first parameter is the button of the CSFOToolbar which is attached to the toolstrip,
• The second parameter is the toolstrip to attach (that becomes a flyout toolbar),
• The third parameter indicates the index (0 based) of the button in the flyout toolbar that will be selected by default (at start). 

Remark: Do not create a click event for the button with a flyout toolbar attached in the CSFOToolbar. 

The properties of CSFOToolbar 

Each button with a flyout toolbar is marked with a red triangle in the down right corner. 

• Corner color: the color of the triangle (default: red), 
• Corner size: the size in pixel of the triangle (default: 6),   
• Delay: the time (in ms) before the flyout appears (default: 300ms).
• Orientation: define the orientation of the flyout toolbar. Possible values are:
• Horizontal: the flyout toolbar is always displayed horizontally (default),
• Vertical: the flyout toolbar is always displayed vertically,
• Same: the flyout toolbar is always displayed in the same orientation of its ‘main’ toolbar,  
• Opposite: the flyout toolbar is always displayed in the opposite orientation of its ‘main’ toolbar.   
• Restrict: Restrict the display of the flyout toolbar to the area of the form (default: false).

Points of Interest   

• How to transfer the event click handler from a toolstrip button to another one in another toolstrip using reflection (the methods: ModifyComponentEventHandler(…) and GetDelegate(…)), 
• How to use a form to display a flyout (or floating) toolstrip (the class CSFOform),
• How to manage events from a control (a toolstrip button) into another control (the form of the flyout toolstrip),
• How to find a toolstrip button at the mouse position (the method: FindButton(…)),
• How to modify the orientation of a toolstrip by modifying the layout style (the method: ReturnLayoutStyle(…)),
• An example of using the toolstrip renderer (the class: CSFOToolbarRenderer),
• An example of using timer, 
• An example of forcing to display a tooltip on a toolstrip (in the method c_MouseMove(…) of CSFOForm,) 

Environment   

This class is developed under Visual Studio 2005 with framework 2.0.

References

• Creating flyout toolbar: http://www.codeproject.com/Articles/1517/Creating-Flyout-Toolbars 
• Get delegate from Event's subscription: http://www.codeproject.com/Articles/34990/Get-Delegate-from-Event-s- Subscription

History

• May 2013: First available version.