Click here to Skip to main content
15,559,669 members
Articles / Desktop Programming / Windows Forms
Posted 12 May 2008


53 bookmarked

Easy Tabbed Mdi Interface Using the ToolStrip

Rate me:
Please Sign up or sign in to vote.
2.27/5 (7 votes)
12 May 2008CPOL2 min read
Just drop an MdiTabStrip on your Mdi container form, and you have a Tabbed Mdi interface

Download Source: Here

Image 1


I'm a big fan of the "It's only got one button, and we've already pressed it for you" type of UI development. This control (I hope) follows that maxim. Just drop it on an Mdi Container form, and it will track all open windows, ensure they are maximized, and show the active window.


My customers keep a lot of windows open at once. The Windows menu, which tracks Mdi child activity, works fine but is non-intuitive and far away from the action. I wanted a Tabbed Mdi interface that had the ability to click a portion of the tab to close the window, ala IE 7.

The ToolStrip turned out to be the perfect class to specialize. The ToolStripSplitButton is the ideal button to inherit from for our closable tab, because all we need to do is overdraw the little drop-down area and put a close "x" there, then trap some events.

Using the code

Just drop an MdiTabStrip control on your Mdi Container form (an Mdi Container form is one whose "IsMdiContainer" property is set to true).

If you want to inherit from MdiTabStrip, you can create your own MdiTabStripButton instances. Just override this method:

/// <span class="code-SummaryComment"><summary></span>
/// Creates and returns a new MdiTabStripButton. You can override
/// this method to return a derived version of MdiTabStripButton if
/// you wish.
/// <span class="code-SummaryComment"></summary></span>
/// <span class="code-SummaryComment"><param name="f"></param></span>
/// <span class="code-SummaryComment"><returns></returns></span>
protected virtual MdiTabStripButton CreateMdiButton(Form f)
    // return new MyCustomMdiTabStripButton(f);
    return new MdiTabStripButton(f);

Then you would inherit from MdiTabStripButton, and maybe override the OnPaint() or DoDrawBorder() methods:

/// <span class="code-SummaryComment"><summary></span>
/// Adds a gradient line to the top of the tab button. You can override
/// this to do whatever you would like.
/// <span class="code-SummaryComment"></summary></span>
/// <span class="code-SummaryComment"><param name="g"></param></span>
protected virtual void DoDrawBorder(Graphics g)
    g.SmoothingMode = SmoothingMode.Default;
    using (Pen p = new Pen(BorderColor, 2F))
        p.Brush = new LinearGradientBrush(
            new Point(0, 0), new Point(Width / 2 + 2, 2),
            BackColor, BorderColor);
        g.DrawLine(p, 0, 1, Width / 2 + 2, 1);
        p.Brush = new LinearGradientBrush(
            new Point(Width / 2 - 2, 2), new Point(Width, 0),
            BorderColor, BackColor);
        g.DrawLine(p, Width / 2 - 2, 1, Width, 1);

There are several properties you can set on the MdiTabStrip. Either look in the commented code or drop one on a form and check in the Property Browser.

Each property has a corresponding static Default property, for example ActiveForeColor would have a static DefaultActiveForeColor property. This is a good design pattern to follow when developing controls to allow developers to more easily customize your controls in one place to suit their environment.

There are two Form classes for Mdi child forms that you can inherit from in the Cx.Windows.Forms namespace. The first one, MdiChildForm, simply ensures that it is maximized if it's the first one added to the Mdi Parent forms MdiChildren collection. It also overrides CreateParams so that the normal close "x" on the form is inaccessible (since it will now be on the tab). Not strictly necessary, but maybe more professional looking.

The second form, NoResizeChildForm, gets rid of the Control Box so that the minimize and maximize buttons go away. This is good to use if you want to force users to keep child windows maximized.


Initial Release, 12 May 2008


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

Written By
Web Developer
United States United States
Bruce Pierson is the CTO of Connexa Softools, Inc. (, a software company specializing in product configuration and build-to-order manufacturing tools.

Comments and Discussions

GeneralEasy Tabbed Mdi Interface Using the ToolStrip Pin
tmp12030-Dec-13 22:36
tmp12030-Dec-13 22:36 
QuestionElegant Solution Pin
AAMP15-Mar-12 6:58
AAMP15-Mar-12 6:58 
QuestionChanging the ToolStrip to be like Visual Studio 2010 Pin
salimdz200210-Mar-11 1:05
salimdz200210-Mar-11 1:05 
GeneralMy vote of 5 Pin
dracer212-Jan-11 12:53
dracer212-Jan-11 12:53 
QuestionHow can you hide the Control menu of the Mdi child Pin
Mercede12-Jul-08 1:09
Mercede12-Jul-08 1:09 
AnswerRe: How can you hide the Control menu of the Mdi child Pin
Lee.23-Oct-09 11:54
Lee.23-Oct-09 11:54 
AnswerRe: How can you hide the Control menu of the Mdi child Pin
AAMP15-Mar-12 7:04
AAMP15-Mar-12 7:04 
GeneralNot enough article Pin
#realJSOP12-May-08 7:43
mva#realJSOP12-May-08 7: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.