mcpField
S
syncfusion-winforms-multicolumn-treeview

syncfusion-winforms-multicolumn-treeview

github.com/syncfusion设计与 UI278 次安装1 周前更新
代码仓库

关于 syncfusion-winforms-multicolumn-treeview

此技能介绍 Syncfusion Windows Forms MultiColumnTreeView,用于在树形层级中展示多列信息,面向构建文件浏览器、组织结构图和数据浏览器的开发者。它涵盖数据绑定、交互、排序筛选及大数据集加载。

主要功能

  1. 01层级节点与多列数据
  2. 02复选框和选项按钮
  3. 03多种选择模式与编辑
  4. 04XML 数据绑定
  5. 05节点排序与筛选
  6. 06按需加载大型数据集

适用场景

  1. 01展示文件夹及文件元数据
  2. 02浏览员工组织结构和信息
  3. 03按类别展示产品及规格
  4. 04管理层级项目任务

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/syncfusion/winforms-ui-components-skills --skill syncfusion-winforms-multicolumn-treeview

安装后在 Claude Code 中输入/syncfusion-winforms-multicolumn-treeview确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

references/
appearance.md
data-binding.md
events.md
getting-started.md
node-features.md
nodes-and-columns.md
performance.md
selection-and-editing.md
sorting-and-filtering.md
troubleshooting.md

详细介绍

实现 MultiColumn TreeView

MultiColumnTreeView 是一种适用于 Windows Forms 的高级树视图控件,可显示分层数据。此控件将树结构可视化与其他数据列相结合,非常适合文件资源管理器、组织结构图和数据浏览器等需要同时展示层级关系及相关信息的场景。

何时使用此技能

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

  • 使用多列信息显示分层数据
  • 构建文件资源管理器或带元数据列的文件夹浏览器
  • 创建组织结构图并显示员工详细信息
  • 展示产品目录及其分层类别和规格
  • 实现数据浏览器并显示父子关系
  • 添加交互功能,例如复选框、选项按钮或内联编辑
  • 按需加载大型数据集以提升性能
  • 动态排序和筛选分层数据
  • 使用样式、颜色和主题自定义外观
  • 绑定 XML 数据以便轻松导入/导出

组件概览

MultiColumnTreeView 提供:

核心组件:

  • TreeNodeAdv - 包含文本、图像和子项的单个节点
  • TreeColumnAdv - 包含标题和样式的列定义
  • TreeNodeAdvSubItem - 每个节点的其他列数据

主要功能:

  • 支持多个列,并可自定义列标题
  • 深度不限的分层节点结构
  • 交互元素(复选框、选项按钮)
  • 多种选择模式
  • 排序和筛选
  • 按需加载以提升性能
  • 灵活的样式架构
  • XML 数据绑定
  • 由事件驱动的交互

文档和导航指南

入门

📄 阅读: references/getting-started.md

  • 安装和程序集部署
  • 通过设计器添加 MultiColumnTreeView
  • 通过代码添加 MultiColumnTreeView
  • 创建列(TreeColumnAdv)
  • 添加节点和子节点
  • 为其他列添加子项
  • 第一个可运行示例
节点和列管理

📄 阅读: references/nodes-and-columns.md

  • TreeNodeAdv 属性和功能
  • TreeColumnAdv 配置
  • 动态添加/移除节点
  • 构建分层结构
  • 子项和多列数据
  • 节点集合操作
  • 列宽设置和自动调整列宽
节点功能

📄 阅读: references/node-features.md

  • CheckBoxes 和 InteractiveCheckBoxes
  • OptionButtons(单选按钮选择)
  • ToolTips 和 HelpText
  • 加号/减号展开符号
  • 根节点线和连接线
  • 节点中的自定义控件
  • 基元(LabelPrimitive、ImagePrimitive、CheckBoxPrimitive)
  • 多行节点文本
选择和编辑

