Click here to Skip to main content
15,891,607 members
Articles / Programming Languages / C#
Article

A Simple C# Toolbar Docking Framework

Rate me:
Please Sign up or sign in to vote.
4.88/5 (95 votes)
7 Sep 20043 min read 472.6K   6.8K   179   108
An example framework for toolbar handling, written in C#.

Sample Image - ToolBarDock.gif

Introduction

This code snippet includes a simple framework for handling docking toolbars. This framework includes support for:

  • floating/docking bars
  • changing layout of docked bars
  • double-click to switch from docked to floating and back
  • show/hide bar
  • right-click for bar view menu
  • disabling docking using the control key
  • handles any kind of control, not just toolbars

The code runs on Windows XP and VS .NET 2002, but should work on most .NET environments.

Background

The code was written while exploring the .NET framework. Although several toolbar handling implementations are available, I decided to have a go at writing my own. Nevertheless, I hope this article might be of use.

Using the code

Using the code is quite simple. Create a ToolBarManager object, giving it the form where the toolbars may be docked. This form would most likely be your application main form which would also keep the ToolBarManager as a member.

C#
_toolBarManager = new ToolBarManager(this);

The ToolBarManager handles all UI operations on the toolbars and it is also the only class the programmer will access. Adding toolbars is performed by invoking the AddControl method. Different versions of this method are available to allow more control over the positioning of the new toolbar.

C#
// Add toolbar (default position)
_toolBarManager.AddControl(_toolBar1);
// Add toolbar (floating)
_toolBarManager.AddControl(_toolBar2, DockStyle.None);
// Add toolbar (left)
_toolBarManager.AddControl(_toolBar3, DockStyle.Left);
// Add toolbar (left, on the left of _toolBar3)
_toolBarManager.AddControl(_toolBar4, DockStyle.Left, _toolBar3, DockStyle.Left);
// Add control
_toolBarManager.AddControl(_dateTimePicker, DockStyle.Bottom);

Other methods are also available to access the toolbars being handled by the ToolBarManager. Their use is rather straightforward:

  • public ArrayList GetControls() - Returns the set of all the added controls.
  • public bool ContainsControl(Control c) - Returns
    C#
    true
    
    if the control is included.
  • public void ShowControl(Control c, bool show) - Shows or hides the control.
  • public void RemoveControl(Control c) - Removes the control.

Points of Interest

The docking behavior is performed by four ToolBarDockArea controls that are added and docked to all four sides of the form. These controls simply perform specific layout handling and automatic resizing according to the controls that are added or changed.

To achieve dragging, the ToolBarManager handles mouse events on all controls added via AddControl. During drags, the ToolBarManager checks, according to the mouse position, if the dragged control should be placed on its own form (floating) or on any of the dock areas.

The control key events are handled via PreFilterMessage.

The appearance of the toolbar (the floating frame and the gripper) are user drawn in the ToolBarDockHolder user control.

History

A history file with detailed information is included in the download, here is a summary.

Version 1.0:
First version by Rogério Paulo.

Version 2.0:
Updates by Martin Müller (aka mav.northwind):

  • ToolBarManager c'tor now takes a ScrollableControl and a Form so that you can define an independent docking region and do not always have to use the form. The form itself is still needed as owner of floating toolbars, though.
  • ToolBarDockHolder now has a new property ToolbarTitle, allowing you to specify an independent name for a floating toolbar. The default is still the control's Text, but the Control.TextChanged event will no longer modify the title.
  • ToolBarDockHolder now has a new property AllowedBorders where you can specify which borders the toolbar is allowed to dock to.
  • ToolBarManager.AddControl() now returns the newly added ToolBarDockHolder, so that it's properties can be modified. The example now includes a MainMenu
  • Modified the size calculation for vertical toolbars with separators

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Portugal Portugal
Rogério Paulo is a software engineer in the domain of industrial information technology since 1999.
He has been mainly involved in product development in the fields of SCADA, engineering toolsets, embedded systems, communication networks and industrial communication protocols.
www.rpaulo.com

