1. Introduction
A TabControl is a collection of TabPage controls. Each tab page can act as a separate container. And we all know that a container can hold controls in it. The simple explanation for a Tab Container is that it is a container that can hold N number of containers in the form of book pages. The tab control is useful for grouping controls based on the information they give or receive. Say for example, in the credit card transaction screen, the personal information can be kept in one tab page, and the actual card details and the amount of transactions can be kept in another page. In most cases, people usually use a tab control when the form is not large enough for all the controls.
Here we will see how to use the tab container, then we will add some tab pages dynamically. Finally we will explore some important properties for this control.
2. Place the Tab Container
The TabControl is available from the toolbox under the container groups. Drag and Drop the tab control to the Form. Once the control is placed on the form, you will see some default tab pages. To control the property of the tab pages, first select the required tab page by switching the tabs and then click inside page area to select the page. Once a page is selected, you can set the properties for the page. Note, as already said, a page is a container so the property you set (say for example the Font) for the page is inherited by all the controls placed in that page. Have a look at the Group Box example, which is a basic article on the containers.
Video: 01_PlaceTab.avi: Shows placing a tab control on the form and moving and positioning the control to the required location.
3. Adding tab pages
Once the TabControl is placed in the form, in the top right corner, click on the arrow that is pointing to the right. Clicking that small arrow will bring a pull down menu and from there you can choose the "Add Tab" link to add tab pages to the control. The add page acts like a dialog, so you can place the control inside the tab pages. When you switch between the tabs, you can see the controls that belong to the tab pages.
You can also add or remove the tab pages using the TabPages property of the TabControl. Clicking on the ellipsis button on the value side of this property will bring up a new dialog and you can add or remove pages from that dialog itself.
Video: 02_AddPages.avi: Shows ways to add tab pages to the TabControl
Video: 03_PlaceControls.avi: Shows placing the controls in the pages
4. About the Sample
Have a look at the following screen shot:
The form initially has four tabs in it. And each tab has one control in it. The Keep Tab Left checkbox will move the tabs to the left when it is checked. The radio buttons adjust the style of the tabs. The Multiline Tabs checkbox keeps the tabs in multiple rows. In the above screen, you see only four tabs; imagine that you have 20 tabs like that. Now, when we check the Multiline tabs, the 20 tabs are arranged in multiple rows. When we uncheck it, an arrow will appear on the top so that you can scroll the tabs horizontally. The Add Tab Button will add a tab with the name given in the text box.
5. Coding the Sample
1. The add tab button click event, first creates a text box. Then the text property of the text box is set after deciding the location and the size of it. Then a tab page is created using the TabPage class. The name for the tab page is passed to the constructor by reading the text entered by the user on the text field. Finally the tab page is added to the tab control using the add method of the TabPages collection. The following is the code for it:
private void btnTabAdd_Click(object sender, EventArgs e)
{
//Tab 001 : Create a Text box to place it in the Tab Page
TextBox txt = new TextBox();
txt.Size = new Size(250, 30);
txt.Location = new Point(20, 20);
txt.Text = "Added to Page";
//Tab 002 : Create a Tab Page and Add the text box to the Page
if (txtTabName.Text == "")
txtTabName.Text = "Empty";
TabPage page = new TabPage(txtTabName.Text);
page.Controls.Add(txt);
//Tab 003: Now add the Tab page with text box to tab control
tabControl1.TabPages.Add(page);
}
2. The Alignment property of the tab control is useful for keeping the tab on any possible four edges of the tab control. Here when you place a check mark on the Keep Tab Left, I am using the alignment property to set the tab pages on the left side of the tab control. At runtime the TabAlignment enumeration is used to set the constant left to the alignment property. The following is the code:
private void chkLeftTab_CheckedChanged(object sender, EventArgs e)
{
//Tab 004: Change the Tab alignment based on the Checkbox state
if (chkLeftTab.Checked == true)
{
tabControl1.Alignment = TabAlignment.Left;
radNormal.Enabled = false;
radButton.Enabled = false;
radFlat.Enabled = false;
}
else
{
tabControl1.Alignment = TabAlignment.Top;
radNormal.Enabled = true;
radButton.Enabled = true;
radFlat.Enabled = true;
}
}
3. The property Appearance is useful for setting the button style of the tabs. The enumeration TabAppearance defines the contants required for this property. Try with the sample with three tab button styles in combination with Multiline and Left side tab option.
//Tab 005: Set the Tab look and Feel
private void radNormal_CheckedChanged(object sender, EventArgs e)
{
if (radNormal.Checked == true)
tabControl1.Appearance = TabAppearance.Normal;
}
private void radButton_CheckedChanged(object sender, EventArgs e)
{
if (radButton.Checked == true)
tabControl1.Appearance = TabAppearance.Buttons;
}
private void radFlat_CheckedChanged(object sender, EventArgs e)
{
if (radFlat.Checked == true)
tabControl1.Appearance = TabAppearance.FlatButtons;
}
4. Finally, the Multiline property is set when the corresponding checkbox is checked. As already said, this property allows the tabs to be displayed in multiple rows instead of providing the arrows at the right end of the control. The following is the code for it:
private void chkTabMulti_CheckedChanged(object sender, EventArgs e)
{
//Tab 006: Allow to display the tabs in Multiple rows
if (chkTabMulti.Checked == true)
tabControl1.Multiline = true;
else
tabControl1.Multiline = false;
}
Note : The sample is created using the VS2005 IDE. The attached Zip file has the sample and the videos specified in the articles. The video Resolution is 800x600. To see it full screen set your resolution to 800x600 for a while.