mcpField
S
syncfusion-wpf-gantt

syncfusion-wpf-gantt

github.com/syncfusion生产力5154 次安装1 周前更新
代码仓库

关于 syncfusion-wpf-gantt

面向 WPF 项目管理应用的 Syncfusion Essential Gantt 使用指南,介绍任务层级、排期、依赖关系、资源分配、交互和 XML 数据操作。

主要功能

  1. 01任务层级与依赖关系
  2. 02时间线和进度可视化
  3. 03拖动排期与任务重排
  4. 04资源分配和基线
  5. 05筛选、排序及 XML 导入导出
  6. 06本地化与视觉定制

适用场景

  1. 01规划软件任务、冲刺和里程碑
  2. 02管理施工阶段及依赖关系
  3. 03安排活动并分配资源
  4. 04跟踪研究阶段和交付成果

安装

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

$npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-gantt

安装后在 Claude Code 中输入/syncfusion-wpf-gantt确认已加载。

包含的文件

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

references/
customization.md
data-binding.md
data-operations.md
drag-drop-interaction.md
getting-started.md
localization.md
resource-management.md
task-relationships.md
task-scheduling.md

详细介绍

实现 WPF 甘特图控件

面向 WPF 应用程序的 Syncfusion® Essential Gantt 控件实现综合指南。甘特图控件是类似 MS Project 的项目管理视图,内置网格、计划和资源分配功能,旨在帮助项目经理制定计划、分配资源、跟踪任务进度并管理项目时间线。

何时使用此技能

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

  • 在 WPF 应用程序中实现项目管理功能
  • 使用甘特图表示任务时间线
  • 创建任务层级结构,并设置父子关系
  • 配置任务依赖关系,并设置前置任务和后续任务关系
  • 启用拖放操作,以安排任务和调整日期
  • 使用基线和进度指示器跟踪项目进度
  • 管理资源并将其分配给任务
  • 使用自定义节点、工具提示和样式自定义甘特图的视觉效果
  • 以 XML 格式导入/导出项目数据
  • 实现缩放和时间线导航
  • 添加筛选和排序以管理任务
  • 支持国际项目的本地化

本技能涵盖甘特图控件的完整实现过程,从基本设置到高级自定义。

组件概述

架构

Essential Gantt 控件由三个主要组件组成:

  1. GanttGrid - 表格视图,用于显示已安排的任务及其层级和可编辑字段
  2. GanttChart - 图形表示,用于显示任务条、里程碑和依赖关系
  3. ScheduleHeader - 时间线标题,用于衡量和跟踪进度
主要功能

任务管理:

  • 分层任务结构(父任务/子任务)
  • 任务属性(名称、开始/结束日期、工期、进度)
  • 支持目标日期里程碑
  • 带连接线的任务依赖关系

视觉功能:

  • 显示完成百分比的进度指示器
  • 适用于不同任务类型的自定义节点样式
  • 用于突出显示的高亮和条纹线
  • 用于显示详细任务信息的自定义工具提示

交互操作:

  • 拖动以调整任务的开始/结束日期
  • 在行内拖放任务
  • 网格与图表之间自动同步
  • 缩放以显示不同的时间线刻度

数据操作:

  • 兼容 MVVM 的数据绑定
  • 支持 ObservableCollection
  • 使用 XML 导入/导出项目数据
  • 筛选和排序功能
  • 面向大型项目的数据虚拟化

文档和导航指南

入门

📄 阅读: references/getting-started.md

适用于以下需求:

  • 在 WPF 项目中安装和设置甘特图控件
  • 了解甘特图控件的架构和组件
  • 通过编程方式或 XAML 设计器添加 GanttControl
  • 配置基本属性(ChartWidth、GridWidth)
  • 设置计划类型和范围填充
  • 为任务层级配置自动展开模式
  • 为甘特图控件应用主题

涵盖主题: 安装、控件结构、类图、基本配置、计划类型、自动展开模式、主题设置


数据绑定与任务管理

📄 阅读: references/data-binding.md

适用于以下需求:

  • 为项目数据创建 TaskDetails 集合
  • 将数据绑定到 GanttControl ItemsSource
  • 使用 ObservableCollection 实现 ViewModel 模式
  • 定义任务属性(ID、名称、日期、进度)
  • 创建父子任务层级结构
  • 配置外部属性绑定
  • 将资源分配给任务
  • 遵循数据模型最佳实践

涵盖主题: TaskDetails 绑定、ObservableCollection、任务属性、层级结构创建、资源分配、MVVM 模式


排期与时间管理

📄 阅读: references/task-scheduling.md

当你需要:

  • 配置排期类型(小时、天、周、月、年)
  • 实现自定义 DateTime 或数字排期
  • 自定义工作日和营业时间日历
  • 定义节假日和非工作日
  • 设置排期范围的留白,以便更好地进行可视化
  • 实现缩放功能
  • 在 GanttGrid 中显示日期和时间
  • 管理时间线和排期视图

