Create a Tabbed MDI using child forms

If you are developing applications for Windows it is almost certain that you have incorporated the Multiple Document Interface (MDI) at some point. This is where you have a parent form that acts as the host for all forms within the application, minus a few exceptions. I know there are debates about whether MDI is an effective approach, but it doesn’t change the fact that MDI is very heavily used. I have found that the Tabbed Document Interface which is essentially an MDI that implements tab navigation between open items is pretty popular. As a matter of fact, this same approach used in Visual Studio and I like it.

You can incorporate the tabbed feature to your application very easily using the DockingManager. The DockingManager hosts containers which can hold either a DocumentPane or DockPanel. The DocumentPane is a tabbed object that cannot exist outside the container in which it resides. This would be similar to the code windows in Visual Studio. A DockPanel on the other hand is more like the tool windows in Visual Studio which can be docked in available containers or float independently off the form.

One of the features of the DockingManager that is very useful is to allow you to dock child forms for an MDI application as tabbed documents. You might be surprised out simple it is to accomplish this task. To allow a form for be used in the DockingManager you need to prepare the parent form and the DockingManager.

Create a form called ParentForm
Set the “IsMDIContainer” property on ParentForm equal to True
Add a DockingManager from the Toolbox to ParentForm
Set the “AutoDetectMDIChildForms” property of the DockingManager to True

You now have everything you need to incorporate the tabbed interface in your application. For demonstration purposes, I recommend you also set the “Dock” property of the DockingManager to “Fill”, this is not required, but it makes it allows you to see what you are getting.

As you can see my ParentForm Load routine is not doing anything special, just creating two instances of ChildFormOne and a single instance of ChildFormTwo.

The result of the load routine is below. As you can see that all three forms are now displayed as tabs and we can drag them to reorder if desired.

Additionally, we can close the forms using the close button to the right and even see a list of open forms by clicking the arrow to the right.