Getting Started with UWP Gantt (SfGantt)
25 May 202119 minutes to read
This section explains how to create and configure a simple Gantt application.
Referencing Essential Studio components in your solution
Adding SDK reference
- Open Reference Manager window in your project.
- Go to Universal Windows > Extensions.
- Select Syncfusion Controls for UWP XAML.
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\
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
- 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;
- 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.
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.
Creating data model
Create a collection of TaskDetails objects to populate a task in SfGantt as shown in the following code sample.
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;
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;
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.
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
});
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.
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
});
Resources
In the Gantt control, you can display and assign the resource for every task.
- Create a resource collection to be displayed in Gantt.
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;
}
- 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;
- Assign the resource to tasks.
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");
}
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.
-
ShowNonWorkingDays
: Enables or disables the non-working days. -
NonWorkingDays
: Customizes the weekends. -
NonWorkingDaysBackground
: Changes the weekends highlighting color.
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;
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.