Click here to Skip to main content
15,883,883 members
Articles / Desktop Programming / Windows Forms
Article

TabStrips: A TabControl in the Visual Studio 2005 way!

Rate me:
Please Sign up or sign in to vote.
4.82/5 (78 votes)
5 Dec 20063 min read 476.7K   12.5K   252   133
A TabControl in the Visual Studio 2005 style, which supports correct Right-To-Left (RTL) and Left-To-Right (LTR) drawing.

Sample Image - TabStrip.gif

Introduction

Besides all the new features of Visual Studio, there is a distinct TabControl with a new style like no other. The code here tries to build up a control which behaves like the tab pages of VS.NET 2005.

Building a TabControl consists of building two controls: a TabControl itself, which is a container control, but only accepts TabPages as a containing control. This could be done by assigning a Designer class to the TabControl. Now, TabPage is a container control too, but can accept all kinds of controls hosted in it.

The Visual Studio TabControl slightly differs from a normal tab control, because it only shows as much TabPages as fits the width of the control. All the other TabPages are available via a context menu appearing by clicking the glyph icon. Selecting a TabPage from the menu brings it to position 0 of the TabPageCollection, so that it appears as the first TabPage.

Right-To-Left Rendering of Controls

Adding the RTL drawing feature to a control requires additional coding for drawing. The developer should handle the correct drawing behavior when the control sets its RightToLeft property to Yes. The Graphics class has a method to draw strings. In RTL control drawing, it is important to use the below overload with the StringFormat setting its FormatFlags flag to DirectionRightToLeft. Note that since the StringFormat class is not a lightweight class, you should dispose it after using. It's more convenient to use a using block to achieve this:

Image 2

C#
e.Graphics.DrawString(string, Font, Brush, Rectangle, StringFormat);
C#
using (HeavyWeightDisposableObject obj = 
       new HeavyWeightDisposableObject()) 
{
   //Do Operation and leave; will automatically dispose
}
C#
//
// paint method of the control
//

using(StringFormat fmt = new StringFormat())
{
    fmt.FormatFlags |= StringFormatFlags.DirectionRightToLeft;
    g.DrawString("Test String...", this.Font, 
                 SystemBrushes.Control, TextRectangle, fmt);
}

Image 3

Design-Time Integration

For design-time behavior of the TabStrip control, I'm using a sub-class of the ParentControlDesigner class. It is nice to add the design-time verbs (e.g., Add/Remove TabPages) to this class, which makes life for the developer easier.

An additional step here is to remove the properties of the Control class which we do not want to be visible during design-time, by overriding the PreFilterProperties of the designer:

C#
protected override void PreFilterProperties(
          System.Collections.IDictionary properties)
{
   base.PreFilterProperties(properties);

   properties.Remove("DockPadding");
   properties.Remove("DrawGrid");
   properties.Remove("Margin");
}

In a normal TabControl, the user can change the selected tab by clicking on the TabItems during design-time. To do this, we could override the GetHitTest(Point pt) method of the designer, but I don't know why it crashes my VS.NET IDE, so I had to think of another way. That's when tapping on Windows messages came in handy. Just override the WndProc(ref Message msg) method, and listen for the MouseLeftClick message (0x201), and check for a hit-test on TabItems:

C#
protected override void WndProc(ref Message msg)
{
   if (msg.Msg == 0x201)
   {
      Point pt = Control.PointToClient(Cursor.Position);
      FATabStripItem itm = Control.GetTabItemByPoint(pt);
         
      if (itm != null)
      {
         Control.SelectedItem = itm;
         ArrayList selection = new ArrayList();
         selection.Add(itm);
         ISelectionService selectionService = 
           (ISelectionService)GetService(typeof(ISelectionService));
         selectionService.SetSelectedComponents(selection);
      }
   }

   base.WndProc(ref msg);
}

Points of Interest

If you want to use these controls on .NET 1.1, you'll have to change the use of ContextMenuStrip, which is a new control in .NET 2, with the old ContextMenu control. All the painting is done in GDI+, so it should work on Windows 98 or Windows 2000, although it is not tested yet.

For further releases or any suggestions/comments/feedbacks, please leave me a message at my address, or visit my web site.

History