📄 阅读: references/selection-and-editing.md

  • SelectionMode(Single、MultiSelectSameLevel、MultiSelectAll)
  • SelectedNode 和 SelectedNodes 属性
  • ActiveNode 管理
  • 基于鼠标的选择(拖动选择)
  • 键盘搜索功能
  • 标签编辑(LabelEdit 属性)
  • 节点编辑事件
数据绑定

📄 阅读: references/data-binding.md

  • 从 XML 文件加载数据
  • 将树结构保存为 XML
  • XML 节点映射
  • 数据绑定模式
  • 动态填充节点
  • 导出和导入操作
排序和筛选

📄 阅读: references/sorting-and-filtering.md

  • Sort 方法和 SortOrder
  • SortType(Checkbox、Tag、Text)
  • SortWithChildNode 属性
  • 用于文本比较的 CompareOptions
  • 筛选级别(Root、All、Extended)
  • 创建筛选委托
  • RefreshFilter 方法
  • 清除筛选器
外观自定义

📄 阅读: references/appearance.md

  • 边框样式(2D 和 3D 边框)
  • 颜色自定义(背景、前景、线条)
  • 标题自定义
  • 节点和列的 BaseStyles
  • 选中节点的外观
  • 子项样式
  • 视觉样式(Office2016Colorful、White、Black、DarkGray)
  • 图像列表(LeftImage、RightImage、StateImage)
性能优化

📄 阅读: references/performance.md

  • SuspendExpandRecalculate 属性
  • BeginUpdate/EndUpdate 模式
  • 按需加载实现
  • 大型数据集处理
  • 内存管理技巧
  • 性能最佳实践
事件

📄 阅读: references/events.md

  • 节点选择事件
  • 展开/折叠事件
  • 编辑事件(BeforeEdit、AfterEdit)
  • 鼠标和键盘事件
  • 自定义事件处理模式
  • 事件订阅示例
故障排除

📄 阅读: references/troubleshooting.md

  • 常见显示问题
  • 性能优化
  • 复选框和选择问题
  • 排序和筛选问题
  • 事件和数据绑定问题
  • 一般最佳实践

快速入门示例

下面是一个展示包含国家和首都的 MultiColumnTreeView 的最小示例:

using System;
using System.Windows.Forms;
using Syncfusion.Windows.Forms.Tools.MultiColumnTreeView;

public class MultiColumnTreeViewExample : Form
{
    private MultiColumnTreeView multiColumnTreeView1;
    
    public MultiColumnTreeViewExample()
    {
        InitializeForm();
        SetupMultiColumnTreeView();
        PopulateData();
    }
    
    private void InitializeForm()
    {
        this.Text = "MultiColumnTreeView Example";
        this.Size = new System.Drawing.Size(600, 400);
    }
    
    private void SetupMultiColumnTreeView()
    {
        // Create control
        multiColumnTreeView1 = new MultiColumnTreeView();
        multiColumnTreeView1.Dock = DockStyle.Fill;
        
        // Add columns
        TreeColumnAdv countryColumn = new TreeColumnAdv();
        countryColumn.Text = "Country";
        countryColumn.Width = 200;
        
        TreeColumnAdv capitalColumn = new TreeColumnAdv();
        capitalColumn.Text = "Capital";
        capitalColumn.Width = 150;
        
        multiColumnTreeView1.Columns.AddRange(
            new TreeColumnAdv[] { countryColumn, capitalColumn });
        
        // Add to form
        this.Controls.Add(multiColumnTreeView1);
    }
    
