【WinForm UI控件系列】tabControlMenu菜单面板容器，TabControl的扩展功能版，支持左右布局、支持菜单展开收起

TabControlMenu 是一个自定义的 Windows Forms 控件，提供类似系统 TabControl 的功能，但采用侧边菜单导航的方式（支持左右布局）。用户可以通过属性窗口管理页面集合，拖放子控件到内容页面中。

功能特性

• 📄 多页面管理：支持添加/删除多个内容页面
• 🎨 设计时可视化：设计模式下页面区域显示浅蓝色背景，便于识别
• 🖱️ 拖放支持：支持将子控件拖放到指定的内容页面中
• 📝 自动命名 ：新页面自动命名为 tabPage1、tabPage2 等格式
• 🔗 关联删除 ：删除 TabControlMenu 时，关联的 TabContentPage 对象一并删除
• 📍 灵活布局：支持菜单居左或居右，使用 Dock 布局自动管理
• 🎨 主题支持：支持多种预设颜色主题（Primary、Success、Warning、Error、Info）
• 🌓 明暗模式：支持 Light/Dark 主题模式切换
• 🔒 防拖动设计：TabContentPage 使用 Dock=Fill，设计模式下不可拖动

一、效果图

二、说明文档

TabControlMenu 控件

概述

TabControlMenu 是一个自定义的 Windows Forms 控件，提供类似系统 TabControl 的功能，但采用侧边菜单导航的方式。用户可以通过属性窗口管理页面集合，拖放子控件到内容页面中。

功能特性

• 📄 多页面管理：支持添加/删除多个内容页面
• 🎨 设计时可视化：设计模式下页面区域显示浅蓝色背景，便于识别
• 🖱️ 拖放支持：支持将子控件拖放到指定的内容页面中
• 📝 自动命名 ：新页面自动命名为 tabPage1、tabPage2 等格式
• 🔗 关联删除 ：删除 TabControlMenu 时，关联的 TabContentPage 对象一并删除
• 📍 灵活布局：支持菜单居左或居右，使用 Dock 布局自动管理
• 🎨 主题支持：支持多种预设颜色主题（Primary、Success、Warning、Error、Info）
• 🌓 明暗模式：支持 Light/Dark 主题模式切换
• 🔒 防拖动设计：TabContentPage 使用 Dock=Fill，设计模式下不可拖动

属性说明

布局属性

属性	类型	默认值	说明
MenuPosition	DockStyle	Left	菜单位置（Left 或 Right）
MenuWidth	int	200	展开状态下的菜单宽度
CollapsedWidth	int	50	收缩状态下的菜单宽度

页面管理属性

属性	类型	默认值	说明
Pages	TabContentPageCollection	-	页面集合，用于管理所有内容页面
SelectedIndex	int	0	当前选中页面的索引

颜色主题属性

属性	类型	默认值	说明
MenuColorType	ColorType	Default	菜单颜色类型（Default/Primary/Success/Warning/Error/Info）
ThemeMode	TMode	Light	主题模式（Light/Dark）

菜单外观属性

属性	类型	默认值	说明
MenuBackColor	Color	#303946	菜单背景颜色
MenuTextColor	Color	#C8C8C8	菜单文字颜色
MenuTextHoverColor	Color	White	菜单悬停文字颜色
MenuTextSelectedColor	Color	White	选中菜单项文字颜色
MenuHoverColor	Color	#3C4655	菜单项悬停背景色
MenuSelectedColor	Color	#1E9FFF	选中菜单项背景色
BorderColor	Color	#C8C8C8	边框颜色
IndicatorWidth	int	3	选中指示器宽度（1-10 像素）
IndicatorColorSelected	Color	White	选中指示器颜色
IconColor	Color	White	图标颜色

内容区域属性

属性	类型	默认值	说明
ContentBackColor	Color	White	内容区域背景颜色

使用方法

1. 添加控件到窗体

从工具箱拖放 TabControlMenu 控件到窗体上。

2. 添加内容页面

1. 选中 TabControlMenu 控件
2. 在属性窗口中找到 Pages 属性
3. 点击省略号按钮 (...) 打开集合编辑器
4. 点击 Add 按钮添加新页面
5. 页面会自动命名为 tabPage1、tabPage2 等

3. 设置菜单位置

在属性窗口中设置 MenuPosition 属性：

• Left：菜单在左侧（默认）
• Right：菜单在右侧

4. 应用颜色主题

在属性窗口中设置：

1. MenuColorType：选择颜色类型（Primary/Success/Warning/Error/Info）
2. ThemeMode：选择主题模式（Light/Dark）

系统会自动应用匹配的颜色方案。

自定义颜色：

