TabControl 多选项卡容器控件

TabControl 多选项卡容器控件

TabControl 是一个多选项卡的容器控件，可以在一个窗体中通过多个选项卡切换不同的内容区域。

基本使用

在窗体上拖拽 TabControl 后，默认有两个选项卡（TabPage）。可以在设计器中右键添加或移除选项卡，也可以在后台代码中动态操作。

动态添加选项卡

private void button1_Click_1(object sender, EventArgs e)
{
    this.tabControl1.TabPages.Add("新选项卡");
}Code language: JavaScript (javascript)

也可以创建 TabPage 对象后添加，设置更多属性：

TabPage tabPage = new TabPage();
tabPage.Text = "选项卡 " + (tabControl1.TabPages.Count + 1);
tabPage.Name = "tabPage" + tabControl1.TabPages.Count;
this.tabControl1.TabPages.Add(tabPage);Code language: JavaScript (javascript)

动态移除选项卡

// 移除当前选中的选项卡
private void button2_Click(object sender, EventArgs e)
{
    if (this.tabControl1.TabPages.Count > 0)
    {
        this.tabControl1.TabPages.Remove(this.tabControl1.SelectedTab);
    }
}

// 按索引移除
this.tabControl1.TabPages.RemoveAt(0);

// 清空所有选项卡
this.tabControl1.TabPages.Clear();Code language: JavaScript (javascript)

在选项卡中添加控件

每个 TabPage 都是一个独立的容器，可以像 Panel 一样往里面添加其他控件：

Button btn = new Button();
btn.Text = "按钮";
btn.Location = new Point(10, 10);
this.tabControl1.TabPages[0].Controls.Add(btn);Code language: JavaScript (javascript)

常用属性

属性	说明
TabPages	选项卡页集合
SelectedIndex	当前选中选项卡的索引（从 0 开始）
SelectedTab	当前选中的选项卡页对象
Alignment	选项卡显示位置（Top、Bottom、Left、Right）
Appearance	选项卡外观样式（Normal、Buttons、FlatButtons）
Multiline	是否允许多行显示选项卡
SizeMode	选项卡大小模式（Normal、FillToRight、Fixed）
ItemSize	选项卡尺寸（配合 SizeMode = Fixed 使用）
HotTrack	鼠标悬停时是否高亮选项卡
ShowToolTips	是否显示选项卡的工具提示

this.tabControl1.Alignment = TabAlignment.Bottom;      // 选项卡显示在底部
this.tabControl1.Appearance = TabAppearance.FlatButtons; // 扁平按钮样式
this.tabControl1.Multiline = true;                     // 允许多行
this.tabControl1.SizeMode = TabSizeMode.Fixed;
this.tabControl1.ItemSize = new Size(100, 30);          // 固定选项卡大小Code language: JavaScript (javascript)

获取当前选项卡

private void button3_Click(object sender, EventArgs e)
{
    MessageBox.Show("当前选项卡：" + this.tabControl1.SelectedTab.Text);
    MessageBox.Show("当前索引：" + this.tabControl1.SelectedIndex);
}Code language: JavaScript (javascript)

常用事件

事件	说明
SelectedIndexChanged	选中选项卡改变时触发
Selecting	选项卡正在切换时触发（可取消）
Selected	选项卡切换完成后触发
Deselecting	选项卡正在取消选中时触发（可取消）
Deselected	选项卡取消选中后触发

private void tabControl1_SelectedIndexChanged(object sender, EventArgs e)
{
    MessageBox.Show("切换到：" + this.tabControl1.SelectedTab.Text);
}

private void tabControl1_Selecting(object sender, TabControlCancelEventArgs e)
{
    // 阻止切换到某个选项卡
    if (e.TabPage.Text == "禁止访问")
    {
        e.Cancel = true;
        MessageBox.Show("无权访问该选项卡！");
    }
}Code language: JavaScript (javascript)

为选项卡添加图标

需要配合 ImageList 使用：

this.tabControl1.ImageList = this.imageList1;
this.tabControl1.TabPages[0].ImageIndex = 0;
this.tabControl1.TabPages[1].ImageKey = "settings";Code language: JavaScript (javascript)

与 Panel 切换的对比

对比项	TabControl	Panel + 按钮切换
切换方式	点击选项卡自动切换	需手动编写按钮事件
视觉表现	自带选项卡头部	需自行设计导航
适合场景	设置页、多模块切换	简单的内容切换
推荐度	推荐	灵活性更高但工作量大