Click here to Skip to main content
15,867,308 members
Articles / Programming Languages / C#
Article

Magic TabControl - VS.NET Style

Rate me:
Please Sign up or sign in to vote.
4.86/5 (93 votes)
29 Sep 20024 min read 620.8K   22.7K   278   104
An article on tab controls

Sample Image - MagicTabControl.gif

Why another TabControl?

The .NET Framework contains a wide range of user interface controls, but they offer only a basic look and feel. Today's user expects a richer experience that you just cannot build with the out-of-the-box controls. The Magic Library (of which this TabControl is a major part) aims to solve this by providing a set of user interface elements that add the sophistication expected from modern Windows applications.

Downloads

The first download TabControl Sample contains a Form with a TabControl instance that allows the various properties of the TabControl to be experimented with. The source code for the actual control is inside the separate second download. At nearly 1MB in size, I thought people would prefer to download the sample before deciding if they want to install the entire source code project!

Class Crownwood.Magic.TabControl

The TabControl is used to manage a collection of TabPage instances which themselves are used to describe an individual page. Only a single page can be displayed at any time and a row of tabs are shown to allow the user to select between the available pages.

Creating tab pages in Visual Studio .NET

You can use the designer to modify a TabControl instance along with its TabPage instances. First you will need to add the control to the toolbox by right-clicking the toolbox window and selecting the customize option. Navigate to the appropriate directory and select the Magic Library DLL. The toolbox will now list the extra controls that are exposed by the library including the TabControl. Drag and drop a new instance onto your Form and select the TabPages property.

This will cause a dialog to appear that allows the creation and removal of pages to the control instance. It also allows you to modify the properties for each page added. Dismiss this dialog and you can now click on the control tabs in order to select the page you want to configure. As the TabPage class is derived from the Panel class you can now drag and drop other controls onto the page as desired. The designer will automatically generate the code needed to cause this configuration to be persisted as code in your Form.

The TabPages Collection

The TabControl exposes a property called TabPages that allows the developer to add, remove and modify pages displayed by the control. Use the standard methods to modify this collection as you would with any of the framework collections.

Here is an example that shows the collection being manipulated: -

C#
Crownwood.Magic.Controls.TabControl tab =
       new Crownwood.Magic.Controls.TabControl();

Crownwood.Magic.Controls.TabPage tabPage1 =
          new Crownwood.Magic.Controls.TabPage();
          
Crownwood.Magic.Controls.TabPage tabPage2 =
          new Crownwood.Magic.Controls.TabPage();

// Add a range of pages to the collection
tab.TabPages.AddRange(new TabPage[] pages{
                            tabPage1, tabPage2});

// Remove all the contents
tab.TabPages.Clear();

// Add a single entry
tab.TabPages.Add(tabPage1);

// Insert a single entry at a given position
tab.TabPages.Insert(0, tabPage2);

// Use index accessor for retrieving a page
// reference
Console.WriteLine("TabPages[0] name = {0}",
                           tab.TabPages[0].Text);

// Test if the collection contains an entry
Console.WriteLine("Contains tabPage1 = {0}",
                tab.TabPages.Contains(tabPage1));

// Gain access to a Page by its Title
Console.WriteLine("Contains a named page? {0}",
                  tab.TabPages["Page1"] != null);

// Remove by object reference
tab.TabPages.Remove(tabPage1);

// Remove by index
tab.TabPages.RemoveAt(0);   

Appearance

The first property you should modify is the Appearance which, as the name suggests, is used to define the appearance of the control. When the value of this property is changed it will automatically alter the values of other properties to the defaults for the defined appearance. Therefore this is the first property to be set otherwise previous changes to other properties will be overwritten once this is set.

The three possible values for the property are VisualAppearance.MultiDocument, VisualAppearance.MultiForm and VisualAppearance.MultiBox. The first of these will place the page tabs at the top of the control and show both arrow and close buttons. An example use of this would be to control which of a group of documents is displayed. For example, use this appearance to achieve the same effect as the Visual Studio .NET control that contains the open documents.

The second appearance VisualAppearance.MultiForm places the page tabs at the bottom of the control and does not show any buttons. Instead all the tabs are sized to fit within whatever width the control is defined as. Use this appearance to mimic the style of tab control seen in Visual Studio .NET inside docking windows.

Use the third appearance VisualAppearance.MultiBox to create the high contrast appearance you get when editing an HTML document in Visual Studio .NET, where the document has two options at the bottom of the window.

Once the appearance has been set the developer can still modify the other properties to alter the exact look and feel wanted. For example, the PositionTop property could be used to shift the default position of the tabs for the MultiForm appearance from the bottom of the control to the top. Use the supplied sample project to experiment and achieve the look required.

Notifications

There are several possible events that can be generated by the TabControl but only two are of interest to most developers. These are the ClosePressed event that gets fired when the user presses the close button, and SelectionChanged which notifies a change in the current selection.

To see how to hook into these events see the following code: -

