Highlighting Tasks in WPF Gantt

Highlighting tasks allows you to highlight a specific set of tasks in the Gantt chart region. This feature will get the set of tasks as input and highlight those tasks with the specified color in the Gantt chart region. It will accept a linear set of tasks of type IList as input. You can also specify the highlighting brush through the provided API.

Use Case Scenario

  • When you like to view some specific set of tasks with a different color, you can easily achieve that by providing that set of tasks as input.
  • This feature also helps the user to highlight tasks that are in a critical path of a project.

Properties

Property Description Type Data Type
HighlightedItems The items that are passed through this API will be highlighted in Gantt chart region. The items should be in linear form. Dependency IList
HighlightItemBrush Specifies the color in which items should be highlight Dependency Brush

Adding Highlighting Tasks to an Application

To highlight a set of tasks in Gantt chart region:

  1. Define the Gantt with initial setup.
  2. Bind the tasks that need to be highlighted with Gantt’s HighlightedItems API.
  3. If required, change the value of the Gantt’s HighlightItemBrush API to change the item highlight color. The default color is red.
<sync:GanttControl x:Name="Gantt"
                   ItemsSource="{Binding GanttItemSource}" 
                   HighlightedItems="{Binding HighlightedTasks}">
</sync:GanttControl>
/// Codes in View Model 
/// <summary>
/// Initializes a new instance of the <see cref="ViewModel"/> class.
/// </summary>
public ViewModel()
{
    this.AddHighlightedTasks();
}

IList _highlightedTasks = new List<Task>();

/// <summary>
/// Gets or sets the highlighted tasks.
/// </summary>
/// <value>The highlighted tasks.</value>
public IList HighlightedTasks
{
    get
    {
        return _highlightedTasks;
    }
    set
    {
        _highlightedTasks = value;
        this.OnPropertyChanged("HighlightedTasks");
    }
}

/// <summary>
/// Adds the highlighted tasks.
/// </summary>
internal void AddHighlightedTasks()
{
    List<Task> tasks = new List<Task>();
    /// Adding the list of tasks
    tasks.AddRange(this.GanttItemSource[0].ChildTask[0].ChildTask[2].ChildTask);
    tasks.AddRange(this.GanttItemSource[0].ChildTask[1].ChildTask);
    this.HighlightedTasks = tasks;
}

/// Adding Highlighted items code behind
this.Gantt.HighlightedItems = this.view.HighlightedTasks;

The following image shows the Gantt with Highlighted Tasks:

Gantt with Highlighted Tasks

To view samples:

  1. Go to the Syncfusion Essential Studio installed location.
    Location: Installed Location\Syncfusion\Essential Studio\18.3.0.35\Infrastructure\Launcher\Syncfusion Control Panel
  2. Open the Syncfusion Control Panel in the above location (or) Double click on the Syncfusion Control Panel desktop shortcut menu.
  3. Click Run Samples for WPF under the User Interface Edition panel
  4. Select Gantt
  5. Expand the Interactive Features item in the Sample Browser
  6. Choose Highlighting Tasks to launch the sample.