RadiantQ WPF Gantt
Custom Bar Rendering for Working Hours
Previous Topic  Next Topic 

Custom Bar Rendering for Working Hours


By default, a flat rectangular bar is drawn from start to end representing a task, spanning the working as well as the non-working times. This doesn't distinguish the working and non-working times in any way. Among other things some bars could seem longer just because they span non-working hours, as shown below:


2 bars with same effort but different durations


It would be good to communicate to the end user that a bar is spanning non-working hours (though the vertical gray background behind the bars should indicate the same, it's not very obvious) in a better visual presentation. This is supported through the WorkingHoursBar visual that can be used in a custom background template as shown below.


        <gantt:GanttControl PreferredStartTimeBinding="{Binding PreferredStartTime}" x:Name="ganttControl" Grid.Row="1" ResourceNameBinding="{Binding ResourceName}" ResourceIDBinding="{Binding ResourceID}"

                           TaskItemProgressFill="Transparent"

                           TaskItemBarFill="Transparent" TaskItemBarStroke="Transparent">

            <gantt:GanttControl.TaskBarBackgroundTemplate>

                <ControlTemplate>

                    <ganttview:WorkingHoursBar TaskBrush="{StaticResource WorkingBarFill}" ProgressBarBrush="{StaticResource TaskItemProgressFill}"

                                              NonWorkingBarHeightProportion="25" ProgressBarHeightProportion="35">

                    </ganttview:WorkingHoursBar>

                </ControlTemplate>

            </gantt:GanttControl.TaskBarBackgroundTemplate>

        </gantt:GanttControl>



Note: Remember to set the TaskItemProgressFill, TaskItemBarFill, TaskItemBarStroke to Transparent in addition to setting the custom background template as above.


This will render the tasks as follows, clearly distinguishing tasks in working hours:


2 bars with same effort rendered with Working Hours highlighted


This is illustrated in the sample: ...\Samples\ProjectGantt\Appearance\TemplatizedForWorkingHours\WorkingHoursBarMain.xaml.cs



� RadiantQ 2009 - 2019. All Rights Reserved.