【WinForm UI控件系列】OrgChart 组织结构图（winform UI控件）拓扑图

OrgChart 是一个功能丰富的组织结构图控件，支持多种布局方向、节点样式自定义、展开收起功能，以及灵活的连接线样式配置。

一、效果图

二、使用说明

OrgChart 组织结构图控件

控件名称

OrgChart

中文名称

组织结构图控件

控件优点

OrgChart 是一个功能丰富的组织结构图控件，支持多种布局方向、节点样式自定义、展开收起功能，以及灵活的连接线样式配置。

主要特性

• 多种布局方向：支持左到右、右到左、上到下、下到上四种布局
• 展开收起：节点支持展开和收起子节点，点击按钮切换
• 自定义节点样式：支持填充色、边框色、字体、圆角等
• 丰富的连接线样式：支持多种线宽、线型、箭头类型
• 事件支持：节点点击、展开收起事件
• 数据绑定：支持树形节点结构

重要参数说明

布局属性

布局方向（OrgChartLayout）

节点属性

连接线样式（ConnectionStyle）

连接线样式（ConnectionLineStyle）

线条类型（LineType）

线宽选项（LineWidth）

箭头类型（ArrowType）

节点数据结构（OrgChartNode）

重要事件

使用示例

基本使用

// 创建组织结构图OrgChartorgChart=newOrgChart();orgChart.Dock=DockStyle.Fill;orgChart.Layout=OrgChartLayout.LeftToRight;// 创建节点OrgChartNoderoot=newOrgChartNode();root.Text="CEO";root.FillColor=Color.FromArgb(24,144,255);// 添加子节点OrgChartNodechild1=newOrgChartNode();child1.Text="技术部";child1.FillColor=Color.FromArgb(64,169,131);root.Children.Add(child1);OrgChartNodechild2=newOrgChartNode();child2.Text="市场部";child2.FillColor=Color.FromArgb(255,193,7);root.Children.Add(child2);// 设置根节点orgChart.RootNode=root;this.Controls.Add(orgChart);

多层结构

// 创建三层结构OrgChartNoderoot=newOrgChartNode{Text="公司总部"};OrgChartNodedept1=newOrgChartNode{Text="研发中心"};OrgChartNodeteam1=newOrgChartNode{Text="前端团队"};OrgChartNodeteam2=newOrgChartNode{Text="后端团队"};dept1.Children.Add(team1);dept1.Children.Add(team2);root.Children.Add(dept1);OrgChartNodedept2=newOrgChartNode{Text="运营中心"};OrgChartNodeteam3=newOrgChartNode{Text="产品运营"};OrgChartNodeteam4=newOrgChartNode{Text="用户运营"};dept2.Children.Add(team3);dept2.Children.Add(team4);root.Children.Add(dept2);orgChart.RootNode=root;

自定义连接线样式

// 设置连接线样式orgChart.ConnectionStyle.LineColor=Color.Gray;orgChart.ConnectionStyle.LineType=LineType.Dashed;orgChart.ConnectionStyle.LineWidth=LineWidth.W1_5;orgChart.ConnectionStyle.ArrowType=ArrowType.TriangleSolid;orgChart.ConnectionStyle.ArrowColor=Color.Red;

连接线样式

// 直角折线（默认）orgChart.ConnectionStyle.LineStyle=ConnectionLineStyle.Orthogonal;// 贝塞尔曲线orgChart.ConnectionStyle.LineStyle=ConnectionLineStyle.Curved;// 直线连接orgChart.ConnectionStyle.LineStyle=ConnectionLineStyle.Straight;// 树形连接（分支线）orgChart.ConnectionStyle.LineStyle=ConnectionLineStyle.Tree;// 圆角折线orgChart.ConnectionStyle.LineStyle=ConnectionLineStyle.Rounded;

上下布局

// 从上到下布局orgChart.Layout=OrgChartLayout.TopToBottom;orgChart.HorizontalSpacing=30;orgChart.VerticalSpacing=30;

事件处理

// 节点点击事件orgChart.NodeClick+=(sender,e)=>{MessageBox.Show($"点击了节点:{e.Node.Text}");};// 节点展开/收起事件orgChart.NodeToggle+=(sender,e)=>{Console.WriteLine($"节点{e.Node.Text}已{(e.Node.Expanded?"展开":"收起")}");};

动态修改节点

// 动态添加子节点OrgChartNodenewNode=newOrgChartNode();newNode.Text="新部门";newNode.FillColor=Color.Purple;root.Children.Add(newNode);// 切换节点状态node.ToggleExpand();// 修改节点样式node.Text="新名称";node.FillColor=Color.Blue;

批量设置样式

// 设置所有节点使用默认样式orgChart.UseNodeColors=false;orgChart.DefaultFillColor=Color.Gray;orgChart.DefaultForeColor=Color.White;orgChart.DefaultFont=newFont("宋体",12,FontStyle.Bold);

注意事项

1. 布局计算：控件会自动计算布局，但节点过多时建议限制层级
2. 性能优化：大量节点时考虑虚拟滚动或分页
3. 颜色设置：UseNodeColors为 false 时使用控件级默认颜色
4. 展开按钮：只有有子节点的节点才显示展开按钮
5. 尺寸自适应：建议将控件 Dock 设为 Fill 或设置合适的 Size
6. 布局变化：展开/折叠子节点时，父节点到子节点的连接线位置会根据子树整体尺寸自动调整，这是标准树形布局的特性

已知限制

1. 展开/折叠时布局变化：当展开或折叠子节点时，父节点到子节点的连接线位置可能会根据子树整体尺寸发生变化。这是由于标准树形布局算法会重新计算整个树的布局所致。如需保持连接线位置稳定，需要使用不同的布局策略（如固定子节点位置），当前版本未实现此功能。
2. L2R/R2L 布局：LeftToRight 和 RightToLeft 布局方向在展开/折叠节点时，垂直方向的居中计算可能与预期略有差异。
3. 文本垂直显示：当节点使用垂直文本显示时，节点高度会根据文本字符数量自动调整，如果节点内容过多可能导致节点过高。

使用建议

• 小型组织：直接使用控件显示完整结构
• 大型组织：配合展开收起功能，分层展示
• 自定义样式：根据部门类型设置不同颜色
• 交互增强：结合事件实现选中高亮、右键菜单等功能

三、后记

更多控件，敬请关注，如有需求、好的建议，请留言(xue5zhijing)

更多：https://blog.csdn.net/uaime/article/details/161663833