Monday, July 04, 2011

[C#] - Container Controls 4 : Tab Control

1. Introduction to TabControls


"TabControl" is a collection of Tab pages. 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 Tab Container is, a container, which can hold N number of containers in the form of book pages. The tab control 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 do we use the tab container, then we will add some tab pages dynamically. Finally, we will explore some important property for this control.

2. Place the Tab Container


From the toolbox under the container groups, Tab control is available. 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 told a page is a container so the property you set (say for example the Font) the page is inherited by all the controls placed on 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 a positioning the control to the required location.

3. Adding tab pages


Once the TabControl is placed in the form, in top right corner, click on the arrow that is pointing right side. Clicking that small arrow will bring a pull-down menu and from there you can choose an add tab link to add tab pages to the control. The add page acts like dialog, so you 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.

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 remove property from that dialog itself.

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 Sample


Have a look at the below screen shot:



The form initially 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. 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 it. Now, when we check the Multiline tabs, all 20 tabs arranged in multiple rows. When we uncheck, 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. Programming Tab Control


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 in the text field. Finally, the tab page is added to the "Tab Control" using the add method of the "TabPages Collection". Below 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 to keep 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, "TabAlignment Enumeration" is used to set the required alignment constant to the alignment property. Below 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 "Appearance Property" is useful to set the button style of the tabs. The "TabAppearance Enumeration" defines the constants 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, "Multiline Property" is set when the corresponding checkbox is checked. As already told this property allows the tab pages goes into multiple pages instead of providing the arrows at the right end of the control. Below 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;
}

Source Code & Video : Download

Note : The sample is created using the VS2005 IDE. Attached Zip file has the Sample and the videos specified in the Articles. 

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Firend :)