1. Introduction to TabControl
TabControl is a collection of Tab pages. Each Tab Page in the TabControl can act as a separate container. And we know that a container can hold controls in it. TabControl is a kind of container which can hold N number of containers in the form of book pages. The TabControl is useful to group the 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 transaction can be kept on another page. In most cases, people usually go for the tab control when the form is not enough to fit all the controls.
Here we will see how we use the tab container, then we will add some tab pages dynamically. Finally, we will explore some important property of this control.
2. Placing TabControl on Windows Form
From the toolbox under the container groups, Tab control is available. One can Drag & Drop the tab control to the Form. Once the control is placed on the form, we will see some default tab pages. To control the property of the specific Tab Page, first we have to select the required tab page by switching the tabs and then clicking inside page area of it. After selecting the page, we can set the properties for it. Each Tab in the TabControl is a container. So the property we set to a tab is inherited by its child controls. Have a look at the Group Box example, which is a basic article on the containers.
3. Adding Tab Pages to TabControl
Once the TabControl is placed in the form, we can click on the arrow pointing right side which is in the top right corner of the control. Clicking this small arrow will bring a pull-down menu and from there we can click the Add Tab link to add tab pages to the TabControl. The Added Page acts like dialog, so we can place the control in side the tab pages. When you switch between the tabs, you can see the controls that belong to a tab page.
We 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 from where we can change the Tab Pages and control its properties.
YouTube: Setup TabControl at Design Time
4. About The Example
Have a look at the below screen shot:
C# TabControl & Tab Pages Example
The form has four tabs in it. And each tab is accommodating one control in it. Keep Tab Left checkbox will move the tabs to the left when it is checked. The radio buttons adjust the style of the tabs. Multi-line Tabs checkbox keeps the tabs in multiple rows. In the above screen, you see only four tabs, imagine that you have 20 tabs like it. Now, when we check the Multi-line tabs, all 20 tabs arranged in multiple rows. When we remove check mark of the Multi-line Tabs check box, an arrow will appear on the top. Using the arrow, one can scroll the list of tabs which is staying beyond the form. The Add Tab Button will add a tab with the name given in the text box.
Youtube: About The Example and Form Design
5. Code For Example
5.1 Adding Tabs Dynamically
We will add Tab Page dynamically to the TabControl through the ‘Add Tabs’ button click handler. The add tab button click event first creates a text box. Then we set the text property of the text box after deciding the location and the size of it. The code below creates a Tab Page using the
TabPage
class. We pass the name for the tab page to the constructor by reading the text entered by the user in the text field. Finally, the Tab Page is added dynamically to the Tab Control using the
add
function of the
TabPages Collection
. Below is the code for it:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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); } |
Youtube: Adding Tabs to C# TabControl At Runtime
5.2 Arrange Tabs – Horizontal or Vertical
The “
Alignment Property
” of the C# TabControl is useful to keep the tab on any possible four edges of the tab control. Here, when we place a check mark on the Keep Tab Left, the code is using the alignment property to set the Tab Pages on the left side of the tab control. At run-time, “
TabAlignment Enumeration
” is used to set the required alignment constant to the alignment property. Below is the code which sets tabs to the top of form or Left of the Form:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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; } } |
Youtube: C# TabControl Alignment
5.3 Tab Button Styles
The “
<strong>Appearance</strong> Property
” is useful to set the button style of the tabs. The “
<strong>TabAppearance</strong> Enumeration
” defines the constants needed for this property. We change the Tab Styles by assigning the correct enumeration constant relevant to the radio box.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//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; } |
Youtube: TabControl Button Style
5.4 Multi-Line Tabs
The
Multiline
Property of the TabControl arranges the Tabs in multiple lines. This property accepts a Boolean value and when we set it false, we see an arrow to brings the invisible tabs to display area. When it is true, we see tabs arranged in multiple lines. The below code sets this property based on Multiline Tab check box:
|
1 2 3 4 5 6 7 8 |
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; } |
Youtube: Scroll-able Tabs vs Multi-Line Tabs
Source Code & Video : Download from Google Drive
Note : The sample is created using the VS2005 IDE. Attached Zip file has the Sample and the videos specified in the Articles.
Categories: C#
Tags: C# TabAlignment Enum, C# TabAppearance Enum, C# TabControl Alignment Property, C# TabControl Appearance Property, C# TabPages Collection
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.