Adding extra elements for Gantt chart bars (WPF)

ExtraTaskTemplate vs. StandardTaskTemplate, SummaryTaskTemplate, MilestoneTaskTemplate

Hello, hello again, everyone! It’s time to answer yet another question from you, guys and girls:

How can one add custom WPF elements on top of the bars displayed as Gantt chart items in GanttChartDataGrid, GanttChartView, ScheduleChartDataGrid, or ScheduleChartView components?

One possibility is to redesign the entire built-in StandardTaskTemplate, SummaryTaskTemplate and/or MilestoneTaskTemplate definitions (available as component properties). But this requires a lot of rewriting (you could actually start from existing XAML that we’ve made public), because WPF templates cannot be “appended”, right?

(Here is a full example, regardless, for redefining StandardTaskTemplate and display other elements instead of classic task bars, if you want to go that route.)

Do not worry, however; there is an easier alternative to solve our original problem, that we’ll explain right now!

It involves designing only the elements that you would want added on top of (or near) the built-in bars, and simply placing the custom XAML “extras” into the less known ExtraTaskTemplate instead!

See the code below (for testing purposes we’ve applied it onto GanttChartDataGrid instance defined in MainWindow.xaml of our Main features demo, but it can technically work under any of our Gantt chart based components):

<pdgcc:GanttChartDataGrid.ExtraTaskTemplate>
  <DataTemplate DataType="pdgcc:GanttChartItem">
    <Canvas TextElement.FontSize="8" Margin="0,-4,0,0">
      <TextBlock Name="StartText" Foreground="Gray" Text="{Binding Start, StringFormat=MM/dd}" Canvas.Left="-100" Width="100" TextAlignment="Right" Padding="2,0"/>
      <TextBlock Name="FinishText" Foreground="Gray" Text="{Binding Finish, StringFormat=MM/dd}" Canvas.Left="{Binding ComputedBarWidth}" Width="100" TextAlignment="Left" Padding="2,0"/>
    </Canvas>
    <DataTemplate.Triggers>
      <DataTrigger Binding="{Binding HasChildren}" Value="True">
        <Setter TargetName="StartText" Property="Visibility" Value="Collapsed"/>
        <Setter TargetName="FinishText" Property="Visibility" Value="Collapsed"/>
      </DataTrigger>
      <DataTrigger Binding="{Binding IsMilestone}" Value="True">
        <Setter TargetName="StartText" Property="Visibility" Value="Collapsed"/>
        <Setter TargetName="FinishText" Property="FontWeight" Value="Bold"/>
      </DataTrigger>
    </DataTemplate.Triggers>
  </DataTemplate>
</pdgcc:GanttChartDataGrid.ExtraTaskTemplate>

This definition allows you to display the date and month of task’s Start and Finish values to the left and right side of standard task bars (for milestones Start and Finish should be the same, so we only show one date, while for summary tasks we decided to hide the values altogether). See the result in the screenshot below:

GanttChartDataGrid with ExtraTaskTemplate on

Of course, you can adapt the code to provide any further details you want, to change the colors of the text depending on different conditions (e.g. to indicate whether or not the item is started and/or completed up to the current date), and so on.

We hope this is useful and that it will help you add new, interesting features into your apps rather soon.

Next time we’ll present how one can do the same as the above with our JavaScript based GanttChartView component instead. Stay tuned!