[Yugong Series] Detailed explanation of the TabControl control on Winform control special topic in September 2023

---

Preface

Winform controls are user interface elements in Windows Forms. They can be used to create various visual and interactive components of Windows applications, such as buttons, labels, text boxes, drop-down list boxes, check boxes, radio boxes, progress bars, etc. . Developers can use Winform controls to build user interfaces and respond to user actions to create powerful desktop applications.

1. Detailed explanation of TabControl control

The TabControl control is a commonly used tab control in Windows Forms. The TabControl control provides users with a way to switch between multiple tabs, and each tab can contain different controls to enrich the user interface.

The use of the TabControl control is very simple, just drag and drop the TabControl control on the form, and then add the tab page. Tab pages can be added using the TabControl control's Designer window or by dynamically creating a TabPage object in code.

The TabControl control mainly contains the following properties:

• SelectedIndex: Gets or sets the index of the currently selected tab.
• TabPages: Gets or sets the TabPage collection of the TabControl control.

Common events of the TabControl control are:

• SelectedIndexChanged: Fires when the user selects a different tab.
• Deselecting: Fires when the user attempts to deselect a tab.
• Deselected: Fires when the tab has been removed from the TabControl control.

The TabControl control can extend the interface by adding controls to the TabPage. For example, adding a ListView control on a tab page allows users to browse different data lists between different tabs.

In addition, the TabControl control also supports beautifying the interface through styles and themes, and also supports the use of custom tab layouts and styles.

1. Introduction to attributes

1.1 Alignment

The Alignment property of the TabControl control is used to set the position of the label (Tab) in the TabControl. TabControls can be placed at the top, bottom, left, or right of a form.

You can set the Alignment property of the TabControl control by following these steps:

1. Open the form designer, find the TabControl control in the toolbox and add it to the form.

2. Select the TabControl control, find the Alignment property in the properties window, and select a value as the position of the label, such as Top, Bottom, Left, or Right.

3. Adjust the size and position of the TabControl control to fit the needs of the form.

Sample code:

private void Form1_Load(object sender, EventArgs e)
{
    
    
    // 将TabControl放置在窗体的顶部
    tabControl1.Alignment = TabAlignment.Right;
}

By setting the Alignment property of the TabControl control, you can achieve a more flexible interface design and improve the user experience.

1.2 Appearance

The Appearance property of the TabControl control is used to set the appearance style of the TabControl. This property has two values: Buttons and Normal.

1. Buttons: In the TabControl tab bar, a close button will be displayed on the right side of each tab. The user can click this button to close the tab.

2. Normal: In the TabControl tab bar, the close button will not be displayed on the right side of each tab page.

Instructions:

Select the TabControl control in the design view, find the Appearance property in the properties window, and set it to Buttons or Normal.

Set in code:

tabControl1.Appearance = TabAppearance.Buttons;//设置为Buttons样式
tabControl1.Appearance = TabAppearance.Normal;//设置为Normal样式

1.3 DrawMode

The DrawMode property of the TabControl control specifies how to draw tabs. There are two available values:

1. Normal: The tab page is automatically drawn by the TabControl control, and the selected state can be controlled through properties such as SelectedTab and SelectedIndex.

2. OwnerDrawFixed: Developers need to write their own code to draw the tab.

When the DrawMode property is set to OwnerDrawFixed, the TabControl control emits the DrawItem event, in which developers can write code to draw the tab page.

Sample code:

