C# TabControl Container Explained

[toc]

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.

Video: 01_PlaceTab.avi

This downloaded video shows how one can add a TabControl to Windows Form and then locate it inside form. After deciding the position, it also shows how to resize it.

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 Add 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 the tab pages.

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.

Video: 02_AddPages.avi

Shows ways to adding Tab Pages to the TabControl

Video: 03_PlaceControls.avi

Shows placing the controls in the pages

4. About The Example

Have a look at the below screen shot:

C# TabControl & Tab Pages Example

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.

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:

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:

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.

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:

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: , , , ,

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.

%d bloggers like this: