ARTICLE

Working with Windows TabControl with C#

Posted by Mahesh Chand Articles | Windows Controls C# December 16, 2003
Windows TabControl is a useful control that allows you display multiple dialogs tabs on a single form by switching between the tabs. In this tutorial, I will explain how to create and use a TabControl in your Windows applications with C#.
Reader Level:

Windows TabControl is a useful control that allows you display multiple dialogs tabs on a single form by switching between the tabs. A tab acts as another Form that can host other controls. Figure 1 shows an example of TabControl in Visual Studio .NET, which allows you to switch among multiple files using the tabs.

In this tutorial, I will explain how to create and use a TabControl in your Windows applications with C#.

Adding a TabControl to Form

The simplest way to create a TabControl is using Visual Studio .NET. I create a Windows Form application using Visual Studio .NET and add a TabControl from Toolbox to the Form by dragging the TabControl to the Form. After that I resize and reposition TabControl according to the Form size. The Form Designer adds the code for TabControl for you. If you see the code, you will notice once private variable of type System.Windows.Forms.TabControl as following:

private System.Windows.Forms.TabControl tabControl1;

The System.Windows.Forms.TabControl class represents a TabControl in .NET. Now if you see the InitializeComponent method generated by the Form Designer, you will see the code for TabControl such as setting TabControl location, name, size and adding the TabControl to the Form controls. See Listing 1.

private void InitializeComponent()
{
this.tabControl1 = new System.Windows.Forms.TabControl();
this.SuspendLayout();
//
// tabControl1
//
this.tabControl1.Location = new System.Drawing.Point(8, 16);
this.tabControl1.Name = "tabControl1";
this.tabControl1.SelectedIndex = 0;
this.tabControl1.Size = new System.Drawing.Size(352, 248);
this.tabControl1.TabIndex = 0;
//
// Form1
//
this.AutoScaleBaseSize = new System.Drawing.Size(5, 13);
this.ClientSize = new System.Drawing.Size(368, 273);
this.Controls.Add(this.tabControl1);
this.Name = "Form1";
this.Text = "Form1";
this.ResumeLayout(false);
}

 Figure 1 shows an example

Understanding the TabControl and TabPage class

A TabControl is a collection of tab pages and a tab page is the actual control that hosts other child controls. TabPage class represents a tab page.

TabControl class represents a TabControl. This class provides members (properties, methods, and events) to work with the TabControls. Table 1 lists the TabControl properties.

Property  Description
Alignment
Area of the control where the tabs are aligned.
Appearance
 
Visual appearance of the control's tabs.
DrawMode
 
A way that the control's tab pages are drawn.
HotTrack Value indicating whether the control's tabs change in appearance when the mouse passes over them.
ImageList
The images to display on the control's tabs.
ItemSize
 
Size of the control's tabs.
Multiline
 A value indicating whether more than one row of tabs can be displayed.
Padding
 
Amount of space around each item on the control's tab pages. 
RowCount
 
Returns the number of rows that are currently being displayed in the control's tab strip.
SelectedIndex
 
The index of the currently-selected tab page.
SelectedTab  Currently selected tab page.
ShowToolTips
 
The value indicating whether a tab's ToolTip is shown when the mouse passes over the tab.
SizeMode
 
The way that the control's tabs are sized.
TabCount
 Number of tabs in the tab strip.
TabPages
Returns the collection of tab pages in this tab control.

Adding TabPage to a TabControl

Now I will add few tabs to the TabControl with the help of Properties window of TabControl. The Properties window has a property called TabPages, which is a collection of TabPage controls (see Figure 2). A TabPage represents a page of the TabControl that can host child controls.

Figure 2. TabPages property of TabControl

Now if you click on TabPages property in Property window, it launches TabPage Collection Editor (see Figure 3) where you can add a new page or remove existing pages by using Add and Remove buttons. You can also set the properties of pages by using the right side properties grid. As you can see from Figure 3, I add two pages and set their properties.



Figure 3. Adding Tab pages to a TabControl

After adding two pages to TabControl, the final Form looks like Figure 4.

Figure 4. A Form with two Tab pages

Adding and Removing a TabPage to TabControl Programmatically

You can add and remove Tab pages to a TabControl using the TabControl.TabPages.Add and TabControl.TabPages.Remove methods. The following code snippet adds a new page to the TabControl programmatically:

TabPage newPage = new TabPage("New Page");
tabControl1.TabPages.Add(newPage);

After adding the page, the new TabControl would look like Figure 5.

Figure 5. Adding a Tab page programmatically.

The Remove method of TabPageCollection class (through TabControl.TabPages) removes a page by name or index from the page collection. The following code snippet removes "New Page" from the collection:

TabPage newPage = new TabPage("New Page");
tabControl1.TabPages.Remove(newPage);

The RemoveAll method removes all the pages from the collection.

Adding Controls to a TabPage

Adding controls to a TabPage is similar to adding controls to a Form. Make a page active in the Form Designer and drag and drop controls from Toolbox to the page. I add a Label, a TextBox, and a Button control to Settings page of TabControl and change their properties. The final page looks like Figure 6.


Figure 6. Adding controls to a Tab page

Controls are added to a page by using TabPage.Controls.Add method. Now if you see the code generated by the designer, you will notice the following code:

this.SettingsPage.Controls.Add(this.BrowseBtn);
this.SettingsPage.Controls.Add(this.textBox1);
this.SettingsPage.Controls.Add(this.label1);

Using the same code, you can even add controls to a TabPage programmatically.

Access Controls of a TabPage

All controls of a TabPage are local to a Form and accessible from the Form without adding any additional functionality. For example, the following code sets the Text property of the TextBox on Preferences Tab page:

this.textBox1 =@"C:\";

Getting and Setting Active Tab Programmaticall

You can get and set an active tab of a TabControl programmatically using the SelectedTab property of TabControl. For example, the following code snippet sets PreferencePage as active tab:

this.tabControl1.SelectedTab = this.PreferencesPage;

Article Extensions
Contents added by shirisha kola on May 29, 2012
Contents added by amar on Jan 25, 2012
Contents added by Mark McGinty on Feb 04, 2011
Is there a way to make the TabControl at runtime look more like it does at design time in VS2010?  When designing, the non-selected tabs are shaded a darker color than is the selected one; also, when you roll over a non-selected tab, its background turns a light shade of blue -- not necessarily the color I would chose, but a worthy affect.

My problem with its runtime looks out of the box is that it's not clear enough which tab is selected, a problem compounded if more than one tab has the same layout, each tab pertaining to a different logical object.  I realize I could go owner draw, but that's rather a lot of work to do something that has clearly already been done in the designer UI (that is equally clearly specific to this component.)

Any help?

TIA,
MM
COMMENT USING