【WinForm UI控件系列】tabControl控件、支持4方位显示、标签支持鼠标滚动、支持新增、支持关闭

久爱物联网2026-05-23 9:34

TabControl 是一个增强型标签页控件，支持多标签管理、添加/关闭标签、标签位置调整、分割线显示、激活指示线等功能。此控件与tabControlMenu类似，用途场景不同。

功能特性

  • 标签页管理：支持添加、关闭、切换标签页
  • 标签位置：支持顶部、底部、左侧、右侧四种位置
  • 分割线显示：可配置是否显示标签之间的分割线
  • 激活指示线：支持显示/隐藏激活标签的底部指示线
  • 标签尺寸：支持自定义标签高度和宽度
  • 首页保护：首页标签默认不允许关闭
  • 图标支持：标签支持显示图标
  • 颜色主题：支持自定义边框颜色、背景色、文字颜色等
  • 事件支持：提供标签切换、关闭、添加等事件
  • 滚动支持：标签过多时自动支持滚动

类似控件：tabControlMenu

一、示例





二、使用说明

TabControl 控件

TabControl 是一个增强型标签页控件，支持多标签管理、添加/关闭标签、标签位置调整、分割线显示、激活指示线等功能。

功能特性

  • 标签页管理：支持添加、关闭、切换标签页
  • 标签位置：支持顶部、底部、左侧、右侧四种位置
  • 分割线显示：可配置是否显示标签之间的分割线
  • 激活指示线：支持显示/隐藏激活标签的底部指示线
  • 标签尺寸：支持自定义标签高度和宽度
  • 首页保护：首页标签默认不允许关闭
  • 图标支持：标签支持显示图标
  • 颜色主题：支持自定义边框颜色、背景色、文字颜色等
  • 事件支持：提供标签切换、关闭、添加等事件
  • 滚动支持：标签过多时自动支持滚动

快速开始

最简单的使用示例

csharp 复制代码 
// 创建并配置 TabControl
var tabControl = new TabControl
{
    Dock = DockStyle.Fill,
    TabPosition = TabPosition.Top,
    ShowDivider = true,
    ShowIndicator = true
};

// 添加几个标签页
tabControl.TabPages.Add(new TabPage("首页"));
tabControl.TabPages.Add(new TabPage("文档"));
tabControl.TabPages.Add(new TabPage("设置"));

// 添加到窗体
this.Controls.Add(tabControl);

带图标的完整示例

csharp 复制代码 
var tabControl = new TabControl
{
    Dock = DockStyle.Fill,
    TabHeight = 50,
    TabWidth = 150,
    TabPosition = TabPosition.Top,
    ShowDivider = true,
    ShowIndicator = true,
    IndicatorColor = Color.FromArgb(0, 132, 255),
    IndicatorWidth = 3,
    BorderColor = Color.FromArgb(200, 200, 200),
    TabBackColor = Color.White,
    TabForeColor = Color.FromArgb(51, 51, 51),
    DividerColor = Color.FromArgb(240, 240, 240)
};

// 添加标签页
tabControl.TabPages.Add(new TabPage("首页"));
tabControl.TabPages.Add(new TabPage("文档"));
tabControl.TabPages.Add(new TabPage("设置"));

// 设置选中标签
tabControl.SelectedIndex = 0;

this.Controls.Add(tabControl);

使用方式

方式一：设计器设置

  1. 从工具箱拖动 TabControl 到窗体
  2. 设置 Dock 属性为 Fill（通常填充整个容器）
  3. 在属性窗口设置相关属性
  4. 在 Load 事件中添加初始标签页

方式二：代码设置

csharp 复制代码 
// 创建 TabControl 实例
TabControl tabControl1 = new TabControl();

// 设置基本属性
tabControl1.Dock = DockStyle.Fill;
tabControl1.TabPosition = TabPosition.Top;
tabControl1.TabHeight = 50;
tabControl1.TabWidth = 150;

// 设置外观属性
tabControl1.ShowDivider = true;
tabControl1.ShowIndicator = true;
tabControl1.BorderWidth = 1;
tabControl1.Padding = 0;

// 添加到窗体
this.Controls.Add(tabControl1);

标签页操作

添加标签页

