Task Templates

The look and feel of the task bars has to be specified via the TaskItemTemplate and ParentTaskItemTemplate properties.

NOTE: A complete sample illustrating this can be found at FlexyGantt/DataBinding/FlexyGanttResourceView.

Task and Summary Task look

To begin with setup the TaskListBinding and ParentTaskListBinding properties in the FlexyGantt to point to list of tasks in the bound data source that are to be plotted in the gantt.

  <fxgantt:FlexyGantt x:Name="fxgantt" TaskListBinding="{Binding EmployeeTasks}">

  </fxgantt:FlexyGantt>

You can then define the look of the task and summary tasks as follows. Note that you can specify Thumb instances as part of the template to allow the end-user to resize the StartTime, EndTime and to move the whole task. The Names of the Thumb instances should be specified as follows.

      <fxgantt:FlexyGantt>

            <fxgantt:FlexyGantt.TaskItemTemplate>

                <DataTemplate>

                       <!-- Don't specify a width, the root element will be automatically sized horizontaly.

                               Specify a height usually if you want the bar's height to be smaller than the default height.-->

                    <Grid Height="18" MouseEnter="Task_MouseEnter" MouseLeave="Task_MouseLeave" ToolTipService.ToolTip="{Binding TaskName}">

                        <Rectangle HorizontalAlignment="Stretch" Fill="{StaticResource TaskItemBarFill}" Stroke="{StaticResource TaskItemBarStroke}" StrokeThickness="1" RadiusX="4" RadiusY="4" />

                        <!-- Include a thumb with name "dragThumb" to enable drag-moving the task functionality. -->

                        <!-- ZIndex=2 ensures this is drawn above the Rectangle -->

                        <Thumb x:Name="dragThumb" Canvas.ZIndex="2" Style="{StaticResource TransparentThumb}" />

                        <!-- Include a thumb with name "resizeThumb" to enable resizing the task functionality -->

                        <!-- ZIndex=3 ensures this is drawn above the dragThumb -->

                        <Thumb x:Name="resizeThumb" Canvas.ZIndex="3" HorizontalAlignment="Right" Cursor="SizeWE"

                              Style="{StaticResource TransparentThumb}" Width="3" />

                    </Grid>

                </DataTemplate>

            </fxgantt:FlexyGantt.TaskItemTemplate>

            <fxgantt:FlexyGantt.ParentTaskItemTemplate>

                <DataTemplate>

                    <Grid VerticalAlignment="Center" MouseEnter="Task_MouseEnter" MouseLeave="Task_MouseLeave" ToolTipService.ToolTip="{Binding TName}">

                        <Polygon Canvas.ZIndex="1" HorizontalAlignment="Left" Stroke="Black" StrokeThickness="1" Points="-7,0 -7,7 0,14 7,7 7,0" Fill="{StaticResource ParentBarFill}" ></Polygon>

                        <Rectangle Canvas.ZIndex="0" Height="8" Stroke="Black" StrokeThickness="1" Fill="{StaticResource ParentBarFill}" HorizontalAlignment="Stretch" VerticalAlignment="Top"></Rectangle>

                        <Polygon Canvas.ZIndex="1" HorizontalAlignment="Right" Stroke="Black" StrokeThickness="1" Points="-7,0 -7,7 0,14 7,7 7,0" Fill="{StaticResource ParentBarFill}"></Polygon>

                        <!-- Include a thumb with name "dragThumb" to enable drag-moving the task functionality.-->

                        <!-- ZIndex=2 ensures this is drawn above the Rectangle -->

                        <Thumb x:Name="dragThumb" Canvas.ZIndex="2" Height="14" Style="{StaticResource TransparentThumb}" />

                        <!-- Include a thumb with name "resizeThumb" to enable resizing the task functionality -->

                        <!-- ZIndex=3 ensures this is drawn above the dragThumb -->

                        <Thumb x:Name="resizeThumb" Canvas.ZIndex="3" HorizontalAlignment="Right" Cursor="SizeWE"

                              Style="{StaticResource TransparentThumb}" Width="3" Height="14"/>

                    </Grid>

                </DataTemplate>

            </fxgantt:FlexyGantt.ParentTaskItemTemplate>

        </fxgantt:FlexyGantt>

---

� RadiantQ 2009 - 2019. All Rights Reserved.