private void Form1_Load(object sender, EventArgs e)
{
    
    
    tabControl1.Alignment = TabAlignment.Top;
    tabControl1.DrawMode = TabDrawMode.OwnerDrawFixed;
}
private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
    
    

    System.Drawing.Color animalColor = new System.Drawing.Color();
    switch (e.Index)//获取不同的选项卡索引，并且给不同选项卡设置不同颜色
    {
    
    
        case 0:
            animalColor = System.Drawing.Color.Red;
            break;
        case 1:
            animalColor = System.Drawing.Color.LimeGreen;
            break;
        case 2:
            animalColor = System.Drawing.Color.Tan;
            break;
    }
    e.DrawBackground();
    Rectangle rectangle = new Rectangle(e.Bounds.X, e.Bounds.Y,
            e.Bounds.Width, e.Bounds.Height);
    e.Graphics.FillRectangle(new SolidBrush(animalColor), rectangle);//绘制一个带有颜色的矩形

    Font font = e.Font;

    string text = $"选项{
      
      e.Index + 1}";
    e.Graphics.DrawString(text, font, System.Drawing.Brushes.White, new RectangleF(e.Bounds.X + 5, e.Bounds.Y + 3, e.Bounds.Width + 5, e.Bounds.Height - 4));//在选项卡上绘制文本
}

The above code binds the DrawItem event of the TabControl control and uses the Graphics object to draw the tab background and text. Note that you need to use the TabPages collection to obtain the Text property of the tab page.

Using OwnerDrawFixed mode allows you to flexibly customize the style and behavior of tabs, but requires writing more code.

1.4 Multiline

The Multiline property of the TabControl control is used to specify whether the Tab page can be displayed in multiple lines. When the Multiline property is set to True, the tab page in the TabControl can be displayed in multiple lines, otherwise the tab page can only be displayed in a single line.

Use the following steps to set the Multiline property of the TabControl control in Winform:

1. Add a TabControl control to the form.
2. Open the properties window and set the Multiline property of the TabControl control to True.
3. Add the tab pages in the TabControl control to the TabPages collection.
4. Run the program and you can see the tabs displayed in multiple lines.

For example, the following sample code demonstrates how to set the Multiline property of the TabControl control in Winform:

private void Form1_Load(object sender, EventArgs e)
{
    
    
    // 创建TabControl控件
    var tabControl = new TabControl();
    tabControl.Multiline = true; // 设置Multiline属性为True

    // 添加标签页
    var tabPage1 = new TabPage("标签页1");
    var tabPage2 = new TabPage("标签页2");
    var tabPage3 = new TabPage("标签页3");
    var tabPage4 = new TabPage("标签页4");
    tabControl.TabPages.AddRange(new TabPage[] {
    
     tabPage1, tabPage2, tabPage3, tabPage4 });
	tabControl.TabPages.AddRange(new TabPage[] {
    
     tabPage1, tabPage2, tabPage3, tabPage4 });
	tabControl.TabPages.AddRange(new TabPage[] {
    
     tabPage1, tabPage2, tabPage3, tabPage4 });
	tabControl.TabPages.AddRange(new TabPage[] {
    
     tabPage1, tabPage2, tabPage3, tabPage4 });
    // 添加TabControl控件到窗体
    this.Controls.Add(tabControl);
}

1.5 SelectedIndex和SelectedTab

The TabControl control is one of the commonly used frame controls in WinForm. It can be used to create multiple tabs, and different controls can be placed in each tab. When using the TabControl control, you often need to use the SelectedIndex and SelectedTab properties.

The SelectedIndex property represents the serial number of the currently selected tab (starting from 0). You can change the selected tab by setting SelectedIndex. For example, the following code sets the second tab of the TabControl control to the currently selected tab:

tabControl1.SelectedIndex = 1;

The SelectedTab property represents the currently selected tab, which can be changed by setting SelectedTab. For example, the following code sets the tab named "tabPage2" of the TabControl control as the currently selected tab:

tabControl1.SelectedTab = tabPage2;

It should be noted that the settings of the SelectedIndex and SelectedTab properties affect each other, that is, if SelectedIndex is set, SelectedTab will change accordingly, and vice versa.

In addition, the SelectedIndexChanged event can also be used in the TabControl control to respond to tab change events. For specific implementation, please refer to the following code:

