syncfusion-winforms-tabcontrol

实现选项卡控件（TabControlAdv）

TabControlAdv 是一种高级 Windows Forms 选项卡控件，可通过紧凑的选项卡界面组织可视化内容。它扩展了标准 TabControl，提供丰富的外观自定义、导航功能、编辑能力和样式选项。

何时使用此技能

在以下情况下使用此技能：

• 在 Windows Forms 应用程序中实现选项卡界面
• 添加包含多个 TabPageAdv 项的 TabControlAdv
• 自定义选项卡外观、颜色、字体或样式
• 启用选项卡编辑、拖放或关闭按钮
• 使用 TabPrimitives 配置选项卡导航
• 处理选项卡事件（选择、关闭、编辑等）
• 为选项卡应用 Office、Metro 或 Visual Studio 主题
• 实现滚动、工具提示或多行选项卡
• 跨会话保存选项卡状态（顺序、活动页）

组件概述

TabControlAdv 提供：

• 选项卡对齐：顶部、底部、左侧、右侧定位
• 导航支持：通过 TabPrimitives 实现第一个、最后一个、下一个和上一个选项卡的导航
• 编辑支持：在运行时编辑选项卡标题文本
• 图标支持：在选项卡标题中显示图像
• 拖放：通过拖放重新排列选项卡
• 关闭按钮：为选项卡设置单独或全局关闭按钮
• 工具提示：为选项卡提供标准工具提示和 SuperToolTips
• 样式：15 种以上内置主题（2D、3D、Metro、Office、VS 样式）
• 序列化：保存和加载选项卡状态
• 滚动：选项卡溢出时平滑滚动

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 程序集部署和 NuGet 包
• 通过设计器添加 TabControlAdv
• 在代码中手动添加控件
• 创建和添加选项卡（TabPageAdv）
• 向选项卡页添加控件
• 基本选项卡位置配置

对齐和布局

📄 阅读： references/alignment-layout.md

• 选项卡对齐（顶部、底部、左侧、右侧）
• 选项卡内的文本对齐
• 多行选项卡支持
• RTL（从右到左）支持
• 旋转选项卡和文本
• TabGap 间距

外观和自定义

📄 阅读： references/appearance-customization.md

• 背景颜色和图像
• 活动和非活动选项卡颜色
• 字体和前景色设置
• 边框样式和颜色
• 选项卡样式（2D、3D、Metro、Office 主题）
• SizeMode 选项（Normal、Fixed、ShrinkToFit、FillToRight）

交互功能

📄 阅读： references/interactive-features.md

• 关闭按钮设置
• 工具提示和 SuperTooltip 支持
• 滚动按钮和滚动条
• 中键单击关闭选项卡
• 自动滚动配置

选项卡导航

📄 阅读： references/tab-navigation.md

• TabPrimitives 概述
• 导航控件类型（FirstTab、LastTab、NextTab、PreviousTab 等）
• DropDown 和 Close 基元
• 自定义基元
• 通过编程方式创建 TabPrimitives

自定义和编辑

📄 阅读： references/customization-editing.md

• 在运行时重命名选项卡标题（LabelEdit）
• 拖放重新排序选项卡（UserMoveTabs）
• 内边距和间距
• 选项卡页边框样式
• 选项卡中的动画 GIF 图像
• 禁止移动特定选项卡

序列化

📄 阅读： references/serialization.md

• PersistTabState 属性
• 自动保存选项卡状态
• 保存选项卡顺序和活动页

事件和事件处理

📄 阅读： references/events.md

• 编辑事件（BeforeEdit、AfterEdit）
• 选择事件（SelectedIndexChanging、SelectedIndexChanged）
• 选项卡基元单击事件
• 用于自定义渲染的 DrawItem
• 选项卡页事件（Closed、Closing）
• 其他事件（Paint、BackgroundImageChanged 等）

快速入门示例

基本实现

using Syncfusion.Windows.Forms.Tools;

// Create TabControlAdv
TabControlAdv tabControlAdv1 = new TabControlAdv();
tabControlAdv1.Size = new Size(400, 300);

// Create and add tab pages
TabPageAdv tabPage1 = new TabPageAdv();
tabPage1.Text = "Home";
tabPage1.ImageIndex = 0; // Optional icon

TabPageAdv tabPage2 = new TabPageAdv();
tabPage2.Text = "Settings";

tabControlAdv1.TabPages.Add(tabPage1);
tabControlAdv1.TabPages.Add(tabPage2);

// Add to form
this.Controls.Add(tabControlAdv1);

使用样式和功能

// Apply Office 2016 theme
tabControlAdv1.TabStyle = typeof(TabRendererOffice2016Colorful);

// Enable features
tabControlAdv1.ShowTabCloseButton = true;
tabControlAdv1.UserMoveTabs = true;
tabControlAdv1.LabelEdit = true;
tabControlAdv1.ShowToolTips = true;

// Customize appearance
tabControlAdv1.ActiveTabColor = Color.FromArgb(255, 255, 255);
tabControlAdv1.InactiveTabColor = Color.FromArgb(240, 240, 240);
tabControlAdv1.ActiveTabFont = new Font("Segoe UI", 9F, FontStyle.Bold);

常见模式

模式 1：选项卡式文档界面

// Create tab control for documents
TabControlAdv documentTabs = new TabControlAdv();
documentTabs.Dock = DockStyle.Fill;
documentTabs.ShowTabCloseButton = true;
documentTabs.ShowCloseButtonForActiveTabOnly = true;

