C# TabControl

TabControl Control

The TabControl manages tab pages where each page may host different child controls. In this article, I will demonstrate how to create and use a TabControl in Windows Forms.

I wrote an article Working with Windows TabControl with C#  in 2003 using .NET 2.0 and since then, things have been changed. This article is written using Visual Studio 2010.

Creating a TabControl

We can create a TabControl control using a Forms designer at design-time or using the TabControl class in code at run-time or dynamically.

Design-time

To create a TabControl control at design-time, you simply drag and drop a TabControl control from Toolbox onto a Form in Visual Studio. After you drag and drop a TabControl on a Form, the TabControl1 is added to the Form and looks like Figure 1.

Figure 1

A TabControl is just a container and has no value without tab pages. As you can see from Figure 1, by default two Tab Pages are added to the TabControl. We can add and remove tab pages by clicking on the Tasks handle and selecting Add and Remove Tab links as you see in Figure 2.

Figure 2

Add Tab link adds next tab page and Remove Tab removes the current tab page from a Tab Control. We will discuss tab pages in more details later in this tutorial.

Run-time

TabControl class represents a tab control. The following code snippet creates a TabControl and sets its Name, BackColor, ForeColor, Font, Width, and Height properties.

C# Code:

// Create a TabControl and set its properties

TabControl dynamicTabControl = new TabControl();
dynamicTabControl.Name = "DynamicTabControl";
dynamicTabControl.BackColor = Color.White;
dynamicTabControl.ForeColor = Color.Black;
dynamicTabControl.Font = new Font("Georgia", 16);
dynamicTabControl.Width = 300;
dynamicTabControl.Height = 200;

Once the TabControl control is ready with its properties, we need to add it to a Form by calling Form.Controls.Add method. The following code snippet adds a TabControl control to the current Form. 

C# Code:

Controls.Add(dynamicTabControl);

As I mentioned earlier, a TabControl is nothing without tab pages.

TabPage class represents a tab page control in Windows Forms. The following code snippet creates two TabPage controls, sets their properties and calls TabControl.TabPages.Add() method to add tab pages to TabControl.

C# Code:

// Add TabPage1

TabPage tabPage1 = new TabPage();
tabPage1.Name = "tabPage2";
tabPage1.Text = "Author";
tabPage1.BackColor = Color.Green;
tabPage1.ForeColor = Color.White;
tabPage1.Font = new Font("Verdana", 12);
tabPage1.Width = 100;
tabPage1.Height = 100;
dynamicTabControl.TabPages.Add(tabPage1);

// Add TabPage2

TabPage tabPage2 = new TabPage();
tabPage2.Name = "tabPage2";
tabPage2.Text = "Books";
tabPage2.BackColor = Color.Orange;
tabPage2.ForeColor = Color.White;
tabPage2.Font = new Font("Verdana", 12);
tabPage2.Width = 100;
tabPage2.Height = 100;
dynamicTabControl.TabPages.Add(tabPage2);

New TabControl with two tab pages looks like Figure 3.

Figure 3

TabControl Properties

After you place a TabControl control on a Form, the next step is to set properties.

The easiest way to set properties is from the Properties Window. You can open Properties window by pressing F4 or right click on a control and select Properties menu item. The Properties window looks like Figure 4.

Figure 4

Name

Name property represents a unique name of a TabControl control. It is used to access the control in the code. The following code snippet sets and gets the name and text of a TabControl control.

C# Code:

dynamicTabControl.Name = "DynamicTabControl";

Positioning a TabControl

The Dock property is used to set the position of a TabControl. It is of type DockStyle that can have values Top, Bottom, Left, Right, and Fill. The following code snippet sets Location, Width, and Height properties of a TabControl control.

C# Code:

dynamicTabControl.Dock = DockStyle.Left;

Font

Font property represents the font of text of a TabControl control. If you click on the Font property in Properties window, you will see Font name, size and other font options. The following code snippet sets Font property at run-time.

C# Code:

dynamicTabControl.Font = new Font("Georgia", 16);

Background and Foreground

BackColor and ForeColor properties are used to set background and foreground color of a TabControl respectively. If you click on these properties in Properties window, the Color Dialog pops up.

