Introduction

One of the first features of C# that took my interest was the ability to
Dock a Control onto the edge of a Form.
Now I could attach a Control (or more likely a composite control by
deriving from UserControl) onto a Form edge and
quickly construct a useful looking application. But there is one crucial factor
missing from this scenario. The user has no discretion over the size or
positioning of this docked control. I want the user to be able to drag the
control to a different edge and be able to resize the control so that they can
customise the application area to suit their own preferences.

Composite Control for Docking

To solve this problem we need to create a new composite control
DockingControl that is able to take a caller supplied control and
manage its position and sizing. Our composite control will need a resizing bar;
a grab handle area that can be used to move its docking position and a place for
the caller supplied control to be displayed.

The final line of code in the instance constructor adds the three child
controls _wrapper, _handle and _resize.
The order of the controls in the initializer list is absolutely crucial because
when the DockingControl (or any other Control) has its
Dock style changed this ordering determines the position and size
of the child controls. Calculations are made starting with the last control
added (which equates to last entry in the initializer list) back towards the
first, which is the exact opposite of what I would have expected.

The _resize bar is first to be positioned (and so last in
initializer list) as it should always be shown spanning the entire length of the
docking control. Next is the _handle as it should be positioned
under the sizing bar and finally the _wrapper control, this is last
because it always has a Dock style of Fill and we want
it to take up whatever space is leftover when all the other controls have
finished being laid out.

Change of docking position

When the docking position of our composite control is changed we need to
ensure that our child controls are also correctly positioned for the new docking
style. So we override the inherited Dock property and
recalculate the correct size and positions as appropriate.

// Override the base class property to allow extra work
publicoverride DockStyle Dock
{
get { returnbase.Dock; }
set
{
// Our size before docking position is changed
Size size = this.ClientSize;
// Remember the current docking position
DockStyle dsOldResize = _resize.Dock;
// New handle size is dependant on the orientation of the new
// docking position
_handle.SizeToOrientation(value);
// Modify docking position of child controls based on our new
// docking position
_resize.Dock = DockingControl.ResizeStyleFromControlStyle(value);
_handle.Dock = DockingControl.HandleStyleFromControlStyle(value);
// Now safe to update ourself through base class
base.Dock = value;
// Change in orientation occured?
if (dsOldResize != _resize.Dock)
{
// Must update our client size to ensure the correct size is
// used when the docking position changes. We have to
// transfer the value that determines the vector of the
// control to the opposite dimension
if ((this.Dock == DockStyle.Top) ||
(this.Dock == DockStyle.Bottom))
size.Height = size.Width;
else
size.Width = size.Height;
this.ClientSize = size;
}
// Repaint our controls
_handle.Invalidate();
_resize.Invalidate();
}
}

Two static functions (ResizeStyleFromControlStyle and
HandleStyleFromControlStyle) are used to find the correct docking
style for the _resize and _handle controls dependant
on the new Dock style. Of special note is the code that checks for
a change in docking orientation and then changes the Width or
Height of the control. Remember that when our control is docked to
the top or bottom of the form then the Width of the control is
calculated for us by the form and the Height determines how far
inwards the docking control extends. When the orientation moves to be left or
right then we need to update the Width of the control to reflect
how far from the edge we want the control to extend. So the new
Width should be the old Height, otherwise the
Width will remain the same as the entire width of the form and so
it would fill the entire client area.

The rest of the DockingControl class follows and consists of
static properties for recovering GDI+ objects (to be used by the child controls
for drawing) and the previously mentioned static methods used for calculating
the new docking position of each child control based on the new position of the
DockingControl.

Resizing

Our first child control is called DockingResize and provides an
area of the docking control that the user can drag for resizing. Notice that
when the mouse is clicked the OnMouseDown remembers the current
size of the parent DockingControl and the screen position of the
mouse. This is necessary so that when the OnMouseMove is received
it can calculate how far the mouse has been moved since it was pressed and so
the new size of DockingControl. Also notice that it will set the
cursor to indicate a resizing operation is allowed.

The only other work needed in this class is the override of
OnPaint that is used to draw the 3D appearance of the resizing bar
itself. It uses static methods from the DockingControl to recover
the correct GDI+ objects to use.

Dragging

Our next child control DockingHandle has three tasks to perform.
It must first of all ensure that it is sized correctly to reflect the current
orientation of the parent DockingControl. One of our dimensions
will always be calculated determined for us as we are docked to one of the
parent control edges. However, the other dimension should always be fixed to
reflect the space needed for drawing and allowing the user to grab it. The
routine SizeToOrientation performs this decision.

The second task and the most interesting is performed inside
OnMouseMove. Here we need to convert the mouse position from our
own client position to the client position in the host form. By testing how near
the cursor is to each edge of the form we can decide which edge should become
the new docking position of the parent DockingControl. At the
moment the code uses a constant value of _hotLength to decide if
the mouse is close enough to an edge for the docking edge to be changed.
Actually causing the docking to change is trivial, just change the
Dock property on the DockingControl.

Shrink the user supplied control

When developing this code I noticed that placing the user supplied control
for the DockingControl into the control would push that control
right up against the edges of the resize bar and grab area. Although there is
nothing wrong with this it didn't look very tidy, so instead I use this small
helper class that places a border around the provided control. The
DockingControl creates an instance of this
BorderControl passing in the user supplied control. Then this
BorderControl is used to fill the DockingControl
rather than the user supplied one.

Conclusion

This code was developed using a text editor and then calling the c# compiler
on a command line. Therefore the look is modelled on the appearance of the VC6
environment (which I have) and not the newer look and feel of docking
controls/windows from VC7 (which I don't have). I think it would be very easy to
build on this code to allow floating controls and multiple docking controls in a
docking bar. If you have any ideas or make any changes to the code then feel
free to contact me as I would be very interested.

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.

Share

About the Author

I am a big fan of .NET and have been working on developing a free user interface library to enhance the very basic controls that come out-of-the-box. Download the free source code project from http://www.dotnetmagic.com. I often carry out bespoke development work for companies, so feel free to email me for a quote on your .NET needs!