Version 2

  • Bug fix: Problem with the Designer which made controls added to FATabStripItems disappear.
  • Bug fix: Disposing of heavy-weight objects when the control is being disposed (e.g., fonts, image, etc.) (reported by #sne#).
  • Bug fix: Problem with anchoring of controls/usercontrols in a FATabStripItems (reported by #sne#).
  • Added: FATabStripItems can now have an image which will be displayed on menu (thanks to danielku15).
  • Added: A HitTest method which will report which part of the control is clicked by the user.
  • Changes: Refactoring Selecting method of FATabItem.
Version 1
  • Providing base classes, and a TabStrip control with the Visual Studio 2005 theme implemented.
  • Providing a control-designer for TabStrip and TabStripItems.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Software Developer (Senior) Readify
Australia Australia
Working on both Java and .NET Technology, I have developed various enterprise level applications on both platforms. Currently, I am working as a Senior Software Developer at Readify which is a leading company on .NET technology in Australia.

Comments and Discussions

 
QuestionVb.net translation Pin
lorenzrox31-Jan-09 13:09
lorenzrox31-Jan-09 13:09 
GeneralProblem with FlowLayoutPanel and nested controls Pin
KyronSr19-Jun-08 11:15
KyronSr19-Jun-08 11:15 
GeneralRe: Problem with FlowLayoutPanel and nested controls Pin
KyronSr23-Sep-08 13:49
KyronSr23-Sep-08 13:49 
GeneralGood, ... Pin
zolfaghari28-Apr-08 2:03
zolfaghari28-Apr-08 2:03 
QuestionScrollable Panel? PinPopular
micheals19-Apr-08 23:20
micheals19-Apr-08 23:20 
AnswerRe: Scrollable Panel? Pin
Jayke Huempfner4-Sep-11 17:11
Jayke Huempfner4-Sep-11 17:11 
GeneralBug in FATabStripItemCollection Pin
Danielku1512-Mar-08 11:20
Danielku1512-Mar-08 11:20 
Answergood Pin
JeremyChin28-Jan-08 20:39
JeremyChin28-Jan-08 20:39 
I've been searching it so long. Laugh | :laugh:
GeneralNice code ! Pin
BillWoodruff20-Jan-08 21:12
professionalBillWoodruff20-Jan-08 21:12 
QuestionHow to display images in the tabStrip? Pin
Priyank Bolia16-Jan-08 7:04
Priyank Bolia16-Jan-08 7:04 
AnswerRe: How to display images in the tabStrip? Pin
daniel030128-Nov-08 6:14
daniel030128-Nov-08 6:14 
GeneralRe: How to display images in the tabStrip? Pin
Priyank Bolia10-Feb-09 12:05
Priyank Bolia10-Feb-09 12:05 
GeneralNew Tabs to the Right Pin
Snerf5-Jan-08 15:14
Snerf5-Jan-08 15:14 
GeneralRe: New Tabs to the Right Pin
KyronSr19-Jun-08 11:12
KyronSr19-Jun-08 11:12 
GeneralGood control. Possible enhancments Pin
Giorgi Dalakishvili27-Dec-07 6:06
mentorGiorgi Dalakishvili27-Dec-07 6:06 
QuestionVery nice - License ?? Pin
SunilKhatri4-Dec-07 1:57
SunilKhatri4-Dec-07 1:57 
AnswerRe: Very nice - License ?? Pin
h.eskandari2-Jan-08 1:13
h.eskandari2-Jan-08 1:13 
GeneralIssue when try create a component which inherited from MSCTabStrip Pin
nickxiaow20-Nov-07 9:27
nickxiaow20-Nov-07 9:27 
GeneralRe: Issue when try create a component which inherited from MSCTabStrip Pin
Hadi Eskandari20-Nov-07 19:36
professionalHadi Eskandari20-Nov-07 19:36 
GeneralError: The designer loader did not provide a root component but has not indicated why. Pin
nickxiaow20-Nov-07 9:12
nickxiaow20-Nov-07 9:12 
AnswerRe: Error: The designer loader did not provide a root component but has not indicated why. Pin
Hadi Eskandari20-Nov-07 19:29
professionalHadi Eskandari20-Nov-07 19:29 
GeneralRe: Error: The designer loader did not provide a root component but has not indicated why. Pin
Yaghoobi_R28-Nov-08 18:34
Yaghoobi_R28-Nov-08 18:34 
GeneralRe: Error: The designer loader did not provide a root component but has not indicated why. Pin
Hadi Eskandari28-Nov-08 19:19
professionalHadi Eskandari28-Nov-08 19:19 
GeneralTab moveable Pin
dkuttel5-Nov-07 5:40
dkuttel5-Nov-07 5:40 
GeneralSelect a tab by program Pin
alex167828-Sep-07 2:10
alex167828-Sep-07 2:10 

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.