// Add document tabs dynamically
void AddDocumentTab(string title, Control content)
{
    TabPageAdv docTab = new TabPageAdv();
    docTab.Text = title;
    docTab.Controls.Add(content);
    content.Dock = DockStyle.Fill;
    documentTabs.TabPages.Add(docTab);
    documentTabs.SelectedTab = docTab;
}

// Handle tab closing
documentTabs.SelectedTab.Closing += (sender, e) =>
{
    var result = MessageBox.Show("Save changes?", "Close", 
        MessageBoxButtons.YesNoCancel);
    if (result == DialogResult.Cancel)
        e.Cancel = true;
};

模式 2：带图标的导航选项卡

// Setup image list
ImageList tabImages = new ImageList();
tabImages.Images.Add("home", Properties.Resources.HomeIcon);
tabImages.Images.Add("settings", Properties.Resources.SettingsIcon);
tabControlAdv1.ImageList = tabImages;

// Create tabs with icons
TabPageAdv homeTab = new TabPageAdv();
homeTab.Text = "Home";
homeTab.ImageIndex = 0;

TabPageAdv settingsTab = new TabPageAdv();
settingsTab.Text = "Settings";
settingsTab.ImageIndex = 1;

// Configure alignment
tabControlAdv1.ImageAlignmentR = RelativeImageAlignment.LeftOfText;

模式 3：选项卡导航控件

// Enable navigation primitives
tabControlAdv1.TabPrimitivesHost.Visible = true;

// Add navigation buttons
tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(
    new TabPrimitive(TabPrimitiveType.FirstTab, null, Color.Empty, true, 1, "First"));
tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(
    new TabPrimitive(TabPrimitiveType.PreviousTab, null, Color.Empty, true, 1, "Previous"));
tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(
    new TabPrimitive(TabPrimitiveType.NextTab, null, Color.Empty, true, 1, "Next"));
tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(
    new TabPrimitive(TabPrimitiveType.LastTab, null, Color.Empty, true, 1, "Last"));
tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(
    new TabPrimitive(TabPrimitiveType.DropDown, null, Color.Empty, true, 1, "DropDown"));

模式 4：处理选项卡选择

// Prevent selection of specific tab
tabControlAdv1.SelectedIndexChanging += (sender, e) =>
{
    if (e.NewSelectedIndex == 2) // Prevent selecting 3rd tab
    {
        e.Cancel = true;
        MessageBox.Show("This tab is disabled");
    }
};

// React to selection changes
tabControlAdv1.SelectedIndexChanged += (sender, e) =>
{
    var selectedTab = tabControlAdv1.SelectedTab;
    Console.WriteLine($"Selected tab: {selectedTab.Text}");
    // Load content for selected tab
};

关键属性

核心属性

属性	类型	说明
TabPages	Collection	TabPageAdv 项的集合
SelectedIndex	int	当前选定选项卡的索引
SelectedTab	TabPageAdv	当前选定的选项卡页
Alignment	TabAlignment	选项卡位置（Top、Bottom、Left、Right）
Multiline	bool	允许选项卡显示在多行中

外观属性

属性	类型	说明
TabStyle	Type	主题渲染器（2D、3D、Metro、Office、VS 样式）
ActiveTabColor	Color	活动选项卡的背景颜色
InactiveTabColor	Color	非活动选项卡的背景颜色
ActiveTabFont	Font	活动选项卡文本的字体
SizeMode	TabSizeMode	选项卡大小模式

功能属性

属性	类型	说明
ShowTabCloseButton	bool	在选项卡上显示关闭按钮
UserMoveTabs	bool	启用拖放重新排列选项卡
LabelEdit	bool	启用运行时选项卡文本编辑
ShowToolTips	bool	在选项卡上启用工具提示
ShowScroll	bool	选项卡溢出时显示滚动按钮

导航属性

属性	类型	说明
TabPrimitivesHost	TabPrimitivesHost	导航按钮的容器
SwitchPagesForDialogKeys	bool	启用 Ctrl+Tab 导航

常见用例

用例 1：应用程序设置对话框

创建一个带有“常规”“外观”“高级”等类别的选项卡式设置对话框：

• 使用 Alignment = TabAlignment.Left 创建垂直选项卡
• 使用 TabStyle 应用统一样式
• 使用 ImageList 为选项卡添加图标

用例 2：多文档编辑器

构建一个带有可关闭选项卡的文档编辑器：

• 启用 ShowTabCloseButton = true
• 处理 Closing 事件，提示用户保存未保存的更改
• 使用 UserMoveTabs = true 重新排列选项卡

用例 3：向导界面

创建一个禁用选项卡选择的分步向导：

• 使用 SelectedIndexChanging 控制导航
• 应用自定义颜色以显示进度
• 根据向导流程显示或隐藏选项卡

用例 4：分区式仪表板

将仪表板内容整理为不同分区：

• 使用 Multiline = true 显示多个选项卡
• 应用 SizeMode.FillToRight 使选项卡宽度一致
• 启用 ShowScroll 处理溢出

程序集引用

必需的程序集：

• Syncfusion.Shared.Base.dll
• Syncfusion.Shared.Windows.dll
• Syncfusion.Tools.Base.dll
• Syncfusion.Tools.Windows.dll

若要在选项卡中使用 Grid 控件，还需添加：

• Syncfusion.Grid.Base.dll
• Syncfusion.Grid.Windows.dll