ComboTreeView 是一个组合控件,将文本框和树形控件结合,支持单选和多选模式的节点选择
功能特性
- 单选模式:点击节点直接选中并关闭下拉面板
- 多选模式:通过复选框选择多个节点,支持全选/取消全选
- 级联选择:勾选父节点时自动级联选中所有子节点
- 树形结构:支持多层级节点展示
- 节点连线:可配置是否显示节点连线和展开/折叠按钮
- 自定义下拉面板尺寸:可自由设置下拉面板的高度
- 双击选中:多选模式下双击节点文本可快速切换选中状态
- 圆角边框:支持下拉面板和控件的圆角样式
- 自定义边框:支持自定义边框颜色和宽度
一、效果图
![]()
![]()
![]()
![]()
二、文档
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|
| SelectionMultiMode | bool | false | 是否为多选模式 |
| Nodes | TreeNodeCollection | 空列表 | 节点集合 |
| SelectedNode | TreeNode | null | 当前选中的节点 |
| SelectedNodes | List<TreeNode> | 空列表 | 已选中的节点集合(只读) |
| DropDownHeight | int | 200 | 下拉面板高度 |
| ShowLines | bool | true | 是否显示节点连线 |
| Text | string | 空 | 选中的文本(只读) |
| BorderColor | Color | Color.FromArgb(26, 188, 156) | 边框颜色 |
| BorderWidth | int | 1 | 边框宽度 |
| CornerRadius | int | 4 | 圆角半径 |
| ReadOnly | bool | true | 文本框是否只读 |
| FollowGlobalTheme | bool | true | 是否跟随全局主题切换 |
事件
| 事件名 | 说明 | 参数 |
|---|
| SelectionChanged | 选择发生变化时触发 | ComboTreeViewSelectionChangedEventArgs |
使用示例
基本用法
// 创建控件varcomboTreeView=newComboTreeView();comboTreeView.SelectionMultiMode=true;comboTreeView.DropDownHeight=250;comboTreeView.ShowLines=true;// 添加节点varroot1=newTreeNode("节点0");root1.Nodes.Add(newTreeNode("节点1"));root1.Nodes.Add(newTreeNode("节点2"));root1.Nodes.Add(newTreeNode("节点3"));varroot2=newTreeNode("节点4");root2.Nodes.Add(newTreeNode("节点5"));varchild=newTreeNode("节点6");child.Nodes.Add(newTreeNode("节点7"));root2.Nodes.Add(child);comboTreeView.Nodes.Add(root1);comboTreeView.Nodes.Add(root2);// 添加到窗体this.Controls.Add(comboTreeView);comboTreeView.Location=newPoint(20,20);comboTreeView.Size=newSize(200,32);// 绑定事件comboTreeView.SelectionChanged+=(sender,e)=>{varselected=e.SelectedNodes;if(selected.Count>0){MessageBoxEx.ShowInfo(this,$"选中了{selected.Count}个节点");}// 获取选中的文本(控件自动拼接)stringselectedText=comboTreeView.Text;MessageBoxEx.ShowInfo(this,selectedText);};
单选模式
// 设置为单选模式(默认)comboTreeView.SelectionMultiMode=false;// 获取选中节点varnode=comboTreeView.SelectedNode;if(node!=null){Console.WriteLine($"选中:{node.Text}");}
多选模式
// 设置为多选模式comboTreeView.SelectionMultiMode=true;// 全选comboTreeView.SelectAll(true);// 取消全选comboTreeView.SelectAll(false);// 获取所有选中节点foreach(varnodeincomboTreeView.SelectedNodes){Console.WriteLine($"选中:{node.Text}");}// 双击节点文本快速切换选中状态(多选模式下)
自定义外观
// 设置边框颜色和宽度comboTreeView.BorderColor=Color.FromArgb(24,144,255);comboTreeView.BorderWidth=2;// 设置圆角半径comboTreeView.CornerRadius=6;
代码方式选择节点
// 单选模式下设置选中节点comboTreeView.SelectedNode=comboTreeView.Nodes[0];// 多选模式下设置节点勾选状态varnode=comboTreeView.Nodes[0].Nodes[0];node.IsChecked=true;
TreeNode 类
属性
| 属性名 | 类型 | 说明 |
|---|
| Id | string | 节点唯一标识(默认自动生成) |
| Text | string | 节点显示文本 |
| Nodes | TreeNodeCollection | 子节点集合 |
| Tag | object | 自定义数据 |
| Expanded | bool | 是否展开 |
| Selected | bool | 是否选中(行高亮) |
| IsChecked | bool | 是否勾选(复选框) |
| Checkable | bool | 是否可勾选 |
| Enabled | bool | 是否可用 |
| Level | int | 节点层级(只读) |
构造函数
// 空构造varnode=newTreeNode();// 指定文本varnode=newTreeNode("节点名称");// 指定ID和文本varnode=newTreeNode("node001","节点名称");
方法
// 展开/收起节点node.Expand();node.Collapse();node.Toggle();// 展开/收起所有子节点node.ExpandAll();node.CollapseAll();// 获取所有子节点(递归)varallChildren=node.GetAllChildren();
注意事项
- 在多选模式下,需要点击"确定"按钮确认选择
- 在多选模式下,点击"取消"按钮会取消本次选择操作
- 级联选择只在多选模式下生效
- ShowLines 属性控制是否显示节点连线和展开/折叠按钮
- 建议根据节点数量适当调整 DropDownHeight
- 多选模式下双击节点文本可快速切换选中状态
- 下拉面板边框样式与主控件一致(圆角、颜色、宽度)
- 确定和取消按钮支持悬停效果
- 主题适配:
- 支持自动跟随全局主题切换(亮色/暗色)
- 深色模式下文本框、下拉面板、树控件背景色自动调整为深色
- 可通过
FollowGlobalTheme属性禁用自动主题切换
三、后记
更多精彩补充完善中,敬请关注,如有需求,有好的建议,请vx留言(xue5zhijing)