    private void PopulateData()
    {
        // Create parent nodes
        TreeNodeAdv asiaNode = new TreeNodeAdv();
        asiaNode.Text = "Asia";
        
        TreeNodeAdv europeNode = new TreeNodeAdv();
        europeNode.Text = "Europe";
        
        // Create child nodes with subitems
        TreeNodeAdv indiaNode = new TreeNodeAdv();
        indiaNode.Text = "India";
        TreeNodeAdvSubItem delhiSubItem = new TreeNodeAdvSubItem();
        delhiSubItem.Text = "New Delhi";
        indiaNode.SubItems.Add(delhiSubItem);
        
        TreeNodeAdv chinaNode = new TreeNodeAdv();
        chinaNode.Text = "China";
        TreeNodeAdvSubItem beijingSubItem = new TreeNodeAdvSubItem();
        beijingSubItem.Text = "Beijing";
        chinaNode.SubItems.Add(beijingSubItem);
        
        TreeNodeAdv ukNode = new TreeNodeAdv();
        ukNode.Text = "United Kingdom";
        TreeNodeAdvSubItem londonSubItem = new TreeNodeAdvSubItem();
        londonSubItem.Text = "London";
        ukNode.SubItems.Add(londonSubItem);
        
        // Build hierarchy
        asiaNode.Nodes.AddRange(new TreeNodeAdv[] { indiaNode, chinaNode });
        europeNode.Nodes.Add(ukNode);
        
        multiColumnTreeView1.Nodes.AddRange(
            new TreeNodeAdv[] { asiaNode, europeNode });
    }
    
    [STAThread]
    static void Main()
    {
        Application.EnableVisualStyles();
        Application.Run(new MultiColumnTreeViewExample());
    }
}

常见模式

模式 1:添加包含多列的节点
// Create node for first column
TreeNodeAdv employeeNode = new TreeNodeAdv();
employeeNode.Text = "John Doe";

// Add subitems for additional columns
TreeNodeAdvSubItem departmentSubItem = new TreeNodeAdvSubItem();
departmentSubItem.Text = "Engineering";

TreeNodeAdvSubItem salarySubItem = new TreeNodeAdvSubItem();
salarySubItem.Text = "$85,000";

employeeNode.SubItems.Add(departmentSubItem);
employeeNode.SubItems.Add(salarySubItem);

multiColumnTreeView1.Nodes.Add(employeeNode);
模式 2:带复选框的交互式节点
// Enable checkboxes for all nodes
multiColumnTreeView1.ShowCheckBoxes = true;
multiColumnTreeView1.InteractiveCheckBoxes = true;

// Or for individual nodes
TreeNodeAdv node = new TreeNodeAdv();
node.Text = "Select Me";
node.ShowCheckBox = true;
node.InteractiveCheckBox = true; // Parent reflects child states
模式 3:对树数据进行排序
// Sort by text in ascending order
multiColumnTreeView1.Nodes.Sort(SortOrder.Ascending);

// Sort with child nodes
multiColumnTreeView1.Nodes[0].SortOrder = SortOrder.Descending;
模式 4:筛选节点
// Define filter delegate
public bool FilterNodes(object o)
{
    var node = o as TreeNodeAdv;
    if (node.SubItems.Count > 0)
    {
        int value = int.Parse(node.SubItems[0].Text);
        return value > 50000; // Filter by criteria
    }
    return false;
}

// Apply filter
multiColumnTreeView1.FilterLevel = FilterLevel.Extended;
multiColumnTreeView1.Filter = FilterNodes;
multiColumnTreeView1.RefreshFilter();
模式 5:处理选择事件
// Subscribe to node selected event
multiColumnTreeView1.NodeSelected += (sender, e) =>
{
    if (multiColumnTreeView1.SelectedNode != null)
    {
        string nodeText = multiColumnTreeView1.SelectedNode.Text;
        MessageBox.Show($"Selected: {nodeText}");
    }
};

关键属性和方法

基本属性

