简介面向Windows Forms/WPF开发者的自定义控件资源解决标准ComboBox仅能单选的问题通过继承ComboBox并集成CheckBox列表实现下拉多选交互适用于配置项选择、权限分配等多选场景也适合中级开发者学习控件扩展思路。资源包共55个文件包含15个C#源码、3个XAML界面定义、可运行的exe/dll及调试所需的pdb、cache等压缩包仅125KB结构精简便于快速定位关键代码。目前已有494人学习下载。内容以MultiSelectComboBox完整工程为主前后台代码分开组织重点演示下拉弹出列表的渲染重写、CheckBox事件处理、数据源同步与选中项更新等核心逻辑同时附带的Demo可直接编译运行帮助读者直观理解自绘控件与数据绑定的配合方式便于迁移到实际项目。 前阵子帮同事处理一个报表筛选功能需求说起来很简单一个下拉框点开之后每一项前面带个 CheckBox勾完把选中的项带回给查询条件。这种带CheckBox功能的ComboBox在业务系统里太常见了——排班表选值班人员、邮件群发选收件人、权限配置选角色几乎每个管理系统都躲不过去。可惜不管是 WinForms 还是 WPF 的原生 ComboBox都只给了你单选的下拉列表想多选就得自己动手。这篇文章我把整个实现思路和踩坑过程完整写一遍。我用的是 WinForms 自绘方案核心技术点可以沉淀成一个可复用的 CheckedComboBox 控件。文章里会讲清楚为什么原生 ComboBox 做不到、为什么我选了 ToolStripDropDown 而不是普通 Form 做弹出层、自绘文本摘要时有哪些隐藏边界以及很多人会踩的点击选项下拉框立刻关闭这个经典问题的排查链路。哪怕你用的是 WPF 或者 Qt这篇文章里的交互设计和坑位同样有参考价值因为这类问题本质上是通用 UI 交互问题。1. 需求拆解原生 ComboBox 为什么做不了多选1.1 被单选模型卡住的业务场景先说需求是怎么来的。报表系统里有个城市筛选下拉框一开始用原生 ComboBox跑了一个月产品经理过来提需求能不能支持多选我第一反应是这不是改个属性就行的事因为 ComboBox 的数据模型在设计之初就是单选的。原生 ComboBox 核心就一个SelectedItem和SelectedIndex这个模型从 Win32 时代到现在都没变过。你让用户选华东地区多个省份原生控件只能给一个结果。当然你可以用CheckedListBox平铺在界面上但页面空间有限一长串 CheckBox 排开非常占地方而且交互上跟下拉选择这种轻量操作差太多。业务方要的是平时收起时只显示一行文字点击后弹出一个列表列表项前面带勾选框勾完点其他地方就能关。这种平时折叠、展开多选的交互原生 ComboBox 的 SelectedItem 模型完全支撑不了必须自定义。1.2 现成商业控件体验好但很多项目用不上当时第一反应是查第三方控件库DevExpress、Telerik 这类商业套件确实有现成的 CheckedComboBox功能很全多选、全选、反选、分隔符都给你做完了。但实际项目里用了商业控件会有一堆麻烦事授权费用、部署体积、跟现有皮肤体系的兼容性更别说有的项目本来就是内部工具压根没有购买商业控件的预算。GitHub 上也有一些开源实现但良莠不齐。我翻了几个不是绑定数据源的时候状态错乱就是界面绘制有 bug还有的直接把 CheckBox 画在固定位置窗口缩放一下就对不齐了。与其去改一个不熟悉的开源控件不如自己写一个反正核心交互并不复杂控制权拿在手里反而好维护。1.3 我的选型结论WinForms 自绘是平衡点我最终选了 WinForms 自绘组合的方案。整个控件分三层外壳用原生 ComboBox 负责边框、焦点、键盘交互和外观一致性弹出层用 ToolStripDropDown 承载一个 CheckedListBox自绘部分只处理关闭状态下如何把多选结果画出来这个问题。这里要说明一下我不是从零画一个控件而是用原生控件做底座只补两块原生控件缺的能力——多选状态存储和下拉弹出层的自定义内容。这样视觉风格、字体、主题色都跟着系统走不用自己去匹配 Windows 的绘制细节兼容性最好代码量也最小。2. 设计思路给下拉面板安一个 CheckedListBox 宿主2.1 核心架构ComboBox 外壳 ToolStripDropDown 弹出层很多第一次做这个的人会陷入一个误区想把 CheckBox 直接画在 ComboBox 自己的下拉列表里。这条路非常难走因为原生下拉列表是系统组件你没法往里塞一个 CheckedListBox只能 OwnerDraw 逐个画 CheckBox 图标但这样就要自己维护鼠标命中、点击区域、滚动条联动做出来的东西还容易跟系统缩放比例打架。我更推荐的做法是组合而不是自绘列表项。ComboBox 本体只负责显示和触发弹出真正的多选列表放在一个独立面板里。这个面板我选的是ToolStripDropDown而不是普通 Form。ToolStripDropDown的好处有两个。第一它天然支持点击外部自动关闭不需要你去监听 Form 的Deactivate事件第二它不会像普通 Form 一样抢主窗口的激活状态焦点处理上干净很多。后面第四部分我会详细说焦点问题这里先记住这个结论用 ToolStripDropDown 做弹层宿主能省掉一半的麻烦。2.2 关键代码CheckedComboBox 的骨架控件骨架大概是这样的public enum SummaryMode { Text, // 显示所有已选项文本 Count // 只显示已选 N 项 } public class CheckedComboBox : ComboBox { private readonly CheckedListBox _listBox; private readonly ToolStripDropDown _popup; private readonly ToolStripControlHost _host; public CheckedComboBox() { DropDownStyle ComboBoxStyle.DropDownList; DrawMode DrawMode.OwnerDrawFixed; MaxDropDownItems 10; _listBox new CheckedListBox { BorderStyle BorderStyle.None, CheckOnClick true, IntegralHeight false, Height 160 }; _host new ToolStripControlHost(_listBox) { AutoSize false, Margin Padding.Empty, Padding Padding.Empty }; _popup new ToolStripDropDown { Padding Padding.Empty, AutoClose true }; _popup.Items.Add(_host); // 外壳需要一个占位项来触发 OnDrawItem Items.Add(string.Empty); SelectedIndex 0; } }注意构造函数里最后两行Items.Add(string.Empty)和SelectedIndex 0。这是自绘方案里的关键技巧为什么需要它第三部分展开讲。CheckedListBox设置CheckOnClick true用户单击列表项就能切换勾选状态不用先选中再点一次复选框交互体验好很多。2.3 为什么不用自绘 CheckBox 图标模拟勾选我见过有人是这么做的在 ComboBox 下拉列表的DrawItem里画一个小方框然后根据一个Listbool决定要不要打勾。这个方案初看工作量不大但一深入你会发现要处理的东西越来越多第一个问题是点击命中。DrawItem只管画不管点你必须自己在OnMouseDown里判断鼠标点到了哪一行、那行的 CheckBox 区域是哪里数据一变还得手动Invalidate。第二个问题是键盘。原生 ComboBox 用方向键上下移动高亮空格键本来是收起下拉你要改成切换勾选就得重写键盘逻辑。第三个问题是状态同步。Listbool和显示文本、业务数据之间要保持同步稍微一个地方没更新就会出现画出来的勾和实际选中状态不一致的灵异现象。所以我从一开始就决定不画 CheckBox 了直接塞一个CheckedListBox。勾选状态、点击命中、空格切换、滚动条这些全由现成控件处理。这也符合做自定义控件的通用原则——不要重复造轮子原生控件能用的能力尽量用只补缺失的部分。3. 文本摘要绘制关闭状态下的 ComboBox 怎么展示多选结果3.1 锁定 SelectedIndex 的思路这部分是整个方案里最有技巧性的地方。ComboBox 关闭状态下只会画当前选中的那一项也就是SelectedIndex指向的那一项。可是我们的真实多选数据都在CheckedListBox里ComboBox 的Items根本没有对应关系。最常见的思路是往 ComboBox 里塞十几个占位项然后根据CheckedListBox的勾选状态算出一个文本在DrawItem里画出来。但这样有个问题万一用户按键盘方向键SelectedIndex 就变了画出来的内容跟着乱跳。我的处理方式很粗暴永远把 SelectedIndex 锁在 0 上整个 ComboBox 只有一个占位项DrawItem 里画的不是这个占位项的文本而是我从 CheckedListBox 计算出来的摘要文本。用户不管怎么按方向键SelectedIndex 都不会变因为一共就一项。构造函数里那句Items.Add(string.Empty)就是为了保证有这一项存在。SelectedIndex 固定在 0 之后ComboBox 每次需要绘制选中项时都会触发DrawItem事件我在事件里画摘要文本就行。3.2 OwnerDrawFixed 模式下的 DrawItem 重写把DrawMode设为OwnerDrawFixed然后重写OnDrawItem。这里注意e.Index其实永远都是 0但我还是做了防御性判断protected override void OnDrawItem(DrawItemEventArgs e) { if (e.Index 0 || Items.Count 0) { e.DrawBackground(); return; } e.DrawBackground(); string text GetSummaryText(); TextRenderer.DrawText( e.Graphics, text, Font, e.Bounds, Enabled ? ForeColor : SystemColors.GrayText, TextFormatFlags.Left | TextFormatFlags.VerticalCenter | TextFormatFlags.EndEllipsis); if ((e.State DrawItemState.Focus) DrawItemState.Focus) ControlPaint.DrawFocusRectangle(e.Graphics, e.Bounds); }GetSummaryText方法负责生成要显示的文本private string GetSummaryText() { if (_listBox.CheckedItems.Count 0) return EmptyText; if (SummaryMode SummaryMode.Count) return $已选 {_listBox.CheckedItems.Count} 项; var names _listBox.CheckedItems .Castobject() .Select(item _listBox.GetItemText(item)) .ToArray(); string text string.Join(SummarySeparator, names); if (text.Length MaxSummaryLength) return text.Substring(0, MaxSummaryLength) …; return text; }EmptyText、SummarySeparator、MaxSummaryLength、SummaryMode都是公开属性可以根据业务场景配置。比如权限分配场景习惯显示具体名称而订单筛选场景可能只想知道选了 N 个条件。3.3 边界处理空数据、禁用、焦点态有几种状态很容易被忽略但实际使用中都会遇到。空数据显示。当 CheckedListBox 里一个都没勾时ComboBox 显示的内容应该由EmptyText控制。这个属性默认值我给的是请选择业务方可以改成全部或者不限。这个状态很关键因为它直接决定了查询条件的默认语义。禁用状态。Enabled false时字体颜色要变成系统灰否则看起来像还能操作。上面代码里我用了SystemColors.GrayText处理禁用态而不是写死一个灰色值这样在高对比度主题下也不会出问题。焦点状态。WinForms 的 ComboBox 获得键盘焦点时会有一个虚线焦点框。DrawItem里如果不处理DrawItemState.Focus就会出现焦点框画不出来或者画错位置的问题。用ControlPaint.DrawFocusRectangle是标准做法它会自动画到 e.Bounds 范围内。绘制区域还有一个细节ComboBox 右侧有下拉箭头自绘文本如果一直画到控件最右边会被箭头盖住一点。虽然 e.Bounds 已经扣掉了一部分但保险起见我在DrawItem里手动把绘制矩形右边减去SystemInformation.VerticalScrollBarWidth效果更干净。这一步属于像素级微调我在实际项目中加了体验提升很明显。4. 下拉面板自动关闭的排查链路从 Deactivate 到 ToolStripDropDown4.1 现象每次点击选项面板立刻消失最开始的实现我用的不是 ToolStripDropDown而是一个FormBorderStyle None的弹出窗口。写法很直观点击 ComboBox 箭头时Show()这个弹窗里面放一个 CheckedListBox。为了模拟下拉框点击外部关闭的交互我在主窗体上挂了Deactivate事件只要主窗体失去激活状态就关闭弹窗。结果一跑就出大问题每次鼠标点进 CheckedListBox面板嗖地一下就消失了。用户根本来不及点第二个选项。当时我一度怀疑是鼠标消息被吃了折腾了很久才发现问题根本不在鼠标上。4.2 排查过程从鼠标消息一路查到焦点问题排查的第一步我在 CheckedListBox 的MouseDown、Click、ItemCheck事件里都打了日志发现ItemCheck确实正常触发了勾选状态也变了但面板关闭发生在 ItemCheck 之前。这说明面板不是被业务代码关掉的而是系统层面的动作。第二步我怀疑是Deactivate事件误触发。于是在Deactivate里打印了this.ContainsFocus和新激活窗体的信息真相立刻浮出水面点击 CheckedListBox 的任何位置都会让弹窗 Form 获得激活状态主窗体随之触发Deactivate我在事件里写的关闭逻辑就执行了。这就是典型的用 Form 做弹层的经典坑位。普通 Form 一旦获得激活状态主窗体就失去激活状态两者是天然互斥的。你本来想的是点击外面关闭弹窗结果因为子控件获得焦点弹窗自己把自己关了。4.3 真正的根因和修复这个问题的根源在于我用了一个会抢焦点的顶级窗口来承载子控件同时又用主窗体的失焦事件作为关闭条件这两个设计放在一起就是矛盾的。正确做法是换一个不会抢焦点的弹层宿主。ToolStripDropDown就是为此设计的它内部使用了一个特殊的 ToolWindow 窗口不参与正常窗口激活链点击里面的 CheckedListBox 不会让主窗体失活。同时它自己处理点击外部关闭的逻辑我完全不用监听Deactivate。核心修复就是把弹层从 Form 换成 ToolStripDropDown代码如下protected override void OnDropDown(EventArgs e) { // 先关掉原生下拉列表再显示自定义面板 SendMessage(Handle, CB_SHOWDROPDOWN, IntPtr.Zero, IntPtr.Zero); if (_listBox.Items.Count 0) return; int listHeight Math.Min( MaxDropDownItems * _listBox.ItemHeight 2, _listBox.Items.Count * _listBox.ItemHeight 2); listHeight Math.Max(_listBox.ItemHeight 2, listHeight); _listBox.Height listHeight; _listBox.Width Width; _host.Width Width; _host.Height listHeight; _popup.Show(this, new Point(0, Height 1)); }这里还涉及一个原生下拉的问题。ComboBox 的 DropDownStyle 是 DropDownList 时点击箭头会弹出原生列表。我在OnDropDown里执行SendMessage把原生列表关掉然后用_popup.Show弹自定义面板。这条逻辑在实际使用中没问题原生列表还没来得及绘制就被关掉了用户感知不到闪烁。4.4 另一个隐藏坑ItemCheck 里不要重建集合面板不闪退了紧接着又踩了一个坑勾选某一个选项后为了刷新摘要文本我在ItemCheck事件里执行了_listBox.Items.Clear()和重新 Add 数据。结果一执行就报索引越界界面像被重刷了一样闪一下。原因是ItemCheck事件在勾选状态变更前触发这时候 CheckedListBox 内部正拿着一个索引在处理旧条目你去动它的集合就等于拆它正在走的路。正确的做法是ItemCheck里不做任何集合操作只做状态刷新。而且要注意ItemCheck触发时CheckedItems还是旧状态直接读拿不到刚刚勾选的这一项。我是用BeginInvoke把刷新动作放到消息循环下一次执行这时候状态已经变更完毕读到的才是准确的private void OnItemCheck(object sender, ItemCheckEventArgs e) { BeginInvoke(new Action(RefreshText)); }RefreshText内部就是调用Invalidate()让 ComboBox 重绘顺便更新 ToolTip。整个刷新过程不碰 CheckedListBox 的集合这条规则我后来在代码注释里标成了红色警告。5. 体验细节打磨从能用变成好用5.1 悬停显示完整文本摘要文本长了之后会被省略号截断用户看不到完整内容体验很糟糕。我给控件加了一个 ToolTip 组件鼠标悬停时如果检测到文本被截断就显示完整摘要。这个检测不能想当然直接比较测量宽度和控件宽度就行protected override void OnMouseEnter(EventArgs e) { base.OnMouseEnter(e); string text GetSummaryText(); using (Graphics g CreateGraphics()) { int textWidth TextRenderer.MeasureText(g, text, Font).Width; if (textWidth ClientSize.Width - 20) _toolTip.SetToolTip(this, text); else _toolTip.SetToolTip(this, null); } }这个细节很不起眼但实际用起来特别加分。尤其权限配置场景里角色名动辄十几个字截断了用户根本不知道选了啥悬停一下能看到全文体验直接上一个台阶。5.2 全选和清空业务上几乎一定会遇到全选和清空的需求。我直接在控件上暴露了两个方法调用方在外部按钮或者弹出的辅助菜单里触发即可public void CheckAll() { for (int i 0; i _listBox.Items.Count; i) _listBox.SetItemChecked(i, true); RefreshText(); } public void ClearAll() { for (int i 0; i _listBox.Items.Count; i) _listBox.SetItemChecked(i, false); RefreshText(); }如果数据量特别大超过几百项循环调用SetItemChecked会触发大量 ItemCheck 事件性能会有点难看。我在内部加了一个_suspendRefresh标志位批量操作时先置为 true跳过中间过程的刷新最后统一刷新一次。这个优化在原生的 CheckedListBox 里非常有效实测几百项数据从肉眼可见的卡顿变成瞬间完成。5.3 键盘交互的完善键盘这块主要是两个层次。第一层是 CheckedListBox 自带的键盘能力方向键上下移动、空格键切换勾选。第二层是打开/关闭下拉的键盘操作焦点在 ComboBox 上时按 F4 或 AltDown 应该能打开下拉面板。原生 ComboBox 对 F4 和 AltDown 有自己的处理走的是原生下拉。因为我重写了OnDropDown这两个按键最终都会走到自定义面板的Show逻辑里所以不用额外处理。按 Escape 键时ToolStripDropDown 会接收并自动关闭体验跟原生下拉一致。你可能会问方向键在 ComboBox 上按了会不会让 SelectedIndex 变化不会因为 Items 里只有一个占位项SelectedIndex 永远锁在 0。这也是当时用锁死占位项策略的额外好处键盘操作一点风险都没有。5.4 弹层宽度与屏幕边缘ToolStripDropDown 弹出时如果靠近屏幕右边缘或者底部边缘可能会超出屏幕。原生 ComboBox 的下拉列表会自动调整方向ToolStripDropDown 在某些 Windows 版本上这种行为并不完美。我加了一个小处理弹层 Show 之前用Screen.FromControl(this).WorkingArea判断一下剩余空间。如果右侧空间不足就把弹层左移让右边界对齐下面空间不足就把弹层往上弹。这部分代码不复杂但是不处理的话用户把 ComboBox 放在表单右下角弹层会跑出屏幕别问我是怎么知道的。6. 扩展从 CheckedListBox 到更复杂的宿主控件6.1 数据绑定与勾选结果获取CheckedComboBox 的数据入口我做成了一套独立的 Items 操作不直接复用 ComboBox 的 DataSource因为两者概念完全不一样。使用方式非常简单checkedComboBox1.AddItems(cityList); // cityList 是 Liststring 或 ListCityModel获取结果时var selectedCities checkedComboBox1.GetCheckedItemsCityModel();GetCheckedItems内部就是_listBox.CheckedItems.CastT().ToList()。业务代码只要关心泛型类型即可完全不用碰 CheckedListBox 的内部结构。这个模型在后面接数据库查询条件、导出字段选择这类需求时非常顺手。6.2 把面板换成 DataGridView 做多列有一次遇到一个需求下拉框里要能同时看到部门名称、部门编号、负责人三列列头固定还得支持按复选框勾选。CheckedListBox 显然做不到多列好在我当初的设计把弹层内容完全抽象成了一个ToolStripControlHost宿主宿主里放什么控件完全由我决定。我把弹层里的控件从 CheckedListBox 换成了 DataGridView开一个 CheckBox 列再开几个文本列关闭状态下的文本摘要逻辑完全不用动。改动量比你想象的小很多因为外壳 ComboBox、占位项、DrawItem、ToolTip 这些都跟弹层具体内容无关。这就是当初把弹层独立出来的价值——多选列表可以是任意控件甚至可以是 TreeView。6.3 半选状态和三态权限场景经常要求父级权限勾选后子级全选子级选了一部分父级显示半选。CheckedListBox 原生不支持三态如果你要做这层逻辑建议直接上 TreeView 的 CheckBox 三态模式或者 DataGridView 里自绘一个半选状态框。我的建议是不要在 CheckedComboBox 本身硬塞三态逻辑把它留在业务层处理。控件只负责哪些项被勾选以及如何展示摘要结果父子的联动逻辑放在绑定数据源之前去算。这样控件保持通用业务变化时只需要改数据准备那一段不需要动 UI 层。6.4 给后续维护者留的注释最后提醒一句所有自定义控件都要在类注释里写清楚设计意图尤其像这种用占位项伪造选中项的写法不看注释的人很容易当成 Bug 改掉。我在代码顶部写了三行注释真实多选数据在 CheckedListBox 里、ComboBox.Items 仅含一个占位项、SelectedIndex 永远等于 0。后来项目交接的时候接手的同事没踩任何坑这比什么都值。这套控件我在权限分配和报表筛选两个场景里用了快一年最稳定的用法就是把业务对象的集合直接喂给 AddItems在 ItemCheck 里同步业务对象的 IsSelected 属性查询条件直接从业务对象里取。遇到大改动时宁可把 CheckedComboBox 放进一个 UserControl 里包一层也别在事件处理器里堆业务逻辑否则后期维护真的会谢。本文还有配套的精品资源点击获取