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 what...............
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 support. To Be Displayed.
Class DockingControl: UserControl
{
Private form _form;
Private DockingResize_resize;
Private DockingHandle_handle;
Private borderControl_wrapper;
Public DockingControl (Form Form, Dockstyle DS, Control UserControl)
{
// Remember the Form We are hosted on
_form = form;
// Create The Resizing Bar, Gripper Handle and Border Control
_resize = new DockingResize (DS);
_handle = new DockingHandle (this, DS);
_wrapper = new borderControl (userControl);
// Wrapper SHOULD ALWAYS FILL Remaining Area
_wrapper.dock = dockstyle.fill;
// define our owen initial Docking Position for When We Are Added to
// Host Form
THIS.DOCK = DS;
Controls.addrange (new control [] {_ wrapper, _handle, _resize});
}
public Form HostForm {get {return _form;}}. 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, .
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
Public Override DockStyle Dock
{
Get {return base.dock;
set
{
// o o before docking position is change
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.sizetooorientation (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 Oursf Through Base Class
Base.dock = value;
// CHANGE IN ORIATION 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 to
// Transfer the value tria 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;
}
// repaintur 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.// static variables defining colors for drashing
Private static pen _lightpen =
New Pen (Color.FromknownColor (KNownColor.Controllightlight);
Private static pen _darkpen =
New Pen (color.fromknowncolor (knowncolor.control);
Private static brush _plainbrush = brushes.lightgray;
// Static Properties for Read-Only Access To Drawing Colors
Public static pen lightpen {get {return_lightpen;}}
Public static pen darkpen {get {return_darkpen;}}
Public static brush plainbrush {get {return_plainbrush;}}
Public Static Dockstyle ResizestyleFromControlStyle (DockStyle DS)
{
Switch (DS)
{
Case DockStyle.Left:
Return dockstyle.right;
Case DockStyle.top:
Return DockStyle.bottom;
Case DockStyle.right:
Return DockStyle.Left;
Case DockStyle.Bottom:
Return DockStyle.top;
DEFAULT:
// Should Never Happen!
Throw New ApplicationException ("Invalid DockStyle Argument");
}
}
Public Static DockStyle HandleStyleFromControlStyle (DockStyle DS)
{
Switch (DS)
{
Case DockStyle.Left:
Return DockStyle.top;
Case DockStyle.top:
Return DockStyle.Left;
Case DockStyle.right:
Return DockStyle.top;
Case DockStyle.Bottom:
Return DockStyle.Left;
DEFAULT:
// Should Never Happen!
Throw New ApplicationException ("Invalid DockStyle Argument");
}
}
}
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.// A bar Used to resize the Parent DockingControl
Class DockingResize: UserControl
{
// Class Constants
Private const INT _fixedLength = 4;
// Instance Variables
Private point _pointstart;
PRIVATE POINT _POINTLAST;
Private size_size;
Public DockingResize (DockStyle DS)
{
THIS.DOCK = DockingControl.resizestylefromControlstyle (DS);
this.size = new size (_fixedlength, _fixedlength);
}
Protected Override Void OnMouseDown (MouseEventArgs E)
{
// Remember the mouse position and client size when capture occured
_PointStart = _PointLast = PointToscreen (New Point (E.x, E.Y));
_size = parent.clientsize;
// ensure delegates Are Called
Base.onmousedown (e);
}
Protected Override Void OnmouseMove (MouseEventArgs E)
{
// Cursor Depends on if We a Vertical or Horizontal Resize
IF ((this.dock == DockStyle.top) ||
(this.dock == DockStyle.bottom)))))
THIS.CURSOR = CURSORS.HSPLIT;
Else
THIS.CURSOR = CURSORS.VSPLIT;
// can Only Resize IF We Have Captured The Mouse
this.capture)
{
// Find the new mouse position
Point Point = PointToscreen (New Point (E.x, E.Y);
// HAVE WE ACTUALLY MOVED THE MOUSE?
IF (Point! = _PointLast)
{
// update the last processed mouse position_pointlast = POINT
// Find Delta from Original Position
INT XDELTA = _PointLast.x - _PointStart.x;
Int Ydelta = _PointLast.y - _PointStart.y;
// Resizing from bottom or right of form means inverse
//movements
IF ((this.dock == DockStyle.top) ||
(this.dock == DockStyle.Left))
{
XDELTA = -xdelta;
YDELTA = -ydelta;
}
// new size is original size plus delta
IF ((this.dock == DockStyle.top) ||
(this.dock == DockStyle.bottom)))))
Parent.clientsize = new size (_size.width,
_size.height ydelta);
Else
Parent.clientsize = new size (_size.width xdelta,
_size.height);
// force a repaint of pent sowe can see change AppeaRance
Parent.refresh ();
}
}
// ensure delegates Are Called
Base.onmousemove (e);
}
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.
Protected Override Void OnPaint (Painteventargs PE)
{
// Create Objects Used for Drawing
Point [] ptlight = new point [2];
Point [] ptdark = new point [2];
Rectangle RectMiddle = New Rectangle ();
// Drawing is Relative to Client Area
Size SizeClient = this.clientsize;
// Painting Depends on Orientation
IF ((this.dock == DockStyle.top) ||
(this.dock == DockStyle.bottom)))))
{
// Draw as a horizontal bar
PTDARK [1] .y = ptdark [0] .y = sizeclient.height - 1;
PTLight [1] .x = ptdark [1] .x = sizeclient.width;
RectMiddle.width = SIZECLIENT.WIDTH;
RectMiddle.height = SizeClient.Height - 2;
RectMiddle.x = 0;
RectMiddle.y = 1;}
Else IF ((this.dock == DockStyle.Left) ||
(this.dock == DockStyle.right)))
{
// Draw as a Vertical Bar
PTDARK [1] .x = ptdark [0] .x = SizeClient.width - 1;
PTLight [1] .y = ptdark [1] .y = sizeclient.height;
RectMiddle.Width = SizeClient.width - 2;
RectMiddle.height = sizeclient.height;
RectMiddle.x = 1;
RectMiddle.y = 0;
}
// use colors defined by Docking Control That Is Using US
Pe.graphics.drawline (DockingControl.lightpen, Ptlight [0], PTLight [1]);
Pe.graphics.Drawline (DockingControl.darkpen, Ptdark [0], PTDARK [1]);
Pe.graphics.FillRectangle (DockingControl.Plainbrush, RectMiddle);
// ensure delegates Are Called
Base.onpaint (PE);
}
}
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 Needled for Drawing and Allowing The User To Grab It. The Routine Sizetooorientation Performs this Decision.
Class DockingHandle: UserControl
{
// Class Constants
Private const Int _fixedlength = 12;
Private const INT _HOTLENGTH = 20;
Private const INT _OFFSET = 3;
Private const Int _inset = 3;
// Instance Variables
Private DockingControl_dockingControl = NULL;
Public DockingHandle (DockingControl DockingControl, DockStyle DS)
{
_dockingControl = DockingControl;
THIS.DOCK = DockingControl.HandleStylefromControlstyle (DS);
SiZETOORIENTATION (DS);
}
Public Void Sizetooorientation (DockStyle DS)
{
IF ((DS == DockStyle.top) || (DS == DockStyle.Bottom))
This.ClientSize = new size (_fixedlength, 0);
Else
This.ClientSize = New size (0, _fixedlength);
}
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.
Protected Override Void OnmouseMove (MouseEventArgs E)
{
// can only move the dockingControl is we have captured the
// mouse Otherwise the Mouse Is Not Currently Pressed
this.capture)
{
// Must Have Reference to Parent Object
IF (NULL! = _DOCKINGCONTROL)
{
THIS.CURSOR = CURSORS.HAND;
// Convert from Client Point of DockingHandle To Client of DockingHandle
// DockingControl
Point ScreenPoint = PointToscreen (New Point (E.x, E.Y));
Point ParentPoint =
_dockingControl.hostform.PointToclient (screenpoint);
// Find The Client Rectangle of The Form
Size Parentsize = _dockingControl.hostform.clientsize;
// new docking position is defaulted to current Style
DockStyle DS = _dockingControl.dock;
// Find New Docking Position
IF (ParentPoint.x <_Hotlength)
{
DS = DOCKSTYLE.LEFT;
}
Else if (ParentPoint.Y <_Hotlength)
{
DS = DOCKSTYLE.TOP;
}
Else if (PARENTPOINT.X> = (Parentsize.width - _Hotlength))
{
DS = DOCKSTYLE.Right;}
Else if (PARENTPOINT.Y> = (Parentsize.height - _HOTLENGTH))
{
DS = DOCKSTYLE.BOTTOM;
}
// Update Docking Position of DockingControl We Are Part of
IF (_DockingControl.dock! = DS)
_dockingControl.dock = DS;
}
}
Else
THIS.CURSOR = CURSORS.DEFAULT;
// ensure delegates Are Called
Base.onmousemove (e);
}
Lastly The Control Needs to Draw The Two Lines That Decorate The Control Area.
Protected Override Void OnPaint (Painteventargs PE)
{
Size SizeClient = this.clientsize;
Point [] ptlight = new point [4];
Point [] ptdark = new point [4];
// depends on orientation
IF (_DockingControl.dock == DockStyle.top) ||
(_DOCKINGCONTROL.DOCK == DockStyle.Bottom))
{
INT ottom = sizeclient.height - _inset - 1;
INT IRIGHT = _OFFSET 2;
PTLight [3] .x = ptlight [2] .x = ptlight [0] .x = _offset
PTLight [2] .y = ptlight [1] .y = ptlight [0] .y = _inset
PTLight [1] .x = _offset 1;
PTLight [3] .y = ibottom;
PTDARK [2] .x = ptdark [1] .x = ptdark [0] .x = Iright;
PTDARK [3] .y = ptdark [2] .y = ptdark [1] .y = ibottom
PTDARK [0] .y = _inset
PTDARK [3] .x = IRIGHT - 1;
}
Else
{
INT IBOTTOM = _Offset 2;
INT IRIGHT = SIZECLIENT.WIDTH - _ET - 1;
PTLight [3] .x = ptlight [2] .x = ptlight [0] .x = _inset
PTLight [1] .y = ptlight [2] .y = ptlight [0] .y = _offset
PTLight [1] .x = iright;
PTLight [3] .y = _offset 1;
PTDARK [2] .x = ptdark [1] .x = ptdark [0] .x = Iright;
PTDARK [3] .y = ptdark [2] .y = ptdark [1] .y = ibottom
PTDARK [0] .y = _offset;
PTDARK [3] .x = _inset
}
Pen Lightpen = DockingControl.lightpen;
Pen Darkpen = DockingControl.darkpen; pe.graphics.drawline (lightpen, ptlight [0], ptlight [1]);
Pe.graphics.drawline (Lightpen, Ptlight [2], PTLight [3]);
Pe.graphics.drawline (Darkpen, Ptdark [0], PTDARK [1]);
Pe.graphics.drawline (Darkpen, Ptdark [2], PTDARK [3]);
// shift coordinates to draw section grab bar
IF (_DockingControl.dock == DockStyle.top) ||
(_DOCKINGCONTROL.DOCK == DockStyle.Bottom))
{
For (int i = 0; i <4; i )
{
PTLight [i] .x = 4;
PTDARK [i] .x = 4;
}
}
Else
{
For (int i = 0; i <4; i )
{
PTLight [i] .y = 4;
PTDARK [I] .y = 4;
}
}
Pe.graphics.drawline (Lightpen, Ptlight [0], PTLight [1]);
Pe.graphics.drawline (Lightpen, Ptlight [2], PTLight [3]);
Pe.graphics.drawline (Darkpen, Ptdark [0], PTDARK [1]);
Pe.graphics.drawline (Darkpen, Ptdark [2], PTDARK [3]);
// ensure delegates Are Called
Base.onpaint (PE);
}
}
Shrink the user support
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 did not 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.
// Position The Provided Control Inside A Border To Give A Portrait Picture
// Effect
Class BorderControl: UserControl
{
// Instance Variables
Private int _BorderWidth = 3;
Private int _BorderdouBleWidth = 6;
Private control _UserControl = NULL; public borderControl (Control UserControl)
{
_userControl = UserControl;
Controls.add (_UserControl);
}
// must reposition the Embedded Control WHENEVER WE CHANGE SIZE
Protected Override Void OnResize (Eventargs E)
{
// Can Be Called Before Instance Constructor
IF (NULL! = _UserControl)
{
Size SizeClient = this.size;
//Move the user control to enforce the border area we want
_UserControl.Location = new point (_borderwidth, _borderwidth);
_userControl.size = new size (SizeClient.width - _BorderDoubleWidth,
SizeClient.height - _BorderDoubleWidth;
}
// ensure delegates Are Called
Base.onResize (e);
}
}
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 do not 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 Intested.
About Phil Wright
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!
Download Demo Project - 8 KB
