Add GanttControl to a Project
- 5 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 DevExpress.Wpf.Gantt NuGet package to your project to use the GanttControl.
Tip
You can add a GanttControl to your application from a VS Toolbox. All the required references will be added automatically. If you add the DevExpress products via a NuGet feed instead of the Unified Component Installer, the toolbox doesn’t contain DevExpress controls until you add the corresponding NuGet package.
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.