• 设置 MenuColorType = Default 后，可以单独设置各个颜色属性

5. 拖放子控件到页面

直接从工具箱拖放控件（如 Button、Label 等）到右侧内容区域，控件会自动添加到当前选中的页面中。

生成的代码示例：

private AntdUIEx.Controls.TabControlMenu.TabControlMenu tabControlMenu1;
private AntdUIEx.Controls.TabControlMenu.TabControlMenu.TabContentPage tabContentPage1;
private AntdUIEx.Controls.ButtonEx buttonEx1;

// 初始化页面
tabContentPage1 = new AntdUIEx.Controls.TabControlMenu.TabControlMenu.TabContentPage();
tabContentPage1.Name = "tabContentPage1";
tabContentPage1.PageText = "tabPage1";

// 添加按钮到页面
buttonEx1 = new AntdUIEx.Controls.ButtonEx();
tabContentPage1.Controls.Add(buttonEx1);  // ✅ 按钮添加到页面容器

// 添加页面到控件
tabControlMenu1.Controls.Add(tabContentPage1);
tabControlMenu1.Pages.Add(tabContentPage1);

6. 运行时切换页面

// 方法1：通过 SelectedIndex 切换
tabControlMenu1.SelectedIndex = 1;

// 方法2：通过 SelectPage 方法切换
tabControlMenu1.SelectPage(1);

7. 访问页面控件

// 获取当前选中页面
var currentPage = tabControlMenu1.Pages[tabControlMenu1.SelectedIndex];

// 遍历页面中的控件
foreach (Control ctrl in currentPage.Controls)
{
    // 处理控件
}

设计时注意事项

1. 页面可见性：设计模式下所有页面都可见（浅蓝色背景），便于拖放控件
2. 选中状态：点击左侧菜单项可以切换当前选中的页面
3. 菜单位置 ：可以通过 MenuPosition 属性调整菜单在左侧或右侧
4. 防拖动 ：TabContentPage 使用 Dock=Fill，设计模式下不可拖动，但可以拖放子控件到页面中
5. 删除控件 ：删除 TabControlMenu 时，所有关联的 TabContentPage 对象会一并删除
6. 缓存清理：如果属性窗口不显示省略号按钮，需要关闭 Visual Studio 并清除缓存目录

缓存清理方法

如果属性窗口中的 Pages 属性不显示省略号按钮，请按以下步骤操作：

1. 关闭 Visual Studio
2. 删除以下目录（根据你的 VS 版本调整路径）：
   • C:\Users\{用户名}\AppData\Local\Microsoft\VisualStudio\{版本号}\Designer\ShadowCache
   • C:\Users\{用户名}\AppData\Local\Microsoft\VisualStudio\{版本号}\ComponentModelCache
3. 重新打开项目并重建解决方案

技术实现要点

1. 布局架构 ：使用 Dock 布局管理菜单和内容区域，MenuPanel 负责菜单渲染
2. 集合类型 ：TabContentPageCollection 继承自 Collection<T> 并实现 IList 接口，确保设计器正确识别
3. 设计器集成 ：通过 DesignerSerializationVisibility.Content 特性确保页面集合被正确序列化
4. 拖放支持 ：TabContentPage 使用 ParentControlDesigner 支持设计时拖放
5. 关联组件：通过设计器事件确保删除控件时关联页面一并删除
6. 主题系统 ：集成 ThemeColors 系统，支持多种预设颜色主题和明暗模式

版本历史

版本	变更说明
1.0	初始版本
1.1	修复 Pages 属性不显示编辑按钮问题
1.2	修复页面命名规则问题
1.3	修复删除控件时页面残留问题
1.4	修复设计时页面背景色不显示问题
2.0	重构布局架构，使用 Dock 布局，添加 MenuPosition 属性
2.1	添加颜色主题支持（MenuColorType、ThemeMode）
2.2	添加指示器宽度属性（IndicatorWidth）
2.3	修复 SelectPage 方法菜单不同步问题
2.4	完善属性默认值设置

相关类

TabContentPage

内容页面类，继承自 Panel，作为页面内容容器。

属性

属性	类型	默认值	说明
PageText	string	"tabPage"	页面显示文本（菜单中显示的名称）

TabContentPageCollection

页面集合类，管理多个 TabContentPage 对象。

方法

方法	说明
Add(TabContentPage)	添加页面到集合
Remove(TabContentPage)	从集合中移除页面
Clear()	清空所有页面
Insert(int, TabContentPage)	在指定位置插入页面

MenuPanel

菜单面板类，负责菜单的渲染和交互处理。

功能

• 绘制菜单项（支持左/右两种布局）
• 处理鼠标悬停和点击事件
• 支持指示器显示
• 支持图标显示

三、后记

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