Add GanttControl to a Project

  • 4 minutes to read

This tutorial demonstrates how to add a GanttControl to your project and use built-in GanttControl's data classes.

Requirements

Add the following DevExpress assemblies to your project to use the GanttControl.

  • DevExpress.Data
  • DevExpress.Mvvm
  • DevExpress.Xpf.Core
  • DevExpress.Xpf.Gantt
  • DevExpress.Xpf.Grid
  • DevExpress.Xpf.Grid.Core
TIP

You can add a GanttControl to your application from a VS Toolbox. All the required references will be added automatically.

Data Model

The GanttControl ships with built-in data objects that you can use to create view models:

  • GanttTask

    Represents gantt tasks.

  • GanttPredecessorLink

    Represents task relationships.

The GanttTask class exposes the following properties:

Property Description
Id Specifies the task's id
ParentId Specifies the task's parent id
StartDate Specifies the task's start date
FinishDate Specifies the task's finish date
Progress Specifies task's progress
Name Specifies the task's name and caption
BaselineStartDate Specifies the task's baseline start date
BaselineFinishDate Specifies the task's baseline finish date
PredecessorLinks Provides access to a collection of task's predecessors

The Id and ParentId properties allow you to organize a task hierarchy in a plain data collection.

The GanttPredecessorLink provides the following properties.

Property Description
PredecessorTaskId Specifies the task predecessor's id
LinkType Specifies the task relationship type (FinishToStart, FinishToFinish, etc.)
Lag Specifies the dependency time lag.

Add a ViewModel

Create a ViewModel class that exposes the Tasks property of the ObservableCollection<GanttTask> type.

The code sample below demonstrates a ViewModel used in this tutorial.

using DevExpress.Mvvm.Gantt;
using System;
using System.Collections.ObjectModel;

namespace GanttControlDemoApp {
    public class ProjectTaskViewModel {
        public ObservableCollection<GanttTask> Tasks { get; set; }

        public ProjectTaskViewModel() {
            Tasks = new ObservableCollection<GanttTask> {
                new GanttTask() {
                    Id = 0,
                    Name = "Add a new feature",
                    StartDate = DateTime.Now.AddDays(-1),
                    FinishDate = DateTime.Now.AddDays(6)
                },
                new GanttTask() {
                    Id =1, 
                    ParentId = 0,
                    Name = "Write the code",
                    StartDate = DateTime.Now.AddDays(-1),
                    FinishDate = DateTime.Now.AddDays(2)
                },
                new GanttTask() {
                    Id = 2,
                    ParentId = 0,
                    Name = "Write the docs",
                    StartDate = DateTime.Now.AddDays(2),
                    FinishDate = DateTime.Now.AddDays(5)
                },
                new GanttTask() {
                    Id = 3,
                    ParentId = 0,
                    Name = "Test the new feature",
                    StartDate = DateTime.Now.AddDays(2),
                    FinishDate = DateTime.Now.AddDays(5)
                },
                new GanttTask() {
                    Id = 4,
                    ParentId = 0,
                    Name = "Release the new feature",
                    StartDate = DateTime.Now.AddDays(5),
                    FinishDate = DateTime.Now.AddDays(6),
                }
            };
        }
    }
}

Add Gantt Control to the View

Add the GanttControl to your project.

To do this, open the Visual Studio toolbox, find the DX.18.2: Data & Analytics tab, drag the GanttControl toolbox item, and drop it to a window.

Pass the ViewModel to the view's DataContext property, and bind the GanttControl's ItemsSource property to the ViewModel's Task property.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:GanttControlDemoApp"
        xmlns:dxgn="http://schemas.devexpress.com/winfx/2008/xaml/gantt" 
        x:Class="GanttControlDemoApp.MainWindow">
    <Window.DataContext>
        <local:ProjectTaskViewModel />
    </Window.DataContext>
    <Grid>
        <dxgn:GanttControl ItemsSource="{Binding Tasks}" />
    </Grid>
</Window> 

The image below illustrates the result.

The GanttControl now displays the summary task and collapses the child tasks. Let's display data columns with tasks' properties and display all the tasks.

Add task columns

Use the control's GanttControl.Columns property to add columns.

Gantt columns are represented by the GanttColumn class. You can bind a column to any of the task's standard properties using the BindTo property, like in the code sample below.

<dxgn:GanttControl ItemsSource="{Binding Tasks}">
    <dxgn:GanttControl.Columns>
        <dxgn:GanttColumn BindTo="Name" />
        <dxgn:GanttColumn BindTo="StartDate" />
        <dxgn:GanttColumn BindTo="FinishDate" />
    </dxgn:GanttControl.Columns>
</dxgn:GanttControl>

Configure the GanttView

The GanttView specifies how Gantt chart items are displayed.

Let's expand all the Gantt tasks when the control is loaded. Set the AutoExpandAllNodes property to true. You can also disable editing and sorting items by setting the view's AllowEditing and AllowSorting properties to false, like in the code sample below.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:GanttControlDemoApp"
        xmlns:dxgn="http://schemas.devexpress.com/winfx/2008/xaml/gantt" 
        x:Class="GanttControlDemoApp.MainWindow">
    <Window.DataContext>
        <local:ProjectTaskViewModel />
    </Window.DataContext>
    <Grid>
        <dxgn:GanttControl ItemsSource="{Binding Tasks}">
            <dxgn:GanttControl.Columns>
                <dxgn:GanttColumn BindTo="Name" />
                <dxgn:GanttColumn BindTo="StartDate" />
                <dxgn:GanttColumn BindTo="FinishDate" />
            </dxgn:GanttControl.Columns>
            <dxgn:GanttControl.View>
                <dxgn:GanttView AutoExpandAllNodes="True" AllowEditing="False" AllowSorting="False"/>
            </dxgn:GanttControl.View>
        </dxgn:GanttControl>
    </Grid>
</Window>

The image below illustrates the result.

Task dependencies

Each task exposes the PredecessorLinks property. This property provides access to a collection of GanttPredecessorLink objects. Each GanttPredecessorLink objects contains a task predecessor's Id and a relation link type.

Add the following code to the ViewModel.

// the "Release the new feature" task can begin only when the "Write the docs" task is complete
Tasks[4].PredecessorLinks.Add(new GanttPredecessorLink() { PredecessorTaskId = 2, LinkType = PredecessorLinkType.FinishToStart });
// the "Release the new feature" task can begin only when the "Test the new feature" task is complete
Tasks[4].PredecessorLinks.Add(new GanttPredecessorLink() { PredecessorTaskId = 3, LinkType = PredecessorLinkType.FinishToStart });
// the "Write the docs" task can begin only when the "Write the code" task is complete
Tasks[2].PredecessorLinks.Add(new GanttPredecessorLink() { PredecessorTaskId = 1, LinkType = PredecessorLinkType.FinishToStart });
// the "Test the new feature" task can begin only when the "Write the code" task is complete
Tasks[3].PredecessorLinks.Add(new GanttPredecessorLink() { PredecessorTaskId = 1, LinkType = PredecessorLinkType.FinishToStart });

Now, the GanttControl displays task relationships. The image below illustrates the result.

GitHub Example

View Example: Getting Started - Add GanttControl to a Project