Alternatively, you can set background and foreground colors at run-time. The following code snippet sets BackColor and ForeColor properties.

C# Code:

dynamicTabControl.BackColor = Color.White;
dynamicTabControl.ForeColor = Color.Black;

Alignment and Appearance

Alignment property gets or sets the area of the control where the tabs are aligned. A TabAlignment enumeration is used to set Alignment property and have Top, Bottom, Left, or Right values.

Appearance property gets or sets the visual appearance of the control's tabs. A TabAppearance enumeration is used to set the Appearance property and have Normal, Buttons, or FlatButtons values. 

C# Code:

dynamicTabControl.Alignment = TabAlignment.Left;
dynamicTabControl.Appearance = TabAppearance.FlatButtons;

Tab Pages

TabPages property, a type of TabPageColleciton object is the gateway to access and add tab pages to a TabControl. Like any other collections, TabPageCollection has all collection functionality including add, remove, and find.

We can add and access tab pages of TabControl at design-time from Properties Window by clicking on TabPages Collection as you can see in Figure 5.

Figure 5

When you click on the Collections, the Tab Pages Collection Editor window will pop up where you can add and remove tab pages and you can also set these tab pages properties and events. I add four tab pages as you can see from Figure 6.

Figure 6

As we have seen earlier in this tutorial, we can also add and remove tab pages to a TabControl using TabPage class.

Adding Child Controls to Tab Pages

Adding child controls to tab pages at design-time is pretty straight forward. You select a tab page and drag child controls from Toolbox onto a TabPage and set their properties. Accessing these child controls from code is no different than any other controls.

Adding child controls at run-time is little tricky. You create child controls and add them to the TabPage, not to the form.

The following snippet creates a Button control and adds it to a TabPage.

C# Code:

// Create a Button and add it to TabPage1

Button button1 = new Button();
button1.Name = "button1";
button1.Text = "Click Me";
button1.BackColor = Color.Blue;
button1.ForeColor = Color.White;
button1.Font = new Font("Verdana", 12);
button1.Width = 100;
button1.Height = 30;
button1.Location = new Point(50, 50);

// Add Button control to TabPage
tabPage1.Controls.Add(button1);

 

Display Images in Tab Control

To display images in in the header of tab pages at design-time, follow these steps.

• Drag an ImageList control onto a Form
• Add images to ImageList by clicking on its Images property
• Set TabControl.ImageList property to ImageList1
• Set TabPage.ImageIndex property to the index of image in ImageList. Remember, ImageList index starts at 0.

To set image in the tab pages header at run-time, first we need to create an ImageList and add images to it.

C# Code:

ImageList iconsList = new ImageList();
iconsList.TransparentColor = Color.Blue;
iconsList.ColorDepth = ColorDepth.Depth32Bit;
iconsList.ImageSize = new Size(25, 25);
iconsList.Images.Add(Image.FromFile(@"C:\Images\Garden.jpg"));
iconsList.Images.Add(Image.FromFile(@"C:\Images\Tree.jpg"));
iconsList.Images.Add(Image.FromFile(@"C:\Images\Waterfall.jpg"));

 

After that we set ImageList property of TabControl.

C# Code:

dynamicTabControl.ImageList = iconsList;

 

The last step is to set ImageIndex property of TabPages. 

C# Code:

tabPage1.ImageIndex = 0;

A TabControl with image icons looks like Figure 7.

 

Figure 7

TabCount and RowCount

TabCount property gets the number of tab pages in a TabControl. RowCount property gets the number of rows that are currently being displayed in the control's tab strip.

C# Code:

MessageBox.Show(dynamicTabControl.TabCount.ToString());
MessageBox.Show(dynamicTabControl.RowCount.ToString());

 

Selected Tab

SelectedTab and SelectedIndex properties get the selected tab and index of the selected tab in a TabControl.

C# Code:

TabPage selectedTab = dynamicTabControl.SelectedTab;
int selectedIndex = dynamicTabControl.SelectedIndex;
dynamicTabControl.SelectedTab = selectedTab;

 

Summary

In this article, we discussed discuss how to create and use a TabControl control. First we discussed how to create a TabControl and add tab pages to TabControl at design-time and run-time. After that we saw, how to set its properties.