csharp 复制代码 
// 添加普通标签页
tabControl1.TabPages.Add(new TabPage("标签页1"));

// 添加后设置选中
tabControl1.SelectedIndex = tabControl1.TabPages.Count - 1;

关闭标签页

csharp 复制代码 
// 关闭指定索引的标签页
tabControl1.TabPages.RemoveAt(1);

// 在事件中取消关闭
private void tabControl1_TabClosing(object sender, EventArgs e)
{
    // 取消关闭操作（需要事件支持）
}

切换标签页

csharp 复制代码 
// 通过索引切换
tabControl1.SelectedIndex = 0;

事件说明

事件名 参数类型 说明
SelectedIndexChanged EventArgs 标签切换时触发
TabAdded EventArgs 标签添加后触发
TabRemoved EventArgs 标签移除后触发

事件使用示例

csharp 复制代码 
// 标签切换事件
private void tabControl1_SelectedIndexChanged(object sender, EventArgs e)
{
    Console.WriteLine($"当前选中标签: {tabControl1.SelectedIndex}");
}

主要属性

布局属性

属性名 类型 默认值 说明
TabPosition TabPosition Top 标签位置（Top/Bottom/Left/Right）
BorderWidth int 1 边框宽度
Padding int 0 内边距
TabHeight int 50 标签高度
TabWidth int 150 标签宽度（自适应时为最小宽度）

外观属性

属性名 类型 默认值 说明
BorderColor Color RGB(200, 200, 200) 边框颜色
TabBackColor Color White 标签背景色
TabActiveBackColor Color White 激活标签背景色
TabForeColor Color RGB(51, 51, 51) 标签文字颜色
TabActiveForeColor Color RGB(51, 51, 51) 激活标签文字颜色
DividerColor Color RGB(240, 240, 240) 分割线颜色
HeaderBottomLineColor Color RGB(220, 220, 220) 标签栏底部线颜色
IndicatorColor Color RGB(0, 132, 255) 激活标签指示线颜色
CloseButtonColor Color RGB(102, 102, 102) 关闭按钮颜色
CloseButtonHoverColor Color RGB(255, 87, 87) 关闭按钮悬停颜色
TabFont Font Microsoft YaHei, 11pt 标签字体

功能属性

属性名 类型 默认值 说明
ShowCloseButton bool true 是否显示关闭按钮
ShowAddButton bool true 是否显示添加按钮
ShowDivider bool false 是否显示分割线
ShowIndicator bool true 是否显示激活标签指示线
AllowCloseFirstTab bool false 是否允许关闭首页
SelectedIndex int 0 当前选中的标签索引
IndicatorWidth int 3 激活标签指示线宽度

标签位置说明

支持的位置

位置 说明
Top 标签显示在顶部（默认）
Bottom 标签显示在底部
Left 标签显示在左侧
Right 标签显示在右侧

设置标签位置

csharp 复制代码 
// 设置标签位置为顶部
tabControl1.TabPosition = TabPosition.Top;

// 设置标签位置为底部
tabControl1.TabPosition = TabPosition.Bottom;

// 设置标签位置为左侧
tabControl1.TabPosition = TabPosition.Left;

// 设置标签位置为右侧
tabControl1.TabPosition = TabPosition.Right;

分割线设置

csharp 复制代码 
// 显示分割线
tabControl1.ShowDivider = true;

// 设置分割线颜色
tabControl1.DividerColor = Color.FromArgb(240, 240, 240);

分割线行为

  • 分割线只在标签之间显示
  • 激活标签的左右两侧不会显示分割线
  • 分割线颜色可通过 DividerColor 属性自定义

激活指示线设置

csharp 复制代码 
// 显示激活指示线
tabControl1.ShowIndicator = true;

// 设置指示线颜色
tabControl1.IndicatorColor = Color.FromArgb(0, 132, 255);

// 设置指示线宽度
tabControl1.IndicatorWidth = 3;

完整示例

csharp 复制代码 
public partial class MainForm : Form
{
    public MainForm()
    {
        InitializeComponent();
        InitializeTabControl();
    }

