wpf-401649-controls-and-libraries-gantt-control-resources.md
The GanttControl allows you to assign resources to tasks. Resources can be people responsible for tasks, equipment, and materials. You can also specify the percentage of time a resource spends on a task.
Use the GanttView.ResourcesSource property to bind the GanttControl to a source with resources.
<dxgn:GanttControl ItemsSource="{Binding Items}">
<dxgn:GanttControl.Columns>
<dxgn:GanttColumn BindTo="Name"/>
<dxgn:GanttColumn BindTo="StartDate"/>
<dxgn:GanttColumn BindTo="FinishDate"/>
</dxgn:GanttControl.Columns>
<dxgn:GanttControl.View>
<dxgn:GanttView ResourcesSource="{Binding Resources}" ... />
</dxgn:GanttControl.View>
</dxgn:GanttControl>
public class StartupBusinessPlanViewModel {
public List<GanttTask> Items { get; private set; }
public List<GanttResource> Resources { get; private set; }
// ...
public StartupBusinessPlanViewModel() {
this.Items = CreateData();
this.Resources = CreateResources();
// ...
}
List<GanttTask> CreateData() {
var tasks = new List<GanttTask>();
// ...
tasks.Add(new GanttTask { Id = 53,
ParentId = 48,
Name = "Describe strengths, weaknesses, assets and threats",
StartDate = new DateTime(2019, 1, 9, 13, 0, 0),
FinishDate = new DateTime(2019, 1, 10, 12, 0, 0),
});
tasks.Add(new GanttTask { Id = 54,
ParentId = 48,
Name = "Estimate sales volume during startup period",
StartDate = new DateTime(2019, 1, 10, 13, 0, 0),
FinishDate = new DateTime(2019, 1, 11, 12, 0, 0),
});
// ...
return tasks;
}
List<GanttResource> CreateResources() {
var resources = new List<GanttResource>();
resources.Add(new GanttResource { Name = "Business Advisor", Id = 1 });
resources.Add(new GanttResource { Name = "Peers", Id = 2 });
resources.Add(new GanttResource { Name = "Lawyer", Id = 3 });
resources.Add(new GanttResource { Name = "Government Agency", Id = 4 });
resources.Add(new GanttResource { Name = "Manager", Id = 5 });
resources.Add(new GanttResource { Name = "Owners", Id = 6 });
resources.Add(new GanttResource { Name = "Accountant", Id = 7 });
resources.Add(new GanttResource { Name = "Banker", Id = 8 });
resources.Add(new GanttResource { Name = "Information Services", Id = 9 });
return resources;
}
}
After you bound the GanttControl to resources, map resource properties to data source fields. To do this, use the GanttView.ResourceMappings property.
GanttResourceMappings.Key - maps to a resource ID.
GanttResourceMappings.Name - maps to a resource name.
GanttResourceMappings.Color (optional) - maps to a resource color.
<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 ...
ResourcesSource="{Binding Resources}">
<!-- Map Resources to Data Source Fields -->
<dxgn:GanttView.ResourceMappings>
<dxgn:GanttResourceMappings Key="UID"
Name="Name"/>
</dxgn:GanttView.ResourceMappings>
...
</dxgn:GanttView>
</dxgn:GanttControl.View>
</dxgn:GanttControl>
Note
You do not need to specify mappings when the GanttControl is bound to a collection of GanttResource objects.
After you bind the GanttControl to resources, assign these resources to tasks. Your data source can store resource dependencies in the following ways:
Collection items should contain the following fields:
The code sample below demonstrates a data model that implements resource dependencies:
public class ResourceLinkDataItem {
public string TaskUID { get; private set; }
public string ResourceUID { get; private set; }
public double Units { get; private set; }
}
To retrieve resource dependencies from a data source, do the following:
The code sample below shows a GanttControl bound to a collection of resources and to a collection of resource dependencies:
<dxgn:GanttControl ItemsSource="{Binding Tasks}">
<dxgn:GanttControl.Columns>
<dxgn:GanttColumn BindTo="Name"/>
<dxgn:GanttColumn BindTo="StartDate"/>
<dxgn:GanttColumn BindTo="FinishDate"/>
<dxgn:GanttColumn BindTo="Duration"/>
</dxgn:GanttControl.Columns>
<dxgn:GanttControl.View>
<dxgn:GanttView ...
NameMapping="Name"
StartDateMapping="StartDate"
FinishDateMapping="FinishDate"
ProgressMapping="Progress"
ResourcesSource="{Binding Resources}"
ResourceLinksSource="{Binding ResourceLinks}">
<dxgn:GanttView.ResourceMappings>
<dxgn:GanttResourceMappings Key="UID"
Name="Name"/>
</dxgn:GanttView.ResourceMappings>
<dxgn:GanttView.ResourceLinkMappings>
<dxgn:GanttResourceLinkMappings Resource="ResourceUID"
Task="TaskUID"
AllocationPercentage="Units"/>
</dxgn:GanttView.ResourceLinkMappings>
</dxgn:GanttView>
</dxgn:GanttControl.View>
</dxgn:GanttControl>
The collection items should contain the following fields:
The code sample below demonstrates a data model that implements resource dependencies:
public class ResourceLink {
public object ResourceId { get; set; }
public double Units { get; set; }
}
A task object should provide access to a collection of task resources:
public class Task {
public int Id { get; set; }
public string Name { get; set; }
public DateTime Start { get; set; }
public DateTime Finish { get; set; }
public ObservableCollection<Task> Children { get; }
public ObservableCollection<ResourceLink> ResourceLinks { get; }
}
To retrieve resource dependencies from task objects, do the following:
The code sample below shows a GanttControl bound to a data source and to a collection of resource dependencies:
<dxgn:GanttControl ItemsSource="{Binding Tasks}">
<dxgn:GanttControl.Columns>
<dxgn:GanttColumn BindTo="Name"/>
<dxgn:GanttColumn BindTo="Start"/>
<dxgn:GanttColumn BindTo="Finish"/>
</dxgn:GanttControl.Columns>
<dxgn:GanttControl.View>
<dxgn:GanttView NameMapping="{dxgn:Mapping Name}"
StartDateMapping="StartDate"
FinishDateMapping="{dxgn:Mapping FinishDate}"
ResourcesSource="{Binding Resources}"
ResourceLinksPath="ResourceLinks">
<dxgn:GanttView.ResourceMappings>
<dxgn:GanttResourceMappings Name="Name"
Key="Id"/>
</dxgn:GanttView.ResourceMappings>
<dxgn:GanttView.ResourceLinkMappings>
<dxgn:GanttResourceLinkMappings Resource="ResourceId"
AllocationPercentage="Units"/>
</dxgn:GanttView.ResourceLinkMappings>
</dxgn:GanttView>
</dxgn:GanttControl.View>
</dxgn:GanttControl>
Users can assign resources in the Treelist Area. They should invoke an editor and check resources they want to assign to a task. They also can change how much time a resource spends on a task.
To allow users to edit resources:
<dxgn:GanttControl ItemsSource="{Binding Tasks}">
<dxgn:GanttColumn BindTo="Name" Width="Auto"/>
<dxgn:GanttColumn BindTo="ResourceLinks" AllowEditing="True"/>
<dxgn:GanttControl.View>
<dxgn:GanttView ResourcesSource="{Binding Resources}"
ResourceLinksPath="ResourceIds"
...>
</dxgn:GanttView>
</dxgn:GanttControl.View>
</dxgn:GanttControl>
If you do not use GanttResourceLink objects, handle the GanttView.AddingNewResourceLink event to specify a resource ID for a created resource link.
<dxgn:GanttControl ItemsSource="{Binding Tasks}">
<dxgn:GanttColumn BindTo="Name" Width="Auto"/>
<dxgn:GanttColumn BindTo="ResourceLinks" AllowEditing="True"/>
<dxgn:GanttControl.View>
<dxgn:GanttView ResourcesSource="{Binding Resources}"
ResourceLinksPath="ResourceIds"
AddingNewResourceLink="GanttView_AddingNewResourceLink"
... >
</dxgn:GanttView>
</dxgn:GanttControl.View>
</dxgn:GanttControl>
void GanttView_AddingNewResourceLink(object sender, AddingNewResourceLinkEventArgs e) {
e.NewResourceLink = ((GanttResourceItem)e.Resource).Id;
}
Run Demo: Group Resources in the Editor
Show Code Sample
<dxgn:GanttControl ItemsSource="{Binding Parts}">
<dxgn:GanttColumn BindTo="Name" Width="Auto"/>
<dxgn:GanttColumn BindTo="ResourceLinks" AllowEditing="True"/>
<dxgn:GanttControl.Resources>
<Style TargetType="{x:Type dxg:GridControl}">
<Setter Property="ColumnsSource">
<Setter.Value>
<x:Array Type="{x:Type dxg:GridColumn}">
<dxg:GridColumn FieldName="Resource.Name"/>
<dxg:GridColumn FieldName="Resource.WorkshopName"
GroupIndex="0" Header="Workshop"/>
</x:Array>
</Setter.Value>
</Setter>
<Setter Property="AutoExpandAllGroups" Value="True"/>
</Style>
</dxgn:GanttControl.Resources>
<dxgn:GanttControl.View>
<dxgn:GanttView ResourcesSource="{Binding MachineTools}"
ResourceLinksPath="MachineTools"
... >
</dxgn:GanttView>
</dxgn:GanttControl.View>
</dxgn:GanttControl>
Run Demo: Custom Resource Editor
Show Code Sample
<dxgn:GanttControl ItemsSource="{Binding Parts}">
<dxgn:GanttColumn BindTo="Name" Width="Auto"/>
<dxgn:GanttColumn BindTo="ResourceLinks" AllowEditing="True">
<dxgn:GanttColumn.EditSettings>
<dxe:ComboBoxEditSettings DisplayMember="Name"
AllowCollectionView="True"
IsTextEditable="False"
ItemsSource="{Binding Source={StaticResource resourcesSource}}">
<dxe:ComboBoxEditSettings.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander Header="{Binding Path=Name}"
HorizontalContentAlignment="Stretch"
IsExpanded="True" Margin="3,3,3,0">
<ItemsPresenter />
<Expander.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontWeight="Bold" />
</DataTemplate>
</Expander.HeaderTemplate>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</dxe:ComboBoxEditSettings.GroupStyle>
<dxe:ComboBoxEditSettings.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Resource.Name}"/>
</DataTemplate>
</dxe:ComboBoxEditSettings.ItemTemplate>
<dxe:ComboBoxEditSettings.StyleSettings>
<dxe:CheckedComboBoxStyleSettings/>
</dxe:ComboBoxEditSettings.StyleSettings>
</dxe:ComboBoxEditSettings>
</dxgn:GanttColumn.EditSettings>
</dxgn:GanttColumn>
<dxgn:GanttControl.View>
<dxgn:GanttView ResourcesSource="{Binding MachineTools}"
ResourceLinksPath="MachineTools"
...>
</dxgn:GanttControl.View>
</dxgn:GanttControl>
Use the GanttView.ResourceStyle property to customize resources.
Show Code Sample
<dxgn:GanttControl ItemsSource="{Binding Tasks}">
<dxgn:GanttControl.View>
<dxgn:GanttView ResourcesSource="{Binding Resources}">
<dxgn:GanttView.ResourceStyle>
<Style TargetType="{x:Type dxgn:GanttResourceControl}">
<Setter Property="Background" Value="{Binding ResourceData.Color,
Converter={dxmvvm:ColorToBrushConverter}}"/>
<Setter Property="CornerRadius" Value="0"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" From="1" To="0.35"
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" From="0.35" To="1"
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</dxgn:GanttView.ResourceStyle>
</dxgn:GanttView>
</dxgn:GanttControl.View>
</dxgn:GanttControl>
Run Demo: Color Tasks by Resources
Show Code Sample
<dxgn:GanttControl ItemsSource="{Binding Tasks}">
<dxgn:GanttColumn BindTo="Name"/>
<dxgn:GanttControl.View>
<dxgn:GanttView ResourcesSource="{Binding Resources}">
<dxgn:GanttView.TaskStyle>
<Style TargetType="{x:Type dxgn:GanttTaskControl}">
<Setter Property="Background"
Value="{Binding ResourceLinks[0].ResourceData.Color,
Converter={dxmvvm:ColorToBrushConverter CustomA=158}}"/>
</Style>
</dxgn:GanttView.TaskStyle>
<dxgn:GanttView.TaskContentTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding ResourceLinks}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ResourceData.Name}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</dxgn:GanttView.TaskContentTemplate>
</dxgn:GanttView>
</dxgn:GanttControl.View>
</dxgn:GanttControl>
Resources = new List<GanttResource> {
new GanttResource { Name = "Management", Id = 1, Color = Colors.Green },
new GanttResource { Name = "Developers", Id = 2, Color = Colors.Red },
new GanttResource { Name = "Testers", Id = 3, Color = Colors.Purple },
new GanttResource { Name = "Technical Writers", Id = 4, Color = Colors.Navy }
};
| API | Description |
|---|---|
| GanttView.ResourcesSource | Gets or sets the source from which the GanttControl retrieves resources. |
| GanttView.ResourceMappings | Contains information on mappings of resources to appropriate fields in a data source. |
| GanttView.ResourceLinksSource | Gets or sets the source from which the GanttControl retrieves links to resources. |
| GanttView.ResourceLinkMappings | Contains information on mappings of resource links to appropriate fields in a data source. |
| GanttView.ResourceLinksPath | Gets or sets the path to a collection of links to resources relative to a task object. |
| GanttView.ResourceLinksSelector | Gets or sets an object that chooses resource links relative to a task object based on custom logic. |
| GanttView.ResourceStyle | Gets or sets the style applied to resources. |
| GanttView.AllowSummaryTaskResourceLinksEdit | Gets or sets whether users can edit a summary task’s resource links. |
| GanttView.UseResourcesAsTaskContent | Gets or sets whether to display the names of assigned resources as the task content instead of task names. |