关于 syncfusion-wpf-gantt
面向 WPF 项目管理应用的 Syncfusion Essential Gantt 使用指南,介绍任务层级、排期、依赖关系、资源分配、交互和 XML 数据操作。
主要功能
- 01任务层级与依赖关系
- 02时间线和进度可视化
- 03拖动排期与任务重排
- 04资源分配和基线
- 05筛选、排序及 XML 导入导出
- 06本地化与视觉定制
适用场景
- 01规划软件任务、冲刺和里程碑
- 02管理施工阶段及依赖关系
- 03安排活动并分配资源
- 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.mddata-binding.mddata-operations.mddrag-drop-interaction.mdgetting-started.mdlocalization.mdresource-management.mdtask-relationships.mdtask-scheduling.md详细介绍
实现 WPF 甘特图控件
面向 WPF 应用程序的 Syncfusion® Essential Gantt 控件实现综合指南。甘特图控件是类似 MS Project 的项目管理视图,内置网格、计划和资源分配功能,旨在帮助项目经理制定计划、分配资源、跟踪任务进度并管理项目时间线。
何时使用此技能
在以下情况下使用此技能:
- 在 WPF 应用程序中实现项目管理功能
- 使用甘特图表示任务时间线
- 创建任务层级结构,并设置父子关系
- 配置任务依赖关系,并设置前置任务和后续任务关系
- 启用拖放操作,以安排任务和调整日期
- 使用基线和进度指示器跟踪项目进度
- 管理资源并将其分配给任务
- 使用自定义节点、工具提示和样式自定义甘特图的视觉效果
- 以 XML 格式导入/导出项目数据
- 实现缩放和时间线导航
- 添加筛选和排序以管理任务
- 支持国际项目的本地化
本技能涵盖甘特图控件的完整实现过程,从基本设置到高级自定义。
组件概述
架构
Essential Gantt 控件由三个主要组件组成:
- GanttGrid - 表格视图,用于显示已安排的任务及其层级和可编辑字段
- GanttChart - 图形表示,用于显示任务条、里程碑和依赖关系
- 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
基本属性
| 属性 | 类型 | 描述 |
|---|---|---|
ItemsSource | IEnumerable | 要显示的 TaskDetails 集合 |
GridWidth | GridLength | 甘特图网格区域的宽度 |
ChartWidth | GridLength | 甘特图图表区域的宽度 |
ScheduleType | ScheduleType | 时间线刻度(小时、天、周等) |
ScheduleRangePadding | int | 计划单位的内边距 |
AutoExpandMode | GanttAutoExpandMode | 任务的初始展开状态 |
ShowDateWithTime | bool | 在网格中同时显示日期和时间 |
TaskDetails 属性
| 属性 | 类型 | 描述 |
|---|---|---|
TaskId | int | 任务的唯一标识符 |
TaskName | string | 任务的显示名称 |
StartDate | DateTime | 任务开始日期/时间 |
FinishDate | DateTime | 任务结束日期/时间 |
Duration | TimeSpan | 任务持续时间(计算得出或设置) |
Progress | double | 完成百分比(0-100) |
Child | Collection | 用于构建层级结构的子任务 |
Predecessor | Collection | 任务依赖关系 |
Resources | Collection | 已分配的资源 |
常用方法
ExpandAll()- 展开所有任务节点CollapseAll()- 折叠所有任务节点ExportToXML()- 将项目导出为 XML 文件ImportFromXML()- 从 XML 文件导入项目
架构概述
┌─────────────────────────────────────────────────────────────┐
│ GanttControl │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────┐ ┌─────────────────────────────┐ │
│ │ GanttGrid │ │ GanttChartVisualControl │ │
│ │ ┌────────────────┐ │ │ ┌────────────────────────┐ │ │
│ │ │ Header │ │ │ │ ScheduleHeader │ │ │
│ │ ├────────────────┤ │ │ ├────────────────────────┤ │ │
│ │ │ Parent Task │ │ │ │ ═══╗ │ │ │
│ │ │ ├─ Child 1 │ │ │ │ ║═══════ │ │ │
│ │ │ └─ Child 2 │ │ │ │ ║═════════════║ │ │
│ │ │ Parent Task │ │ │ │ ═══════════╗ │ │ │
│ │ │ ├─ Child 3 │ │ │ │ ║════ │ │ │
│ │ └────────────────┘ │ │ └────────────────────────┘ │ │
│ └──────────────────────┘ └─────────────────────────────┘ │
│ │
│ Data: ObservableCollection<TaskDetails> │
└─────────────────────────────────────────────────────────────┘
常见用例
- 软件项目管理 - 跟踪开发冲刺、任务和里程碑
- 施工规划 - 管理施工阶段、依赖关系和资源
- 活动规划 - 安排活动任务、时间线和资源分配
- 研究项目 - 跟踪研究阶段、实验和交付成果
- 制造排程 - 规划生产任务、依赖关系和资源
- 营销活动 - 管理活动任务、时间线和团队分工