This tutorial demonstrates how to add a GanttControl to your project using the built-in GanttControl data class.
Require
Add the Devexpress.Wpf.Gantt Nuget package to your project using GanttControl.
data model
GanttControl carries and built-in data objects that can be used to create view models:
GanttTask
Present Gantt Chart Tasks
GanttPredecessorLink
Present task relationships
The GanttTask class exposes the following attributes:
| Attributes | describe |
| Id | Specify task id |
| ParentId | Specify task parent id |
| StartDate | Specify task start date |
| FinishDate | Specify task end date |
| Progress | Specify task process |
| Name | Specify task name and title |
| BaselineStartDate | Specify task baseline start date |
| BaselineFinishDate | Specify task baseline completion date |
| PredecessorLinks | Provides access to task record collections |
The Id and ParentId attributes allow organizing task hierarchies in blank data collections
GanttPredecessorLink provides the following properties
| Attributes | describe |
| PredecessorTask Id | Specify access record ID |
| LinkType | Specify the task relationship type (CompleteToStart, FinishToFinish, etc.) |
| Lag | Specify dependency time lag |
Add view model
Create a view model class that exposes the Tasks property ObservableCollection<GanttTask> type
The code example below demonstrates the view model
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 view
Add GanttControl to the project
Open the vs toolbox, find the DX.18.2:Data & Analytics page, drag the GanttControl toolbox content, and drag it to the window control
Pass the view model to the view DataContext property and bind the GanttControl's ItemsSource property to the view model'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 picture below demonstrates the results
GanttControl displays statistics tasks and collapsed subtasks. Show data rows and task properties and show all tasks
Add task line
Add rows using the control's GanttControl.Columns property
Gantt chart rows are displayed through the GanttColumn class. Bind a row to any task standard property using the BindTo property. Like the following code
<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>SetupGanttView
GanttView specifies Gantt chart content and display
Expand all Gantt chart tasks when the control loads. Set the AutoExpandAllNodes property to true. Content can be displayed and edited and sorted by setting the view's AllowEditing and AllowSorting properties to false, like the following code example
<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 demonstrates the results
Task dependencies
Each task exposes the PredecessorLinks property. Property provides access to the GanttPredecessorLink collection object. Each GanttPredecessorLink object contains the task access record id and the relative link type.
Add the following code to the view model
// 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 });GanttControl now displays task relationships. The following picture shows the results