控件级别:

  • Columns - TreeColumnAdv 对象集合
  • Nodes - 根级 TreeNodeAdv 集合
  • SelectedNode - 当前选中的节点(单选)
  • SelectedNodes - 选中节点的集合(多选)
  • ActiveNode - 拥有焦点的节点
  • SelectionMode - Single、MultiSelectSameLevel、MultiSelectAll
  • ShowCheckBoxes - 在所有节点上显示复选框
  • ShowOptionButtons - 在所有节点上显示选项按钮
  • ShowLines - 显示节点之间的连接线
  • ShowRootLines - 显示根节点之间的连线
  • ShowPlusMinus - 显示展开/折叠符号
  • Style - 视觉主题(Office2016Colorful、White、Black、DarkGray)
  • FilterLevel - 筛选范围(Root、All、Extended)
  • Filter - 筛选委托函数

节点属性(TreeNodeAdv):

  • Text - 节点文本内容
  • SubItems - TreeNodeAdvSubItem 对象集合
  • Nodes - 子节点集合
  • Checked - 复选框状态
  • Optioned - 选项按钮状态
  • Expanded - 展开/折叠状态
  • ShowCheckBox - 为此节点显示复选框
  • ShowOptionButton - 为此节点显示选项按钮
  • LeftImageIndices - 左侧图像索引
  • RightImageIndices - 右侧图像索引
  • HelpText - 工具提示文本

列属性(TreeColumnAdv):

  • Text - 列标题文本
  • Width - 列宽(像素)
  • Background - 标题背景画刷
  • TextColor - 标题文本颜色
基本方法

控件方法:

  • BeginUpdate() - 暂停视觉更新以提升性能
  • EndUpdate() - 恢复更新
  • ExpandAll() - 展开所有节点
  • CollapseAll() - 折叠所有节点
  • RefreshFilter() - 重新应用当前筛选
  • Sort() - 对节点进行排序

节点方法:

  • Expand() - 展开节点
  • Collapse() - 折叠节点
  • EnsureVisible() - 滚动到节点,使其可见

常见用例

用例 1:文件资源管理器

通过多列显示文件系统层级结构,包括文件名、大小、日期和类型。使用图标表示文件类型,并为大型目录结构实现延迟加载。

用例 2:组织结构图

显示公司结构,包括员工姓名、职位、部门和联系信息。使用复选框进行选择,并使用选项按钮指定主要联系人。

用例 3:产品目录

显示产品类别和子类别,并包含价格、库存和描述列。实现按价格范围或库存情况筛选。

用例 4:项目任务管理器

以层级结构显示项目任务,并包含任务名称、负责人、截止日期和状态。使用复选框跟踪任务完成情况。

用例 5:数据库架构查看器

以树形格式显示数据库表、视图和列,并在附加列中显示数据类型、约束和描述。

程序集要求

必需程序集:

  • Syncfusion.Grid.Base
  • Syncfusion.Grid.Windows
  • Syncfusion.Shared.Base
  • Syncfusion.Shared.Windows
  • Syncfusion.Tools.Base
  • Syncfusion.Tools.Windows

通过 NuGet 安装:

Install-Package Syncfusion.Tools.Windows

最佳实践

  1. 添加大量节点时,使用 BeginUpdate/EndUpdate 以提升性能
  2. 对大型数据集启用按需加载,以缩短初始加载时间
  3. 将 SuspendExpandRecalculate 设为 true,以加快包含大量节点时的节点展开速度
  4. 根据用户需求设置合适的选择模式
  5. 提供清晰的列标题,让数据关系一目了然
  6. 处理事件,以恰当地响应用户交互
  7. 通过 BaseStyles 应用统一的样式,呈现专业外观
  8. 使用大型数据集进行测试,确保性能满足要求
  9. 使用 XML 绑定,轻松持久化数据
  10. 不再需要筛选时清除筛选条件,以显示所有数据

相关组件

  • TreeView - 单列树控件
  • DataGrid - 不含层级结构的平面网格
  • ListView - 带列但不含树形结构的列表

有关详细的故障排除信息,请参阅 references/troubleshooting.md

评论

支持 Markdown