Post
Ask Question

C# TabControl

TabControl Control

 
The TabControl manages tab pages where each page may host different child controls. In this article, I will demonstrate how to create and use a TabControl in Windows Forms.
 
I wrote an article Working with Windows TabControl with C# in 2003 using .NET 2.0 and since then, things have been changed. This article is written using Visual Studio 2010.
 

Creating a TabControl

 
We can create a TabControl control using a Forms designer at design-time or using the TabControl class in code at run-time or dynamically.
 
Design-time
 
To create a TabControl control at design-time, you simply drag and drop a TabControl control from Toolbox onto a Form in Visual Studio. After you drag and drop a TabControl on a Form, the TabControl1 is added to the Form and looks like Figure 1.
 
TabControl1.gif 
Figure 1
 
A TabControl is just a container and has no value without tab pages. As you can see from Figure 1, by default two Tab Pages are added to the TabControl. We can add and remove tab pages by clicking on the Tasks handle and selecting Add and Remove Tab links as you see in Figure 2.
 
TabControl2.gif 
Figure 2
 
Add Tab link adds next tab page and Remove Tab removes the current tab page from a Tab Control. We will discuss tab pages in more detail later in this tutorial.
 
Run-time
 
TabControl class represents a tab control. The following code snippet creates a TabControl and sets its Name, BackColor, ForeColor, Font, Width, and Height properties.
  1. // Create a TabControl and set its properties  
  2.   
  3. TabControl dynamicTabControl = new TabControl();  
  4. dynamicTabControl.Name = "DynamicTabControl";  
  5. dynamicTabControl.BackColor = Color.White;  
  6. dynamicTabControl.ForeColor = Color.Black;  
  7. dynamicTabControl.Font = new Font("Georgia", 16);  
  8. dynamicTabControl.Width = 300;  
  9. dynamicTabControl.Height = 200;  
Once the TabControl control is ready with its properties, we need to add it to a Form by calling Form.Controls.Add method. The following code snippet adds a TabControl control to the current Form. 
  1. Controls.Add(dynamicTabControl);  
As I mentioned earlier, a TabControl is nothing without tab pages. 
 
TabPage class represents a tab page control in Windows Forms. The following code snippet creates two TabPage controls, sets their properties, and calls TabControl.TabPages.Add() method to add tab pages to TabControl.
  1. // Add TabPage1  
  2.   
  3. TabPage tabPage1 = new TabPage();  
  4. tabPage1.Name = "tabPage2";  
  5. tabPage1.Text = "Author";  
  6. tabPage1.BackColor = Color.Green;  
  7. tabPage1.ForeColor = Color.White;  
  8. tabPage1.Font = new Font("Verdana", 12);  
  9. tabPage1.Width = 100;  
  10. tabPage1.Height = 100;  
  11. dynamicTabControl.TabPages.Add(tabPage1);   
  12.   
  13. // Add TabPage2  
  14.   
  15. TabPage tabPage2 = new TabPage();  
  16. tabPage2.Name = "tabPage2";  
  17. tabPage2.Text = "Books";  
  18. tabPage2.BackColor = Color.Orange;  
  19. tabPage2.ForeColor = Color.White;  
  20. tabPage2.Font = new Font("Verdana", 12);  
  21. tabPage2.Width = 100;  
  22. tabPage2.Height = 100;  
  23. dynamicTabControl.TabPages.Add(tabPage2);  
New TabControl with two tab pages looks like Figure 3.
 
TabControl3.gif 
Figure 3
 

TabControl Properties

 
After you place a TabControl control on a Form, the next step is to set properties.
 
The easiest way to set properties is from the Properties Window. You can open Properties window by pressing F4 or right-click on a control and select the Properties menu item. The Properties window looks like Figure 4.
 
TabControl4.gif 
Figure 4
 
Name
 
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.
  1. dynamicTabControl.Name = "DynamicTabControl";  
Positioning a TabControl
 
The Dock property is used to set the position of a TabControl. It is of type DockStyle that can have values Top, Bottom, Left, Right, and Fill. The following code snippet sets Location, Width, and Height properties of a TabControl control.
  1. dynamicTabControl.Dock = DockStyle.Left;  
Font
 
Font property represents the font of text of a TabControl control. If you click on the Font property in the Properties window, you will see Font name, size, and other font options. The following code snippet sets Font property at run-time.
  1. dynamicTabControl.Font = new Font("Georgia", 16);  
Background and Foreground
 
