Click here to Skip to main content
15,867,453 members
Articles / Programming Languages / Visual Basic
Article

A Visual Studio 2005-like Interface

Rate me:
Please Sign up or sign in to vote.
4.89/5 (167 votes)
22 Jan 2007CPOL4 min read 1.1M   11K   503   252
Apply a theme that resembles Visual Studio 2005 to the DockPanel Suite, using an Extender class.
Sample Image - DockPanelSkin.png

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:

Image 2

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

Image 3

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:

Image 4

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:

Image 5

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

Image 6

Example of a tabstrip that shows tool window tabs:

Image 7

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.

VB
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

History

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Italy Italy
I am 40 years old and I've been working with C++, Visual Basic .NET, C# and ASP.NET. I have a large experience in Industrial Automation solutions, but I've worked also as Web developer and DBA. I like to share knowledge and projects with other people.

Comments and Discussions

 
GeneralRe: Found solution ...and it works! Pin
siegi4412-Jul-06 19:06
siegi4412-Jul-06 19:06 
GeneralRe: Found solution ...and it works! Pin
Danilo Corallo15-Jul-06 0:51
Danilo Corallo15-Jul-06 0:51 
GeneralRe: Found solution ... Pin
David Kimball6-Oct-06 12:05
David Kimball6-Oct-06 12:05 
GeneralRe: Found solution ... Pin
Danilo Corallo6-Oct-06 12:39
Danilo Corallo6-Oct-06 12:39 
GeneralRe: Found solution ... Pin
David Kimball6-Oct-06 14:10
David Kimball6-Oct-06 14:10 
GeneralRe: Found solution ... Pin
David Kimball6-Oct-06 12:43
David Kimball6-Oct-06 12:43 
GeneralRe: Found solution ... Pin
Greg Cadmes23-Aug-06 8:39
Greg Cadmes23-Aug-06 8:39 
GeneralA tip for VS2005-like Interface Pin
toliscarpenter8-Jul-06 10:19
toliscarpenter8-Jul-06 10:19 
NewsRe: A tip for VS2005-like Interface Pin
Danilo Corallo10-Jul-06 21:59
Danilo Corallo10-Jul-06 21:59 
NewsRe: Source code updated Pin
Danilo Corallo20-Jul-06 2:22
Danilo Corallo20-Jul-06 2:22 
GeneralError Message when Un-Docked Pin
CornellDev27-Jun-06 10:25
CornellDev27-Jun-06 10:25 
AnswerError report.. Pin
Danilo Corallo6-Jul-06 5:07
Danilo Corallo6-Jul-06 5:07 
GeneralSuggestions Pin
Andrey Gliznetsov26-Jun-06 4:10
Andrey Gliznetsov26-Jun-06 4:10 
QuestionChange backcolor for autohide button Pin
kaGyamfi25-Jun-06 23:14
kaGyamfi25-Jun-06 23:14 
AnswerRe: Change backcolor for autohide button Pin
kaGyamfi28-Jun-06 6:50
kaGyamfi28-Jun-06 6:50 
NewsRe: Change backcolor for autohide button Pin
Danilo Corallo6-Jul-06 5:28
Danilo Corallo6-Jul-06 5:28 
AnswerRe: Change backcolor for autohide button Pin
kaGyamfi7-Jul-06 2:40
kaGyamfi7-Jul-06 2:40 
AnswerRe: Change backcolor for autohide button Pin
Danilo Corallo10-Jul-06 22:03
Danilo Corallo10-Jul-06 22:03 
GeneralRe: Change backcolor for autohide button Pin
micmit_syd25-Feb-07 15:08
micmit_syd25-Feb-07 15:08 
AnswerRe: Change backcolor for autohide button Pin
kaGyamfi26-Feb-07 23:47
kaGyamfi26-Feb-07 23:47 
Generalresource helper error Pin
Mr_Mo24-Jun-06 10:53
Mr_Mo24-Jun-06 10:53 
AnswerRe: resource helper error [modified] Pin
kaGyamfi25-Jun-06 23:24
kaGyamfi25-Jun-06 23:24 
GeneralRe: resource helper error Pin
Mr_Mo26-Jun-06 11:12
Mr_Mo26-Jun-06 11:12 
GeneralDock panel control instead of forms Pin
igor-l21-Jun-06 12:30
igor-l21-Jun-06 12:30 
AnswerRe: Dock panel control instead of forms Pin
Danilo Corallo22-Jun-06 0:43
Danilo Corallo22-Jun-06 0:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.