    private void InitializeTabControl()
    {
        // 创建 TabControl
        var tabControl = new TabControl
        {
            Dock = DockStyle.Fill,
            TabPosition = TabPosition.Top,
            TabHeight = 50,
            TabWidth = 150,
            ShowDivider = true,
            ShowIndicator = true,
            IndicatorColor = Color.FromArgb(0, 132, 255),
            IndicatorWidth = 3,
            BorderColor = Color.FromArgb(200, 200, 200),
            TabBackColor = Color.White,
            TabForeColor = Color.FromArgb(51, 51, 51)
        };

        // 绑定事件
        tabControl.SelectedIndexChanged += TabControl_SelectedIndexChanged;

        // 添加默认首页标签（不允许关闭）
        var homeTab = new TabPage("首页");
        tabControl.TabPages.Add(homeTab);

        // 添加更多标签
        tabControl.TabPages.Add(new TabPage("文档"));
        tabControl.TabPages.Add(new TabPage("设置"));

        this.Controls.Add(tabControl);
    }

    private void TabControl_SelectedIndexChanged(object sender, EventArgs e)
    {
        Console.WriteLine($"切换到标签: {((TabControl)sender).SelectedIndex}");
    }
}

注意事项

图标优先级

标签页图标设置（如果支持）：Icon（图片）> IconSvg（SVG）

性能建议

  1. 标签页过多时（>20个），建议分批加载
  2. 频繁切换标签时，可优化内容区域的加载逻辑

设计时注意事项

  1. 控件需要填充容器（Dock = Fill）以获得最佳效果
  2. 设置 TabHeight 建议不小于 45
  3. 设置 TabWidth 建议不小于 150（当标签位置为 Left/Right 时）

属性快速参考

布局类

属性 类型 默认值 说明
TabPosition TabPosition Top 标签位置
BorderWidth int 1 边框宽度
Padding int 0 内边距
TabHeight int 50 标签高度
TabWidth int 150 标签宽度

外观类

属性 类型 默认值 说明
BorderColor Color RGB(200,200,200) 边框颜色
TabBackColor Color White 标签背景色
TabActiveBackColor Color White 激活标签背景色
TabForeColor Color RGB(51,51,51) 标签文字颜色
TabActiveForeColor Color RGB(51,51,51) 激活标签文字颜色
DividerColor Color RGB(240,240,240) 分割线颜色
HeaderBottomLineColor Color RGB(220,220,220) 底部线颜色
IndicatorColor Color RGB(0,132,255) 指示线颜色
CloseButtonColor Color RGB(102,102,102) 关闭按钮颜色
CloseButtonHoverColor Color RGB(255,87,87) 关闭按钮悬停色
TabFont Font Microsoft YaHei, 11pt 标签字体

功能类

属性 类型 默认值 说明
ShowCloseButton bool true 显示关闭按钮
ShowAddButton bool true 显示添加按钮
ShowDivider bool false 显示分割线
ShowIndicator bool true 显示指示线
AllowCloseFirstTab bool false 首页可关闭
SelectedIndex int 0 当前选中索引
IndicatorWidth int 3 指示线宽度

三、后记

陆续完善中，敬请关注，如有需求和好的建议，请留言(xue5zhijing)

相关推荐
久爱物联网2 天前
【WinForm UI控件系列】tabControlMenu菜单面板容器，TabControl的扩展功能版，支持左右布局、支持菜单展开收起
tabcontrol·ui控件·winfrom控件·tabcontrolmenu·tab面板菜单
久爱物联网1 个月前
【WinForm UI控件系列】BarPlot柱状图控件
ui·ui控件·winformui·csharpui控件·桌面ui控件
久爱物联网1 个月前
【WinForm UI控件系列】Breadcrumb 面包屑控件，支持三种样式
ui·breadcrumb·面包屑控件·winformui·csharpui控件·桌面ui控件
微小冷2 年前
WPF实现文字纵向排布的TabItem
wpf·convert·tabcontrol·tabitem·纵向显示
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法04裂开！ChatGPT 居然开始要手机号验证，附详细解决方法05CC-Switch & Claude 基于 Linux 服务器安装使用指南06几个好用的ip纯净度检测网站07装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？08【AI】2026 年具身智能模型和世界模型总结09codex app每次打开重连5次Reconnecting问题解决10用了半年 OpenRouter，我换到了 Ofox.ai — 两个 AI API 聚合平台的真实对比