A Visual Studio 2005-like Interface

• Download the VB.NET 2005 demo project - 864 KB

Overview

It's now been awhile since programs like Opera, Firefox and other software introduced MDI tabbed interfaces. Unluckily, there are not too many free components that allow .NET developers to create such interfaces. I was searching the internet for a long time before discovering the DockPanel Suite, a wonderful and fully customizable component from Weifen Luo. This component is available on Sourceforge, here.

Introduction

This article shows how the DockPanel component can be customized, implementing an Extender class. The attached example creates a Visual Studio 2005 like interface against version 1.0 of the DockPanel.

Copyright

Weifen Luo is the owner of the copyright for the DockPanel Suite, which includes the Extender class, the object of this article.

Background

This article is based around the DockPanel Suite library and it requires at least a basic knowledge of this. Please refer to the References paragraph to find more information about it. A good knowledge of the System.Drawing classes and functions is also required.

The Extender Class

DockPanel accepts customizations through five classes:

• AutoHideTab represents a single tab used when the content is in the autohide state.
• AutoHideStrip draws tabstrips and tabs when the content is in the autohide state.
• DockPaneCaption draws the caption pane when the contents are tool windows.
• DockPaneTab represent a single tab used when the content is a document window or a tool window.
• DockPaneStrip draws tabstrips and tabs when the content is a document window or a tool window.

For convenience, these classes are enclosed in an Extender class. The following sections describe the component parts and the relative modules you can customize.

AutoHideStrip and AutoHideTab

The autohide strips can appear at the four borders of the main form and they are activated by the MouseOver event. The tabstrip will be visible only if at least one content is in the autohide state. When the tabs are docked to the left or to the right, the resulting tabs are rotated 90 degrees.

Following is a screenshot of a form docked to the top:

Here is another example of a form docked to the bottom:

The drawing of tabstrips and tabs is done by the class AutoHideStripFromBase. The painting methods are mainly the following:

• OnPaint handles the OnPaint event of the control.
• DrawTabStrip draws the tabstrips with a right orientation and all the contained tabs.
• DrawTab draws a single tab.

DockPaneCaption

DockPaneCaption represents the form border when the form is docked and it normally contains a title, a button to close the window and a button to set the window to the autohide state. The Visual Studio 2005 like interface also contains a button to manipulate the window state through a context menu.

The following is a screenshot of DockPaneCaption:

The drawing of the caption is done by the class DockPaneCaptionFromBase. The painting methods are mainly the following:

• OnPaint handles the OnPaint event of the control.
• DrawCaption draws the background and the caption text.

DockPaneStrip and DockPaneTab

DockPaneStrip represents the tab area shown when the content is a tool window or a document. There are many differences between these two regarding the tab shape and other behaviour. An example is hiding the tabstrip in the case of a single content. The drawing of tabstrips and tabs is done by the class DockPaneStripFromBase. The following examples will clarify these differences.

Example of a tabstrip that shows document tabs:

Example of a tabstrip that shows document tabs with an icon and the overflow symbol:

Example of a tabstrip that shows tool window tabs:

The painting methods for the document tabstrip are the following:

• OnPaint handles the OnPaint event of the control.
• DrawTabStrip_Document draws the background.
• DrawTab_Document draws the shape, icon and text.

The painting methods for the tool window tabstrip are the following:

• OnPaint handles the OnPaint event of the control.
• DrawTabStrip_ToolWindow draws the background.
• DrawTab_ToolWindow draws the shape, icon, and text.

Using the Code

To apply the Extender to an instance of DockPanel, insert the following code into the Form_Load event of your form, replacing the name of the control with yours.

Extender.SetSchema(DockPanel1, Extender.Schema.FromBase)

Final Notes

I hope that you find this article useful. If you find this article stupid, annoying or incorrect, express this fact by rating the article as you see fit. In the end, you're very welcome at any moment to freely contribute to this project by suggesting improvements or by submitting code or other materials.

Credits

Thanks to Weifen Luo for providing the community with the DockPanel component. If you like this component, you may want to make a donation to Weifen Luo here.

References

• DockManager Control: Weifen Luo's original article here on The Code Project
• DockPanel Suite on Sourceforge: download the latest version
• DockPanel Suite Forum on Sourceforge:where people post questions about the DockPanel Suite.
• Painting your own tabs: article on how to paint tabs
• Tabbed document interface from Wikipedia, the free encyclopedia
• Add Custom Properties to a PropertyGrid: my article on an extended version of the PropertyGrid used in this project
• The Netron Project: a free graphics library that includes a modified version of DockPanel

History

• 3^rd June 2006: first submission
• 20^th July 2006: bug fix (the MdiParent property doesn't need to be set)
• 20^nd January 2007: updated download