C#
public void SomeMethod()
{
   Crownwood.Magic.Controls.TabControl tab = 
       new Crownwood.Magic.Controls.TabControl();

   tab.ClosePressed += new EventHandler(
                                 OnClosePressed);
   tab.SelectionChanged += new EventHandler(
                             OnSelectionChanged);

...
}

protected void OnClosePressed(object sender,
                                     EventArgs e)
{
   Console.WriteLine("OnClosePressed");
}

protected void OnSelectionChanged(object sender,
                                     EventArgs e)
{
   Crownwood.Magic.Controls.TabControl tab = 
     (Crownwood.Magic.Controls.TabControl)sender;
  
   Console.WriteLine("New selection = {0}",
                              tab.SelectedIndex);
}

Extra Features

Although you can use the control to achieve the same look and feel as the Visual Studio .NET TabControl, it also has a couple of extra goodies. You can use the Multiline property to get a multi lines display of tabs which you will not see in the VS.NET version. Another interesting feature is the HideTabsMode property. You can use this to decide when the tabs area is made visible/invisible. For example, you can have the tabs hidden unless the mouse is hovering over the control. Check out the sample to play around with this and the other available options.

Revision History

30 Sept 2002 - Initial Revision

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
Web Developer
United Kingdom United Kingdom
I am a big fan of .NET and have been working on developing a free user interface library to enhance the very basic controls that come out-of-the-box. Download the free source code project from http://www.dotnetmagic.com. I often carry out bespoke development work for companies, so feel free to email me for a quote on your .NET needs!



Comments and Discussions

 
Generalpaint method Pin
ergunozyurt29-Dec-03 6:20
ergunozyurt29-Dec-03 6:20 
QuestionHow to use TabbedGroups Pin
dev_kh16-Dec-03 4:47
dev_kh16-Dec-03 4:47 
GeneralMaking a tabPage focused from code Pin
DaffyDuck1-Dec-03 2:41
DaffyDuck1-Dec-03 2:41 
GeneralRe: Making a tabPage focused from code Pin
Member 72867017-Dec-03 4:53
Member 72867017-Dec-03 4:53 
GeneralRe: Making a tabPage focused from code Pin
dotnetgirl21-Jan-04 2:18
dotnetgirl21-Jan-04 2:18 
QuestionNo longer free?? Pin
GeneD29-Nov-03 17:02
GeneD29-Nov-03 17:02 
AnswerRe: No longer free?? Pin
partyganger30-Nov-03 5:49
partyganger30-Nov-03 5:49 
GeneralRe: No longer free?? Pin
mdissel6-Jan-04 23:28
mdissel6-Jan-04 23:28 
GeneralRe: No longer free?? Pin
Laurent Lequenne16-Jan-04 3:39
sussLaurent Lequenne16-Jan-04 3:39 
GeneralRe: No longer free?? Pin
Drew Noakes6-Mar-04 6:03
Drew Noakes6-Mar-04 6:03 
GeneralRe: No longer free?? Pin
chito16-Aug-04 14:20
chito16-Aug-04 14:20 
QuestionNeed a black tab control ? Pin
Barr6-Nov-03 5:52
Barr6-Nov-03 5:52 
GeneralMixing Vertical and Horizontal Tab pages Pin
Member 6003071-Oct-03 3:50
Member 6003071-Oct-03 3:50 
GeneralRe: Mixing Vertical and Horizontal Tab pages Pin
Phil Wright1-Oct-03 3:56
Phil Wright1-Oct-03 3:56 
Generaltreeview not showing images if contained into Magic tabcontrol Pin
janardan1321-Sep-03 20:59
janardan1321-Sep-03 20:59 
Generaltabcontrol background color Pin
Renie20-Aug-03 1:20
Renie20-Aug-03 1:20 
GeneralTab Control not showed up Pin
Jack Hui10-Jul-03 20:46
Jack Hui10-Jul-03 20:46 
GeneralRe: Tab Control not showed up Pin
Jack Hui10-Jul-03 22:33
Jack Hui10-Jul-03 22:33 
GeneralTabGroups seem to be most problematic with the null reference error Pin
Matt Haverly19-May-03 15:05
Matt Haverly19-May-03 15:05 
GeneralOpening certain forms is making the tab-bar dissappear Pin
Matt Haverly19-May-03 14:59
Matt Haverly19-May-03 14:59 
QuestionHow to make a tab disabled and not accessible Pin
peterpanfr17-May-03 23:38
peterpanfr17-May-03 23:38 
AnswerRe: How to make a tab disabled and not accessible Pin
Phil Wright18-May-03 0:22
Phil Wright18-May-03 0:22 
GeneralRe: How to make a tab disabled and not accessible Pin
peterpanfr18-May-03 0:52
peterpanfr18-May-03 0:52 
QuestionTooltips on TabPages? Pin
Member 39890415-May-03 5:07
Member 39890415-May-03 5:07 
GeneralRemoving the selected tab in a TabControl Pin
Booooooy6-May-03 12:47
Booooooy6-May-03 12:47 

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.