Overlapped Tasks Look
By default when there are tasks with overlapping time spans, they simply get rendered on top of each other like below.
Overlapping Bars
But you have an additional option to render them shrunk one-below the other as below.
Shrunk Height
Overlapping Bars with Shrunk Height
This is easily achieved by setting this property in FlexyGantt.
<fxgantt:FlexyGantt OverlappedTasksRenderingOptimization="ShrinkHeight"
...
>
Customizing Shrunk Tasks Look
There is also a way to render the overlapping tasks with shrunk height render differently. To be able to do so, you will have to first implement the ISupportsOverlapInfo interface in your "Task type" that represents your task, like this.
public class Task : INotifyPropertyChanged, ISupportsOverlapInfo
{
......
......
private bool isOverlapping = false;
public bool IsOverlapping
{
get
{
return this.isOverlapping;
}
set
{
if (this.isOverlapping != value)
{
this.isOverlapping = value;
this.OnPropertyChanged("IsOverlapping");
}
}
}
}
Then FlexyGantt will automatically set this property when the task is rendered, if it overlaps with something else.
You can then refer to the IsOverlapping property in the TaskItemTemplate for the task like this.
<Rectangle x:Name="taskBar" HorizontalAlignment="Stretch"
Fill="{Binding Path=IsOverlapping, Converter={StaticResource TaskColorConverter}}"
Stroke="{Binding Path=IsOverlapping, Converter={StaticResource TaskStrokeConverter}}"
StrokeThickness="1" RadiusX="4" RadiusY="4" />
Overlapping Bars with custom look
This is illustrated in the following sample: ..\Samples\FlexyGantt\Appearance\OverlappedTasksRendering.
Dynamically Varying Row Heights On Overlap
Another very useful feature available in FlexyGantt is the ability to bind the height of a row to the overlapped state of the tasks in that row. This is possible because the gantt keeps the MaxOverlappingBlocksRowCount value for each row (in FlexyNodeData instance) up to date with the maximum number of overlapping bars within the different blocks in each row. And binding to this property in the RowHeightBinding will give you the desired effect.
<fxgantt:FlexyGantt ... OverlappedTasksRenderingOptimization="ShrinkHeight" RowHeightBinding="{Binding MaxOverlappingBlocksRowCount, Converter={StaticResource rowHeightProvider}}" />
It's also customary to set a specify height for the task bars in the row in this scenario, like this:
<fxgantt:FlexyGantt.TaskItemTemplate>
<DataTemplate>
<Grid Height="26" MouseEnter="Task_MouseEnter" MouseLeave="Task_MouseLeave" ToolTipService.ToolTip="{Binding TaskName}">
....
Here is the resultant look of the gantt with varying row heights:
Row Heights varying based on overlapped state of bars
This is illustrated in the following sample: ..\Samples\FlexyGantt\Appearance\OverlappedTasksChangingRowHeights
� RadiantQ 2009 - 2019. All Rights Reserved.