Getting Started with UWP Gantt (SfGantt)

This section explains how to create and configure a simple Gantt application.

Referencing Essential Studio components in your solution

Adding SDK reference

  1. Open Reference Manager window in your project.
  2. Go to Universal Windows > Extensions.
  3. Select Syncfusion Controls for UWP XAML.

Adding SDK references in project

Adding assembly reference

Individual references can be added to the project instead of SDK “Syncfusion Controls for UWP XAML”, which refers to all the controls in the Syncfusion control library.

In the Add Reference window, browse and choose the reference assembly from the following location.

[Installed location]\Syncfusion\Essential Studio\[Installed version]\Assemblies for Universal Windows\10.0\

Adding UWP Gantt assembly reference in project

The following list of assemblies should be added as references to use the Gantt control in applications.

Required assemblies Description
Syncfusion.SfGantt.UWP Contains classes that handles all the operations in Gantt.
Syncfusion.Data.UWP Dependent assembly for Syncfusion.SfGrid.UWP.
Syncfusion.SfGrid.UWP Contains classes that handles all UI operations of tree grid view in the Gantt.
Syncfusion.SfInput.UWP Contains various editor controls (SfNumericTextBox, SfDateTimeEdit, etc.), which are used in the tree grid view.
Syncfusion.SfShared.UWP Dependent assembly for Syncfusion.SfInput.UWP.
Syncfusion.SfTabControl.UWP Contains classes that handles tab control.

Adding SfGantt manually

  1. After adding the required assembly references to the project as discussed in the previous section, add the “Syncfusion.UI.Xaml.Gantt” namespace to the application as shown in the following code sample.
xmlns:gantt="using:Syncfusion.UI.Xaml.Gantt"
using Syncfusion.UI.Xaml.Gantt;
  1. Instance the Gantt as shown in the following code sample.
<gantt:SfGantt></gantt:SfGantt>
SfGantt sfGantt = new SfGantt();

Adding SfGantt from toolbox

Drag the SfGantt control from the toolbox to your application.

Loading UWP Gantt control to toolbox page

Now, the “Syncfusion Controls for UWP XAML” reference will be added to the application references, and the xmlns namespace will be generated in MainWindow.xaml as shown in the following screenshot.

Adding SDK reference automatically

Initializes the UWP Gantt control instance automatically

Creating data model

