Working with Windows TabControl with C#

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 Programmatically

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;