Comments and Discussions

 
QuestionToolbar background color Pin
karim sharif3-Oct-05 6:36
susskarim sharif3-Oct-05 6:36 
QuestionUsing without a form Pin
Mike Manfredi23-Sep-05 8:37
Mike Manfredi23-Sep-05 8:37 
GeneralUnable to change font Pin
ajaych8-Sep-05 22:27
ajaych8-Sep-05 22:27 
QuestionVB .NET Pin
kenexcelon8-Sep-05 8:58
kenexcelon8-Sep-05 8:58 
AnswerRe: VB .NET Pin
Hsun-Cheng Hu8-Sep-05 19:49
Hsun-Cheng Hu8-Sep-05 19:49 
GeneralProblems with ImageList Pin
silver_csc31-Jul-05 18:03
silver_csc31-Jul-05 18:03 
GeneralRe: Problems with ImageList Pin
Anonymous15-Oct-05 5:15
Anonymous15-Oct-05 5:15 
GeneralWeird behaviour when multiple bars on the same dockarea Pin
Ray Duku20-Jul-05 6:07
Ray Duku20-Jul-05 6:07 
Ok, first of all: thanks you did a great job...

But, I have a weird behaviour when using multiple toolbars on the same dockarea.
I've got 4 toolbars and I dock them on the top, it looks nice like this:
| T1 | T2 | T3 | T4
Then I drag T4 downward... and when the Y of the mouse pointer just goes out of the "toolbar" T4, instead of floating redocks underneath the toolbar, like this:
| T1 | T2 | T3
| T4
I go on dragging and eventually, when the Y of the mouse pointer goes out of the second line of the "toolbar", T4 floats...
| T1 | T2 | T3
+----+
| T4 |
+----+
This is already weird, but it get worse when I intend to dock again T4: I first have this, when draging the mouse upward:
| T1 | T2 | T3
| T4
then this:
| T1 | T2 | T3 | T4
and worst of all, if I unfortunately drag the mouse pointer higher than half the height of the "toolbar" I get this:
| T4
| T1 | T2 | T3
It is really sensitive: I remade the drags really slowly to be sure of the point at which it happens, and it is just at half the height of the toolbar.

With a little bit of foolishness I managed to get layouts like this one:
| T2
| T1
| T3
| T4

I'm currently trying to solve the problem, but my Winforms experience lacks a lot and I'm begging for mercy Wink | ;-)

Has any one faced the same behaviour and if so did he solve it ?

Ray Duku
Il torche un max Wink | ;-)
Generalcouple bugs + 1 enhacement Pin
seyffert_az8-Jun-05 21:03
seyffert_az8-Jun-05 21:03 
QuestionFixed point? Pin
jinboh7-Jun-05 10:19
jinboh7-Jun-05 10:19 
GeneralSmall Bug Pin
TroLoo19-Apr-05 13:43
TroLoo19-Apr-05 13:43 
GeneralRe: Small Bug Pin
Rogério Paulo20-Apr-05 3:12
Rogério Paulo20-Apr-05 3:12 
GeneralRe: Small Bug Pin
nrgisem15-Jun-05 4:30
nrgisem15-Jun-05 4:30 
GeneralRe: Small Bug Pin
Mohammad Hamed26-Dec-05 5:52
Mohammad Hamed26-Dec-05 5:52 
QuestionHow to change the size of my tool bar to the size of the main form? Pin
sm@va7-Mar-05 10:10
sm@va7-Mar-05 10:10 
QuestionAll great, but is there a way to get components width filled in the toolbar?? Pin
starmate8-Feb-05 12:18
starmate8-Feb-05 12:18 
AnswerRe: All great, but is there a way to get components width filled in the toolbar?? Pin
DaBears14-Feb-05 5:03
DaBears14-Feb-05 5:03 
GeneralAdded support for more than one control Pin
DaBears4-Jan-05 8:58
DaBears4-Jan-05 8:58 
GeneralRe: Added support for more than one control Pin
jonh19-Mar-05 23:41
jonh19-Mar-05 23:41 
GeneralRe: Added support for more than one control Pin
seyffert_az9-Jun-05 6:33
seyffert_az9-Jun-05 6:33 
GeneralRe: Added support for more than one control Pin
whatda10113-Feb-06 11:29
whatda10113-Feb-06 11:29 
GeneralRe: Added support for more than one control Pin
whatda10113-Feb-06 11:29
whatda10113-Feb-06 11:29 
GeneralResizability of toolbar Pin
14-Dec-04 17:54
suss14-Dec-04 17:54 
QuestionIs there a way to save the layout? Pin
optikflux13-Nov-04 11:35
optikflux13-Nov-04 11:35 
AnswerRe: Is there a way to save the layout? Pin
Rogério Paulo14-Nov-04 22:29
Rogério Paulo14-Nov-04 22:29 

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.