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 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
- 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.
private void Form1_Load(object sender, EventArgs e)
csfoToolBar1.AddFylout(newToolStripButton, toolStrip1, 0);
csfoToolBar1.AddFylout(helpToolStripButton, toolStrip2, 0);
The parameters of the method '
- 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
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:
- How to use a form to display a flyout (or floating) toolstrip (the class
- 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:
- How to modify the orientation of a toolstrip by modifying the layout style (the method:
- An example of using the toolstrip renderer (the class:
- An example of using timer,
- An example of forcing to display a tooltip on a toolstrip (in the method
This class is developed under Visual Studio 2005 with framework 2.0.
- May 2013: First available version.