涵盖主题: 排期类型、日历自定义、节假日、缩放、时间线管理、排期配置


任务关系与依赖项

📄 阅读: references/task-relationships.md

当你需要:

  • 创建任务之间的依赖关系
  • 配置前置任务和后续任务
  • 实现用于可视化依赖关系的连接线
  • 启用自动更新层级,以级联应用变更
  • 添加基准计划支持,以跟踪原始排期
  • 跟踪任务进度与基准计划的对比情况
  • 为项目目标设置里程碑
  • 定义不同的关系类型

涵盖主题: 依赖项、连接线、自动更新层级、基准计划、里程碑、关系类型、进度跟踪


视觉自定义

📄 阅读: references/customization.md

当你需要:

  • 为不同任务类型应用自定义节点样式
  • 创建包含丰富任务信息的自定义工具提示
  • 突出显示特定任务
  • 在时间线上添加条带线作为视觉参考
  • 自定义 DateTime 指示器
  • 设置标题节点和任务节点的样式
  • 自定义进度指示器
  • 应用视觉主题和模板
  • 实现条件样式

涵盖主题: 自定义节点样式、工具提示、高亮显示、条带线、DateTime 指示器、主题、模板、条件样式


交互与拖放

📄 阅读: references/drag-drop-interaction.md

当你需要:

  • 启用拖动支持以调整任务日期
  • 实现任务条拖动,以更改开始日期和完成日期
  • 配置拖放以重新排序任务
  • 处理拖动操作期间的自动数据同步
  • 响应拖动事件
  • 配置拖动行为和限制
  • 实现自定义拖动验证

涵盖主题: 拖动调整大小、拖放重新排序、事件处理、同步、拖动限制


数据操作

📄 阅读: references/data-operations.md

当你需要:

  • 根据条件筛选任务
  • 按各种属性对任务列表排序
  • 为大型项目实现数据虚拟化
  • 从 XML 文件导入项目数据
  • 将项目数据导出为 XML 格式
  • 对任务执行批量操作
  • 搜索和筛选任务集合
  • 优化大型数据集的性能

涵盖主题: 筛选、排序、虚拟化、XML 导入/导出、批量操作、搜索、性能优化


资源管理

📄 阅读: references/resource-management.md

当你需要:

  • 在 Gantt 中实现资源视图
  • 配置 Gantt 内联资源项
  • 为任务分配资源
  • 创建和管理资源集合
  • 跟踪各任务的资源分配情况
  • 实现多资源任务分配
  • 在图表中显示资源信息

涵盖主题: 资源视图、内联项、资源分配、集合、分配跟踪、多资源任务


本地化与国际化

📄 阅读: references/localization.md

在需要以下操作时:

  • 为不同语言配置文本方向(LTR/RTL)
  • 实现本地化支持
  • 应用特定于区域设置的格式
  • 管理多语言资源
  • 根据区域设置格式化日期和时间
  • 本地化资源字符串和 UI 文本
  • 支持国际项目团队

涵盖主题: 文本方向、本地化、区域格式、多语言资源、日期/时间格式、资源字符串


快速入门示例

基本甘特图控件实现

下面是一个简短示例,帮助你开始使用甘特图控件:

XAML:

<Window x:Class="GanttDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="Project Management" Height="600" Width="1000">
    
    <syncfusion:GanttControl x:Name="ganttControl"
                             ItemsSource="{Binding TaskDetails}"
                             GridWidth="300"
                             ChartWidth="700">
        <syncfusion:GanttControl.DataContext>
            <local:ViewModel/>
        </syncfusion:GanttControl.DataContext>
    </syncfusion:GanttControl>
    
</Window>