BackColor and ForeColor properties are used to set background and foreground color of a TabControl respectively. If you click on these properties in Properties window, the Color Dialog pops up.
 
Alternatively, you can set background and foreground colors at run-time. The following code snippet sets BackColor and ForeColor properties.
  1. dynamicTabControl.BackColor = Color.White;  
  2. dynamicTabControl.ForeColor = Color.Black;  
Alignment and Appearance
 
Alignment property gets or sets the area of the control where the tabs are aligned. A TabAlignment enumeration is used to set Alignment property and have Top, Bottom, Left, or Right values.
 
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 Normal, Buttons, or FlatButtons values. 
  1. dynamicTabControl.Alignment = TabAlignment.Left;  
  2. dynamicTabControl.Appearance = TabAppearance.FlatButtons;  
Tab Pages
 
TabPages property, a type of TabPageColleciton object is the gateway to access and add tab pages to a TabControl. Like any other collection, TabPageCollection has all collection functionality including add, remove, and find.
 
We can add and access tab pages of TabControl at design-time from Properties Window by clicking on TabPages Collection as you can see in Figure 5.
 
TabControl5.gif 
Figure 5
 
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 6.
 
TabControl6.gif 
Figure 6
 
As we have seen earlier in this tutorial, we can also add and remove tab pages to a TabControl using TabPage class.
 

Adding Child Controls to Tab Pages

 
Adding child controls to tab pages at design-time is pretty straight forward. You select a tab page and drag child controls from Toolbox onto a TabPage and set their properties. Accessing these child controls from code is no different than any other controls.
 
Adding child controls at run-time is a little tricky. You create child controls and add them to the TabPage, not to the form.
 
The following snippet creates a Button control and adds it to a TabPage.
  1. // Create a Button and add it to TabPage1  
  2.   
  3. Button button1 = new Button();  
  4. button1.Name = "button1";  
  5. button1.Text = "Click Me";  
  6. button1.BackColor = Color.Blue;  
  7. button1.ForeColor = Color.White;  
  8. button1.Font = new Font("Verdana", 12);  
  9. button1.Width = 100;  
  10. button1.Height = 30;  
  11. button1.Location = new Point(50, 50);  
  12.   
  13. // Add Button control to TabPage  
  14. tabPage1.Controls.Add(button1);  
Display Images in Tab Control
 
To display images in the header of tab pages at design-time, follow these steps.
  • Drag an ImageList control onto a Form
  • Add images to ImageList by clicking on its Images property
  • Set TabControl.ImageList property to ImageList1
  • Set TabPage.ImageIndex property to the index of the image in ImageList. Remember, ImageList index starts at 0.
To set an image in the tab pages header at run-time, first, we need to create an ImageList and add images to it.
  1. ImageList iconsList = new ImageList();  
  2. iconsList.TransparentColor = Color.Blue;  
  3. iconsList.ColorDepth = ColorDepth.Depth32Bit;  
  4. iconsList.ImageSize = new Size(25, 25);  
  5. iconsList.Images.Add(Image.FromFile(@"C:\Images\Garden.jpg"));  
  6. iconsList.Images.Add(Image.FromFile(@"C:\Images\Tree.jpg"));  
  7. iconsList.Images.Add(Image.FromFile(@"C:\Images\Waterfall.jpg"));  
After that we set ImageList property of TabControl.
  1. dynamicTabControl.ImageList = iconsList;  
The last step is to set ImageIndex property of TabPages. 
  1. tabPage1.ImageIndex = 0;  
A TabControl with image icons looks like Figure 7. 
 
TabControl7.gif 
Figure 7
 
TabCount and RowCount
 
TabCount property gets the number of tab pages in a TabControl. RowCount property gets the number of rows that are currently being displayed in the control's tab strip.
  1. MessageBox.Show(dynamicTabControl.TabCount.ToString());  
  2. MessageBox.Show(dynamicTabControl.RowCount.ToString());  
Selected Tab
 
SelectedTab and SelectedIndex properties get the selected tab and index of the selected tab in a TabControl.
  1. TabPage selectedTab = dynamicTabControl.SelectedTab;  
  2. int selectedIndex = dynamicTabControl.SelectedIndex;  
  3. dynamicTabControl.SelectedTab = selectedTab;  

Summary

 
In this article, we discussed discuss how to create and use a TabControl control. First, we discussed how to create a TabControl and add tab pages to TabControl at design-time and run-time. After that, we saw, how to set its properties. 


Similar Articles
Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.