Getting Started with WPF Gantt

Appearance and structure of Gantt

Gantt control is composed of three controls. They are:

  • GanttGrid
  • ScheduleHeader
  • GanttChartVisualControl

WPF Gantt appearance and structure

Gantt grid

Gantt Grid is a table view control which displays the scheduled tasks/activities of the project with its hierarchy. You can edit the fields of the bounded tasks using this grid.

WPF Gantt grid allotment

  • Header— Header represents the table header which contains the field name of the task.
  • Parent Task—Parent task represents the summary of the child tasks. This is an activity which will be further split into various child tasks.
  • Child Task—Child task represents an individual task. This contains only the information about the specific task. The Child task is a part of parent task.
  • Expand/Collapse Button—Expand/Collapse button allows you to expand or collapse the particular hierarchy.

Gantt chart

Gantt Chart is an items control which provides a graphically representation of the task/activity that are currently scheduled. Gantt Chart have different components to represent the type of Task, Progress of the Task and Relationship between Tasks.

WPF Gantt chart allotment

  • Node— Node represents an individual or child task.
  • Header Node—HeaderNode represents the parent or summary task of the projects.
  • Milestone—Milestone represents the target to be completed in a day.
  • Progress Indicator—Progress indicator represents the percentage of work completed for the task.
  • Connector—Connector represents the dependency relationship between the tasks.

Gantt schedule

Gantt Schedule is a medium to measure the progress in the Gantt control. Using this you can track or measure the progress of the task or activity.

WPF Gantt schedule allotment

Class diagram

WPF Gantt flow diagram

Feature summary

The following features are available in the Essential Gantt for WPF:

  • Data Binding
  • TaskDetails Binding
  • External Property Binding
  • Dependency relationship
  • CustomToolTip
  • Calendar customization
  • Custom Node style
  • VisualStyle
  • XML Import/Export

Adding GanttControl to an application

You can create a project management application using Essential Gantt WPF.

You can create Gantt control in two methods. They are:

  • Programmatically
  • Through Designer

Programmatically creating GanttControl

The following are the steps to create GanttControl programmatically:

Adding GanttControl

You can add Gantt control to the application using the following code:

<Sync:GanttControl x:Name="Gantt" />
//Initializing Gantt
 GanttControl Gantt = new GanttControl();

When the code runs, an empty Gantt with in-built TaskDetails collection will be displayed.

Binding data to GanttControl

Create a collection of tasks and bind it to the newly created GanttControl as given in the following code:

<Sync:GanttControl ItemsSource="{Binding TaskCollection}">
    <Sync:GanttControl.DataContext>
        <local:ViewModel></local:ViewModel>
    </Sync:GanttControl.DataContext>
</Sync:GanttControl>
//Initializing Gantt
GanttControl Gantt = new GanttControl();
ViewModel model=  new ViewModel();
this.Gantt.DataContext = model;
Gantt.ItemsSource = model.GanttItemSource;
  • c#
  • [C#]
    
    public class ViewModel
    {
        public ObservableCollection<TaskDetails> TaskCollection { get; set; }
        public ViewModel()
        {
            TaskCollection = this.GetDataSource();
        }
        
        private ObservableCollection<TaskDetails> GetDataSource()
        {
            ObservableCollection<TaskDetails> task = new ObservableCollection<TaskDetails>();
            task.Add(
                new TaskDetails
                    {
                        TaskId = 1,
                        TaskName = "Scope",
                        StartDate = new DateTime(2011, 1, 3),
                        FinishDate = new DateTime(2011, 1, 14),
                        Progress = 40d
                    });
    
            task[0].Child.Add(
                new TaskDetails
                    {
                        TaskId = 2,
                        TaskName = "Determine project office scope",
                        StartDate = new DateTime(2011, 1, 3),
                        FinishDate = new DateTime(2011, 1, 5),
                        Progress = 20d
                    });
    
            task[0].Child.Add(
                new TaskDetails
                    {
                        TaskId = 3,
                        TaskName = "Justify project office via business model",
                        StartDate = new DateTime(2011, 1, 6),
                        FinishDate = new DateTime(2011, 1, 7),
                        Duration = new TimeSpan(1, 0, 0, 0),
                        Progress = 20d
                    });
    
            task[0].Child.Add(
                new TaskDetails
                    {
                        TaskId = 4,
                        TaskName = "Secure executive sponsorship",
                        StartDate = new DateTime(2011, 1, 10),
                        FinishDate = new DateTime(2011, 1, 14),
                        Duration = new TimeSpan(1, 0, 0, 0),
                        Progress = 20d
                    });
    
            task[0].Child.Add(
                new TaskDetails
                    {
                        TaskId = 5,
                        TaskName = "Secure complete",
                        StartDate = new DateTime(2011, 1, 14),
                        FinishDate = new DateTime(2011, 1, 14),
                        Duration = new TimeSpan(1, 0, 0, 0),
                        Progress = 20d
                    });
    
            return task;
        }
    }

    Adding GanttControl through designer

    The following are the steps to create Gantt control through designer.

    1. Open the XAML page of the application.

      Designer page in application

    2. Select GanttControl from ToolBox.

      ToolBox window in application

    3. Drag-and-drop the GanttControl to Designer View.

      Loading WPF gantt control to designer page

    4. Gantt control is added to the window. Assembly reference will also be added to Project file.

      WPF Gantt control loaded in designer page

    5. Now you can customize the properties of Gantt control in the Properties Window.

    Adjusting chart and grid size

    The GanttControl allows users to set the width for GanttChart and GanttGrid using the ChartWidth and GridWidth properties. The following code sample demonstrates how to set width for chart and grid.

    <sync:GanttControl x:Name="control" GridWidth="200" ChartWidth="800" > 
    </Sync:GanttControl>
    //Initializing Gantt
    GanttControl control = new GanttControl();
    control.GridWidth = new GridLength(200); 
    control.ChartWidth = new GridLength(800);

    Schedule padding

    Gantt schedule view can be extended by using the ScheduleRangePadding property in GanttControl. This property extends the schedule with number of lower schedule units in starting position to improve the user experience.

    <Sync:GanttControl x:Name="control" ItemsSource="{Binding TaskCollection}"  ScheduleRangePadding="5">
    </Sync:GanttControl>
    //Initializing Gantt
    GanttControl control = new GanttControl();
    control.ScheduleRangePadding = 5;