ViewModel(C#):

using System;
using System.Collections.ObjectModel;
using Syncfusion.Windows.Controls.Gantt;

public class ViewModel
{
    public ObservableCollection<TaskDetails> TaskDetails { get; set; }

    public ViewModel()
    {
        TaskDetails = new ObservableCollection<TaskDetails>();
        
        // Create parent task
        var parentTask = new TaskDetails
        {
            TaskId = 1,
            TaskName = "Project Planning",
            StartDate = new DateTime(2024, 1, 1),
            FinishDate = new DateTime(2024, 1, 15),
            Progress = 40d
        };
        
        // Add child tasks
        parentTask.Child.Add(new TaskDetails
        {
            TaskId = 2,
            TaskName = "Define project scope",
            StartDate = new DateTime(2024, 1, 1),
            FinishDate = new DateTime(2024, 1, 5),
            Progress = 100d
        });
        
        parentTask.Child.Add(new TaskDetails
        {
            TaskId = 3,
            TaskName = "Gather requirements",
            StartDate = new DateTime(2024, 1, 6),
            FinishDate = new DateTime(2024, 1, 10),
            Progress = 50d
        });
        
        TaskDetails.Add(parentTask);
    }
}

结果: 一个功能完善的甘特图控件,可显示具有层级结构、进度跟踪和时间线可视化的项目任务。

常见模式

模式 1:设置任务依赖关系
// Create tasks with dependencies
var task1 = new TaskDetails 
{ 
    TaskId = 1, 
    TaskName = "Design", 
    StartDate = new DateTime(2024, 1, 1),
    FinishDate = new DateTime(2024, 1, 10)
};

var task2 = new TaskDetails 
{ 
    TaskId = 2, 
    TaskName = "Development",
    StartDate = new DateTime(2024, 1, 11),
    FinishDate = new DateTime(2024, 1, 25)
};

// Task2 depends on Task1 (Finish-to-Start)
task2.Predecessor.Add(new Predecessor { GanttTaskIndex = 1, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });

TaskDetails.Add(task1);
TaskDetails.Add(task2);
模式 2:分配资源
// Define resources
var resources = new ObservableCollection<Resource>
{
    new Resource { ID = 1, Name = "John Smith" },
    new Resource { ID = 2, Name = "Jane Doe" }
};

// Assign resources to task
var task = new TaskDetails
{
    TaskId = 1,
    TaskName = "Implementation",
    StartDate = new DateTime(2024, 1, 1),
    FinishDate = new DateTime(2024, 1, 15),
    Resources = resources
};
模式 3:自定义计划类型
<syncfusion:GanttControl x:Name="ganttControl"
                         ItemsSource="{Binding TaskDetails}"
                         ScheduleType="WeekWithDays"
                         ScheduleRangePadding="5">
</syncfusion:GanttControl>
// Or in code-behind
ganttControl.ScheduleType = ScheduleType.WeekWithDays;
ganttControl.ScheduleRangePadding = 5;
模式 4:基线对比
// Enable baseline support
var task = new TaskDetails
{
    TaskId = 1,
    TaskName = "Project Phase 1",
    StartDate = new DateTime(2024, 1, 1),
    FinishDate = new DateTime(2024, 2, 1),
    BaselineStart = new DateTime(2024, 1, 1),
    BaselineFinish = new DateTime(2024, 1, 25),  // Original plan
    Progress = 60d
};
// Actual finish extends beyond baseline - shows delay

关键属性与 API

基本属性
属性类型描述
ItemsSourceIEnumerable要显示的 TaskDetails 集合
GridWidthGridLength甘特图网格区域的宽度
ChartWidthGridLength甘特图图表区域的宽度
ScheduleTypeScheduleType时间线刻度(小时、天、周等)
ScheduleRangePaddingint计划单位的内边距
AutoExpandModeGanttAutoExpandMode任务的初始展开状态
ShowDateWithTimebool在网格中同时显示日期和时间
TaskDetails 属性
属性类型描述
TaskIdint任务的唯一标识符
TaskNamestring任务的显示名称
StartDateDateTime任务开始日期/时间
FinishDateDateTime任务结束日期/时间
DurationTimeSpan任务持续时间(计算得出或设置)
Progressdouble完成百分比(0-100)
ChildCollection用于构建层级结构的子任务
PredecessorCollection任务依赖关系
ResourcesCollection已分配的资源
常用方法
  • ExpandAll() - 展开所有任务节点
  • CollapseAll() - 折叠所有任务节点
  • ExportToXML() - 将项目导出为 XML 文件
  • ImportFromXML() - 从 XML 文件导入项目

架构概述

┌─────────────────────────────────────────────────────────────┐
│                      GanttControl                            │
├─────────────────────────────────────────────────────────────┤
│                                                               │
│  ┌──────────────────────┐  ┌─────────────────────────────┐ │
│  │    GanttGrid         │  │   GanttChartVisualControl   │ │
│  │  ┌────────────────┐  │  │  ┌────────────────────────┐ │ │
│  │  │ Header         │  │  │  │  ScheduleHeader        │ │ │
│  │  ├────────────────┤  │  │  ├────────────────────────┤ │ │
│  │  │ Parent Task    │  │  │  │  ═══╗                  │ │ │
│  │  │  ├─ Child 1    │  │  │  │     ║═══════           │ │ │
│  │  │  └─ Child 2    │  │  │  │          ║═════════════║ │ │
│  │  │ Parent Task    │  │  │  │  ═══════════╗          │ │ │
│  │  │  ├─ Child 3    │  │  │  │            ║════       │ │ │
│  │  └────────────────┘  │  │  └────────────────────────┘ │ │
│  └──────────────────────┘  └─────────────────────────────┘ │
│                                                               │
│         Data: ObservableCollection<TaskDetails>              │
└─────────────────────────────────────────────────────────────┘

常见用例

  1. 软件项目管理 - 跟踪开发冲刺、任务和里程碑
  2. 施工规划 - 管理施工阶段、依赖关系和资源
  3. 活动规划 - 安排活动任务、时间线和资源分配
  4. 研究项目 - 跟踪研究阶段、实验和交付成果
  5. 制造排程 - 规划生产任务、依赖关系和资源
  6. 营销活动 - 管理活动任务、时间线和团队分工

评论

支持 Markdown