Learn Tab Control Using C#

This article explains the Tab Control and show how to use it.

Acknowledgment (Tab Control properties):

http://www.c-sharpcorner.com/uploadfile/mahesh/c-sharp-tabcontrol/

Tab Control

Dear reader, today we will discuss the Tab Control using C#. The Tab Control is a very useful tool, especially in database applications where we need to capture a huge number of data fields on a single form. But we can use this control in other applications as well.

  • How to use Tab Control in windows application?
  • Important properties of Tab Control?
  • Simple sample application that demonstratea the Tab Control using OOP.

So in simple words the Tab Control is useful where we don't want to use many forms to display a large amount of data. Now we will create the sample application that captures the data of a patient, for example personal info tab, surgery info tab, discharges details tab.

 Step 1: First of all we will create the tables.

CREATE TABLE [dbo].[Patient_Info_Detail] (

[CRE_Patient_id] [varchar](10) NOT NULL,

[CRE_FirstName] [nvarchar](50) NULL,

[CRE_LastName] [varchar](30) NULL,

[CRE_Gender] [varchar](6) NULL,

[CRE_Father_Name] [varchar](30) NULL,

[CRE_Date_Of_Birth] [datetime] NULL,

[CRE_Address] [varchar](100) NULL,

[CRE_City] [varchar](100) NULL,

[CRE_Phone1] [varchar](15) NULL

)

 

CREATE TABLE [dbo].[Patient_ surgery _Detail](

[OPR_Oper_Date] [datetime] NOT NULL,

[OPR_Oper_Id] [varchar](15) NOT NULL,

[OPR_Oper_Patient_Id] [varchar](10) NOT NULL,

[OPR_Oper_Surgeon] [varchar](20) NOT NULL,

[OPR_Oper_Anaesthetist] [varchar](20) NOT NULL,

[OPR_Oper_Asssitant] [varchar](20) NOT NULL,

)

 

CREATE TABLE [dbo].[Discharge](

[DIS_Discharge_Patient_Id] [varchar](10) NOT NULL,

[DIS_Outgoing_Type] [nvarchar](20) NULL,

[DIS_Date] [datetime] NULL

)

Step 2: Now we will open the new project with the name "patient_info".

Tab-Control-in-Windows-Form-1.jpg

Step 3: Now we will add the Tab Control from the tool bar.

Tab-Control-in-Windows-Form-2.jpg

TabControl Properties

Dear reader, C# provides the easiest way to set properties; from the Properties Window. You can open the Properties window by right-clicking on a control and selecting the Properties menu item.

Tab-Control-in-Windows-Form-3.jpg


Name

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

tbPatient.Name = "TbPatient";

Positioning a TabControl

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

C# Code:

tbPatient.Dock = DockStyle.Left;

Font

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

C# Code:

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

Background and Foreground

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

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

C# Code:

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

Alignment and Appearance

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

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

C# Code:

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

Tab Pages

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

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

Tab-Control-in-Windows-Form-4.jpg
Figure 4

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 5.

Tab-Control-in-Windows-Form-5.jpg
Figure 5

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

Step 3: Now you need to design the form as shown in the picture.

Tab-Control-in-Windows-Form-6.jpg

Tab-Control-in-Windows-Form-7.jpg

Tab-Control-in-Windows-Form-8.jpg

Step 4: Now we need to create four classes.

  • Main class
  • Patient _Profile class
  • surgery class
  • Discahrge class

Tab-Control-in-Windows-Form-9.jpg

Now create two methods in the main class as given below. You can change the SQL Server setting according to your system.

Tab-Control-in-Windows-Form-10.jpg

Now add the second class Patient_Profile.

Tab-Control-in-Windows-Form-11.jpg

Now create the constructor of a class, one method in the patient_profile class as given below.

Tab-Control-in-Windows-Form-12.jpg

Now add the surgery class.

Tab-Control-in-Windows-Form-13.jpg

Now add the following code in class surgery.

Tab-Control-in-Windows-Form-14.jpg

Now we create our fourth class.

Tab-Control-in-Windows-Form-15.jpg

Now add the following code:

Tab-Control-in-Windows-Form-16.jpg

Tab-Control-in-Windows-Form-17.jpg

Step 5: Dear readers, finaly we will add the code in the btnnext click event.

private void btnnext_Click(object sender, EventArgs e)

{

    if (tabControl1.SelectedTab.Text   == "Patient Info")

    {

        tabControl1.SelectedTab = tbOperation;

    }

    else if (tabControl1.SelectedTab.Text == "Operation")

    {

        tabControl1.SelectedTab = tbDischarge;           

    }

}

Step 6: Now add the following code in the btnback button.

 

private void btnBack_Click(object sender, EventArgs e)

{

    if (tabControl1.SelectedTab.Text == "Discharge")

    {

         tabControl1.SelectedTab = tbOperation;

    }

    else if (tabControl1.SelectedTab.Text == "Operation")

    {

        tabControl1.SelectedTab = tbPatient;

    }

}


Step 7: Now add the following code in the "Save" Button.

Tab-Control-in-Windows-Form-18.jpg

Step 8: Now run the application and insert the record in the text boxes.

Tab-Control-in-Windows-Form-19.jpg

Now click the "Next" button.

Tab-Control-in-Windows-Form-20.jpg

Now click the "Next" button.

Tab-Control-in-Windows-Form-21.jpg

Now click the "Save" button.

Tab-Control-in-Windows-Form-22.jpg

Now you will see the results in the SQL Server tables.

Tab-Control-in-Windows-Form-23.jpg