Background

I recently had the need to add a few panels to a program that I have been working on. The panels did not need to be shown all the time and I didn't want to spawn a new form everytime I needed to see the extra panel. Additionally, I wanted the new panels to dock to the side of the main form so they would not cover the main content. My program needed three seperate areas, a debug window, options window, and of course the main window as shown in Figure 2.


Figure 1

After quite a bit of experimenting I decided to show/hide forms that were loaded with the main form. Another explored option was to use GDI+ to make graphic panels appear and disappear but in the end they were too complicated and I decided to go with the quicker and simplier approach. After getting several requests for code on this particular project I decided to create my own tutorial on how to make dockable pop-up forms in VB.NET.


Firgure 2

Structure

The project consists of three forms:
frmMain.vb - Main form for the project
frmDebug.vb - Add on pop-up
frmOptions.vb - Add on pop-up

The number of forms used can be modified. I started with just the debug form but later added functionality for an options form. The work of creating, showing, and docking the forms are split amoung the three forms.

frmDebug

If you have not already done so, the first thing to do is to add a new form to your project, in my case it is the debug form. The forms apprearence has nothing special about it except in my case I decided to remove the ControlBox from the title bar and set ShowInTaskbar to false.

In the frmDebug form create three global variables:


The _myParent form represents a link back to the main form. This is need so that if the debug form is moved and the debug form is docked with the main form, the main form will also move.

_bFormLock holds a boolean value showing if the current form is docked.

ptFormLocation is a drawing point used for showing the location of the forms.

Next create two properties:


This of course provides a link between forms.

Add the LocationChanged function:


The LocationChanged function handles the task of moving the parent form (frmMain) if the child form (frmDebug) is moved and the two are docked. In this case you will notice that the x location is the width of the child from minus the width of the parent form. This puts the x location the width of the parent form to the left of the child form. The y location remains the same so the two forms will be even on the y-axis.

frmOptions

The options form is identical to the debug for with one exception, the LocationChanged function positions the form to the bottom of the child form. Notice that the function is similar except the x and y points have been changed.



frmDebug

The main form needs four buttons:
btnDebug - used to show the debug form
btnDebugDocking - dock the debug form
btnOptions - used to show the options form
btnOptionsDocking - dock the options form

Of course the main form is where everything is tied together. Add references for the debug and options form:


In my case I want the debug form to be shown as the program starts so I added an OnLoad function:


The function LocationChanged, moves both child forms if the parent is moved.

The function is similar to the code in the child forms except the minus is replaced by a plus function.

Two seperate event handlers are needed for each form. The creation of the debug child form:

This handles the start location of the form and part of the docking buttons operation.

Next is the btnDebugDocking.Click event. This sets the property in the debug child form bFormLock. If true then the form will dock. If false the child from can be moved freely of its parent.


The code for the options form is once again very similar to the debug form. The only difference is in the x and y-axis point needed to place the options form. Instead of located to the right, the form is located to the bottom.

Creation:


btnOptionsDocking.Click:


Conclusion

I have found this code to be quite useful over several projects. In the future I may work on a GDI+ version of this project but that may be a ways down the road as this implemention works so well. Attached is the project that holds all the files needed for this project. Docking_Forms is written is Microsoft Visual Basic.NET 2003.

Ggretat work and nice implementation