Create a collection of TaskDetails objects to populate a task in SfGantt as shown in the following code sample.

  • c#
  • public class ProjectTrackerViewModel
    {
        public ProjectTrackerViewModel()
        {
            _taskCollection = this.GetData();
        }
    
        private ObservableCollection<TaskDetail> _taskCollection;
    
        /// <summary>
        /// Gets or sets the appointment item source.
        /// </summary>
        /// <value>The appointment item source.</value>
        public ObservableCollection<TaskDetail> TaskCollection
        {
    
            get { return _taskCollection; }
    
            set { _taskCollection = value; }
    
        }
    
        /// <summary>
        /// Gets the data.
        /// </summary>
        /// <returns></returns>
        public ObservableCollection<TaskDetail> GetData()
        {
            ObservableCollection<TaskDetail> Schedule = new ObservableCollection<TaskDetail>();
    
            Schedule.Add(new TaskDetail
            {
                Name = "Project Schedule",
                ID = "1"
            });
    
            ObservableCollection<TaskDetail> ScheduleProcess = new ObservableCollection<TaskDetail>();
    
            ScheduleProcess.Add(new TaskDetail
            {
                Name = "Planning",
                ID = "2"
            });
    
            ScheduleProcess.Add(new TaskDetail
            {
                StartDate = new DateTime(2014, 3, 30),
                FinishDate = new DateTime(2014, 4, 2),
                Name = "Design",
                ID = "7"
            });
    
            ScheduleProcess.Add(new TaskDetail
            {
                StartDate = new DateTime(2014, 4, 2),
                FinishDate = new DateTime(2014, 4, 7),
                Name = "Implementation Phase",
                ID = "12"
            });
    
            ScheduleProcess.Add(new TaskDetail
            {
                StartDate = new DateTime(2014, 4, 7),
                FinishDate = new DateTime(2014, 4, 12),
                Name = "Integration",
                ID = "37"
            });
    
            ScheduleProcess.Add(new TaskDetail
            {
                StartDate = new DateTime(2014, 4, 12),
                FinishDate = new DateTime(2014, 4, 17),
                Name = "Final Testing",
                ID = "38"
            });
    
            ScheduleProcess.Add(new TaskDetail
            {
                StartDate = new DateTime(2014, 4, 18),
                FinishDate = new DateTime(2014, 4, 18),
                Name = "Final Delivery",
                ID = "39"
            });
    
            Schedule[0].Children = ScheduleProcess;
    
            ObservableCollection<TaskDetail> Planning = new ObservableCollection<TaskDetail>();
    
            Planning.Add(new TaskDetail
            {
                StartDate = new DateTime(2014, 3, 25),
                FinishDate = new DateTime(2014, 3, 30),
                Name = "Plan timeline",
                ID = "3",
                Progress = 100
            });
    
            Planning.Add(new TaskDetail
            {
                StartDate = new DateTime(2014, 3, 25),
                FinishDate = new DateTime(2014, 3, 30),
                Name = "Plan budget",
                ID = "4",
                Progress = 100
            });
    
            Planning.Add(new TaskDetail
            {
                StartDate = new DateTime(2014, 3, 25),
                FinishDate = new DateTime(2014, 3, 30),
                Name = "Allocate resources",
                ID = "5",
                Progress = 100
           });
    
           Planning.Add(new TaskDetail
           {
                StartDate = new DateTime(2014, 3, 30),
                FinishDate = new DateTime(2014, 3, 30),
                Name = "Planning complete",
                ID = "6",
                Progress = 100
            });
    		
            ScheduleProcess[0].Children = Planning;
    
            return Schedule;
        }
    }

    Binding data

    To bind the data source of the SfGantt, set the ItemsSource property as shown in the following code sample.

    <gantt:SfGantt ItemsSource="{Binding TaskCollection}" />
    SfGantt sfGantt = new SfGantt();
    sfGantt.ItemsSource = (this.DataContext as ProjectTrackerViewModel).TaskCollection;

    Defining visible columns

    By default, the grid view is manipulated with name, start date, finish date, duration, progress, predecessor, and resources columns.

    The visible columns of grid view can be customized using the VisibleGridColumns property.

    The following code sample demonstrates how to customize the visible columns.

    <gantt:SfGantt VisibleGridColumns="Id,Name,StartDate,FinishDate,Progress" 
                   ItemsSource="{Binding TaskCollection}" >
    </gantt:SfGantt>
    SfGantt sfGantt = new SfGantt();
    
    sfGantt.ItemsSource = (this.DataContext as ProjectTrackerViewModel).TaskCollection;
    
    sfGantt.VisibleGridColumns = TaskAttributes.ID | TaskAttributes.Name | TaskAttributes.StartDate |
                                 TaskAttributes.FinishDate | TaskAttributes.Progress;

    UWP Gantt with visible columns

    Sorting

    Sorting can be enabled using the AllowSorting property. The sorting functionality is used to arrange the tasks in ascending or descending order based on a column.

    The following code sample demonstrates how to enable sorting in the Gantt control.

    <gantt:SfGantt ItemsSource="{Binding TaskCollection}" AllowSorting="True" >
    
    </gantt:SfGantt>
    SfGantt sfGantt = new SfGantt();
    
    sfGantt.ItemsSource = (this.DataContext as ProjectTrackerViewModel).TaskCollection;
    
    sfGantt.AllowSorting = true;

    UWP Gantt with sorting feature

    Editing

    Editing can be enabled using the AllowEditing property. You can edit cells and drag or resize the task bar or progress bar in chart view. The drag-and-drop functionality establishes the relationship between two tasks.

    The following code sample demonstrates how to enable editing in the Gantt control.

    <gantt:SfGantt ItemsSource="{Binding TaskCollection}" AllowEditing="True" >
    
    </gantt:SfGantt>
    SfGantt sfGantt = new SfGantt();
    
    sfGantt.ItemsSource = (this.DataContext as ProjectTrackerViewModel).TaskCollection;
    
    sfGantt.AllowEditing = true;

    NOTE

    Now, editing cannot be done in Windows Phones.

    Task relationships

    You can visualize the relationship between two tasks in the Gantt. These relationships are categorized into four types based on the start and finish dates of the tasks.

    • Start to Start(SS): You cannot start a task until the other task also starts.
    • Start to Finish(SF): You cannot finish a task until the other task finishes.
    • Finish to Start(FS): You cannot start a task until the other task finishes.
    • Finish to Finish(FF): You cannot finish a task until the other task finishes.

    The relationship can be created between two tasks by adding the task relationship in predecessor collection for the task in the TaskDetails.

    The following code sample demonstrates how to add predecessor in the tasks.

  • c#
  • ScheduleProcess[4].Predecessors.Add(new TaskRelationship()
    {
        ID = "37",
        Relationship = Relationship.FinishToStart
    });
    
    ScheduleProcess[5].Predecessors.Add(new TaskRelationship()
    {
        ID = "38",
        Relationship = Relationship.FinishToStart
    });
    
    Planning[3].Predecessors.Add(new TaskRelationship()
    {
        ID = "3",
        Relationship = Relationship.FinishToStart
    });
    
    Planning[3].Predecessors.Add(new TaskRelationship()
    {
        ID = "4",
        Relationship = Relationship.FinishToStart
    });
    
    Planning[3].Predecessors.Add(new TaskRelationship()
    {
        ID = "5",
        Relationship = Relationship.FinishToStart
    });

    UWP Gantt with task relationship

    Predecessor offset

    In Gantt, the predecessor Offset can be defined with the day duration unit.

    The following code sample demonstrates how to define offset time to the predecessor.

  • c#
  • ImplementiationModule1Child[1].Predecessors.Add(new TaskRelationship
    {
        ID = "15",
    	Offset = 4,
        Relationship = Relationship.FinishToStart
    });
    ImplementiationModule1Child[2].Predecessors.Add(new TaskRelationship
    {
        ID = "16",
    	Offset = 2,
        Relationship = Relationship.FinishToStart
    });
    ImplementiationModule1Child[3].Predecessors.Add(new TaskRelationship
    {
        ID = "17",
    	Offset = -4,
        Relationship = Relationship.FinishToStart
    });
    ImplementiationModule1Child[4].Predecessors.Add(new TaskRelationship
    {
        ID = "18",
    	Offset = -2,
        Relationship = Relationship.FinishToStart
    });

    UWP Gantt with predecessor offset

    Resources

    In the Gantt control, you can display and assign the resource for every task.

    1. Create a resource collection to be displayed in Gantt.
  • c#
  • private GanttResourceCollection _resourceCollection;
    
    /// <summary>
    /// Gets or sets the SfGantt resources.
    /// </summary>
    /// <value>The SfGantt resources.</value>
    public GanttResourceCollection ResourceCollection
    {
        get { return _resourceCollection; }
        set { _resourceCollection = value; }
    }
    
    /// <summary>
    /// Gets the resources for the project.
    /// </summary>
    /// <returns></returns>
    private GanttResourceCollection GetResources()
    {
        GanttResourceCollection Resources = new GanttResourceCollection();
        Resources.Add(new GanttResource { ID = "1", Name = "Project Manager" });
        Resources.Add(new GanttResource { ID = "2", Name = "Developer" });
        Resources.Add(new GanttResource { ID = "3", Name = "Testing Engineer" });
        return Resources;
    }
    1. Bind the resource collection to the ProjectResources property.
    <gantt:SfGantt ItemsSource="{Binding TaskCollection}" ProjectResources="{Binding ResourceCollection}" >
    
    </gantt:SfGantt>
    SfGantt sfGantt = new SfGantt();
    
    sfGantt.ItemsSource = (this.DataContext as ProjectTrackerViewModel).TaskCollection;
    
    sfGantt.ProjectResources = (this.DataContext as ProjectTrackerViewModel)..ResourceCollection;
    1. Assign the resource to tasks.
  • c#
  • public ObservableCollection<TaskDetail> GetData()
    {
        this._resourceCollection = this.GetResources();
    
        //To define resource for a task.
        Planning[0].Resources.Add("1");
        Planning[1].Resources.Add("1");
        Planning[2].Resources.Add("1");
        ScheduleProcess[3].Resources.Add("2");
        ScheduleProcess[4].Resources.Add("3");
    }

    UWP Gantt can assign the resource for task

    Non-working days

    This functionality is used to highlight and customize the weekends in the Gantt control. By default, Saturday and Sunday are considered as weekends.

    The following code sample demonstrates how to display Friday as weekend.

    <gantt:SfGantt ItemsSource="{Binding TaskCollection}" NonWorkingDays="Friday" NonWorkingDaysBackground="Blue" >
            <gantt:SfGantt.TimescaleSettings>
                <gantt:TimescaleSettings>
                    <gantt:TimescaleSettings.TopTier>
                        <gantt:TimescaleTier IntervalType="Weeks"></gantt:TimescaleTier>
                    </gantt:TimescaleSettings.TopTier>
                    <gantt:TimescaleSettings.BottomTier>
                        <gantt:TimescaleTier IntervalType="Days"></gantt:TimescaleTier>
                    </gantt:TimescaleSettings.BottomTier>
                </gantt:TimescaleSettings>
            </gantt:SfGantt.TimescaleSettings>
    </gantt:SfGantt>
    SfGantt sfGantt = new SfGantt();
    
    sfGantt.ItemsSource = (this.DataContext as ProjectTrackerViewModel).TaskCollection;
    
    sfGantt.NonWorkingDays = Days.Friday;
    
    sfGantt.NonWorkingDaysBackground = new SolidColorBrush(Colors.Blue);
    
    sfGantt.TimescaleSettings.TopTier.IntervalType = IntervalType.Weeks;
    
    sfGantt.TimescaleSettings.BottomTier.IntervalType = IntervalType.Days;

    UWP Gantt with non-working days feature

    NOTE

    To display the non-working days, either the interval type must be set to week or the less interval type set to days, hours, and minutes.