private void tabControl1_SelectedIndexChanged(object sender, EventArgs e)
{
    
    
    Console.WriteLine("当前选中的选项卡序号为：" + tabControl1.SelectedIndex);
    Console.WriteLine("当前选中的选项卡名称为：" + tabControl1.SelectedTab.Name);
}

1.6 TabPages

The TabControl control is one of the commonly used controls in Winform. It provides a method to organize and manage application forms by placing multiple forms or controls in a separate form. The function of the TabControl control's TabPages property is to get or set the collection of all TabPage objects of the TabControl control.

Here is some sample code using the TabPages property of the TabControl control:

1. Add a TabPage object

TabControl1.TabPages.Add("TabPage1");

2. Traverse all TabPage objects in TabControl

foreach (TabPage tp in TabControl1.TabPages)
{
    
    
    // 进行操作
}

3. Delete a TabPage object in TabControl

TabControl1.TabPages.RemoveByKey("TabPage1");

4. Get the currently selected TabPage object of the TabControl control

TabPage currentTabPage = TabControl1.SelectedTab;

The above sample code demonstrates the basic usage of the TabPages property of the TabControl control, and can be further developed according to specific needs.

2. Common scenarios

The TabControl control is commonly used in the following scenarios in Winform:

1. To manage multiple related views or functional modules, for example, if there are multiple different pages in a software, you can use TabControl to separate these pages to facilitate user switching.

2. Display information at different stages or states. For example, in a form, you can use TabControl to group and display information at different stages, allowing users to more clearly understand the structure and content of the form.

3. Manage different setting options. For example, if there are many setting options in an application, you can use TabControl to classify and manage these options.

4. Interactive view switching, for example, in a game, you can use TabControl to switch different game modes and display different game views.

The TabControl control can help developers better manage and organize the various modules and views of the application, and improve the user's interactive experience.

3. Specific cases

The following is a simple TabControl control example that shows how to use the TabControl control to create an application with multiple tabs:

1. Create a new Winform application project in Visual Studio.

2. Drag and drop a TabControl control onto the form.

3. Add multiple tabs to the TabControl control, which can be edited in the designer or added in code.

   tabControl1.TabPages.Add(new TabPage("Page 1"));
   tabControl1.TabPages.Add(new TabPage("Page 2"));
   tabControl1.TabPages.Add(new TabPage("Page 3"));
   

4. Add controls to each tab. You can add different controls according to your needs, such as buttons, text boxes, labels, etc.

5. Switching between different tabs can be controlled through the SelectedIndex or SelectedTab properties, for example:

   // 通过索引切换
   tabControl1.SelectedIndex = 1;
   // 通过选项卡对象切换
   tabControl1.SelectedTab = tabPage1;
   

6. You can achieve tab wrap display by setting the Multiline property, for example:

   tabControl1.Multiline = true;
   

The complete code is as follows:

using System;
using System.Windows.Forms;

namespace TabControlDemo
{
    
    
    public partial class Form1 : Form
    {
    
    
        public Form1()
        {
    
    
            InitializeComponent();

            // 添加选项卡
            tabControl1.TabPages.Add(new TabPage("Page 1"));
            tabControl1.TabPages.Add(new TabPage("Page 2"));
            tabControl1.TabPages.Add(new TabPage("Page 3"));

            // 在第一个选项卡中添加一个按钮控件
            var button1 = new Button();
            button1.Text = "Button 1";
            button1.Location = new System.Drawing.Point(10, 10);
            tabControl1.TabPages[0].Controls.Add(button1);

            // 在第二个选项卡中添加一个标签控件
            var label1 = new Label();
            label1.Text = "Label 1";
            label1.Location = new System.Drawing.Point(10, 10);
            tabControl1.TabPages[1].Controls.Add(label1);

            // 在第三个选项卡中添加一个文本框控件
            var textBox1 = new TextBox();
            textBox1.Location = new System.Drawing.Point(10, 10);
            tabControl1.TabPages[2].Controls.Add(textBox1);

            // 设置选项卡换行显示
            tabControl1.Multiline = true;
        }
    }
}