WinForms Gantt — Visualize Project Schedules within a Timeline

Our WinForms Gantt Control ships with a new timeline UI element (v23.1). The Gantt control itself allows you to plan/manage projects, while the timeline displays start and due dates for individual tasks and offers a bird's eye view of project progress.

Timeline UI

The timeline can display multiple timeline bars with tasks/milestones, a today indicator, and date range selector.

The timeline's context menu allows users to add/remove timeline bars, remove tasks/milestones from the timeline, or quickly navigate to a task within the Gantt tree and chart.

Display Timeline

The Gantt control can display a timeline at the top or bottom.

using DevExpress.XtraGantt;

// Displays a timeline at the top of the Gantt control.
ganttControl1.OptionsTimeline.TimelinePosition = TimelinePosition.Top;

User Experience

End user options include:

• Add/Remove Tasks and Milestones to/from Timeline
• Add/Remove Timeline Bars
• Select Multiple Tasks (click on a task and hold down the Ctrl key to select the task)
• Go to Task
• Pan and Zoom Timeline Scale
• Select Time Range
• Resize Timeline

Timeline Customization Settings (API)

Use the GanttControl.OptionsTimeline property to access and customize the following timeline settings:

• TimelinePosition— Specifies the visibility and position of a timeline.
• AllowResize— Specifies whether the height of a timeline can be modified by a user or in code.
• TimelineHeight— Specifies timeline height (in pixels).
• ShowTodayIndicator— Specifies whether to display the Today indicator.
• MinUnit/MaxUnit— Specify minimum/maximum time intervals.

You can modify the caption/details/description of individual tasks based on a specific condition. To apply modifications, handle the CustomTimelineItemText event. The Gantt control fires this event for each task displayed within the timeline.

We also implemented Custom Draw APIs so you can paint timeline bars and tasks as needed. These APIs include:

• CustomDrawTimelineBar
• CustomDrawTimelineTask

Bind the Timeline to Data

Use the following properties to map fields in your data source to task properties:

• ChartMappings.TimelineCaption— Specifies the name of a field in a data source (with string values used for task captions on the timeline).
• ChartMappings.VisibleInTimelineFieldName— Specifies the name of a field in a data source (with Boolean values that specify which tasks to display on the timeline).

public Form1() {
    InitializeComponent();
    // Bind the Gantt control to a data source.
    ganttControl1.DataSource = TaskData.InitData();
    // Configures the Gantt control's mappings.
    ganttControl1.TreeListMappings.KeyFieldName = "Id";
    ganttControl1.TreeListMappings.ParentFieldName = "ParentId";
    ganttControl1.ChartMappings.StartDateFieldName = "StartDate";
    ganttControl1.ChartMappings.FinishDateFieldName = "EndDate";
    ganttControl1.ChartMappings.TimelineCaption = "TimelineCaption";
    // Maps the Gantt control to a field in a data source with Boolean values that
    // specify which tasks to display on the timeline when the application starts.
    ganttControl1.ChartMappings.VisibleInTimelineFieldName = "ShowInTimeline";
}

public class TaskData {
    public TaskData(int id) {
        this.id = id;
    }
    int id;
    public int Id {
        get { return id; }
    }
    public string TimelineCaption {
        get { return string.Format("Timeline Caption: {0}", Name); }
    }
    public bool ShowInTimeline { get; set; } = false;
    public int ParentId { get; set; }
    public string Name { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public static List<TaskData> InitData() {
        return new List<TaskData>() {
            new TaskData(0){ Name = "Task A", ParentId = 0, StartDate = new DateTime(2023, 3, 1), EndDate = new DateTime(2024, 3, 31) },
            new TaskData(1){ Name = "Task B", ParentId = 0, StartDate = new DateTime(2023, 3, 1), EndDate = new DateTime(2023, 7, 1), ShowInTimeline = true },
            new TaskData(2){ Name = "Task C", ParentId = 0, StartDate = new DateTime(2023, 7, 1), EndDate = new DateTime(2023, 11, 1) },
            new TaskData(3){ Name = "Task D", ParentId = 0, StartDate = new DateTime(2023, 11, 1), EndDate = new DateTime(2024, 3, 31) },
        };
    }
}

WYSIWYG Printing and Export

You can print/export the Gantt and its timeline. Supported export file formats include: PDF, XLS, XLSX, MHT, CSV, HTML, RTF, DOCX, TXT (or as an Image file).

Demo and Documentation

• Gantt Demo (to execute this demo, you must first install the DevExpress WinForms product library)
• Gantt Timeline Documentation

Your Feedback Matters

Please take a moment to answer the following questions. Your feedback will help us fine-tune development plans in our current release cycle.