Toolbox Entries

Please follow the below steps to add the FlexyGantt control to your Toolbox.

Add FlexyGantt to your Toolbox

In a VS 2010/2012 WPF Project create a tab called "RadiantQ WPF Controls" and select the "ToolBox/Choose Items..." context menu. This will bring up the "Choose Toolbox Items" dialog box.

In the dialog box, select the "WPF Components" tab and browse to select the following dll:

C:\Program Files\RadiantQ\WPF Gantt 1.7\bin\RadiantQ.GanttControls.WPF.dll"

... and check the FlexyGantt from the list.

Please do not check the other RadiantQ controls because they are not directly usable in a WPF window.

(Note: If you have trouble setting up the Toolbox, please follow the steps outlined here to manually add references to the FlexyGantt in your project).

Adding FlexyGantt to XAML

Now you can drag and drop a FlexyGantt into your WPF window. Give the newly added control a name. The resultant XAML should look like this:

<Grid x:Name="LayoutRoot">

    <fxgantt:FlexyGantt x:Name="flexyGantt"></fxgantt:FlexyGantt>

</Grid>

Initializing FlexyGantt with some tasks

Let us create some business objects that represents a hierarchy of Teams/Employees/Tasks. Refer to the FlexyGanttResourceView for this implementation.

Initialize this hierarchy and bind it to the FlexyGantt instance as follows:

this.flexyGantt.ItemsSource = SampleResourcesData.GetSampleData();

Resolve the Hierarchy

Now resolve the hierarchy by providing HierarchicalDataTemplates as follows:

<Grid.Resources>

            <DataTemplate x:Key="TreeLeafTemplate">

                <TextBlock Text="{Binding Path=EName}" />

            </DataTemplate>

           <HierarchicalDataTemplate x:Key="TreeTemplate" ItemsSource="{Binding Path=Employees}"

                                            ItemTemplate="{StaticResource TreeLeafTemplate}">

                <TextBlock Text="{Binding Path=TName}" />

            </HierarchicalDataTemplate>

</Grid.Resources>

Assign the top level HierarchicalDataTemplate to the FlexyGantt's ItemTemplate as shown below.

Then also set the TaskListBinding, TaskStartTimeBinding and TaskEndTimeBinding properties as follows (referring to appropriate properties in your bound types):

        <fxgantt:FlexyGantt x:Name="flexyGantt" ItemTemplate="{StaticResource TreeTemplate}" TaskListBinding="{Binding EmployeeTasks}"

                      TaskStartTimeBinding="{Binding StartTime}"

                           TaskEndTimeBinding="{Binding EndTime}" ></fxgantt:FlexyGantt>

This will render the FlexyGantt as follows:

Notice how the hierarchy has been resolved.

More on this topic here.

Defining the Task Bar Template

The task bars don't appear because you haven't provided a template yet. Let us do that. Set this property on the FlexyGantt:

<fxgantt:FlexyGantt.TaskItemTemplate>

    <DataTemplate>

        <Grid Height="18">

            <Rectangle x:Name="taskBar" 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>

Now the bars should appear and you should also be able to resize and move them.

More on this topic here.

Defining a template with multi-column Tree List

On the left, it's very likely that you want an editable multi-column tree list. For that, define a template as follows:

<ControlTemplate x:Key="flexyGanttTableTemplate">

                <!-- DataContext for this will be a FlexyGanttTable instance -->

                <fxgantt:FlexyTable >

                    <fxgantt:FlexyTable.Columns>

                        <DataGridTemplateColumn Header="Name">

                            <DataGridTemplateColumn.CellTemplate>

                                <!-- DataContext for the DataTemplates here will be an instance of FlexyNodeData.-->

                                <DataTemplate>

                                    <fxgantt:ExpandableTextBlock Text="{Binding Data, Converter={StaticResource nameConverter}}"></fxgantt:ExpandableTextBlock>

                                </DataTemplate>

                            </DataGridTemplateColumn.CellTemplate>

                            <DataGridTemplateColumn.CellEditingTemplate>

                                <DataTemplate>

                                    <fxgantt:ExpandableTextBox Text="{Binding Data, Converter={StaticResource twoWayNameConverter}, Mode=TwoWay}"></fxgantt:ExpandableTextBox>

                                </DataTemplate>

                            </DataGridTemplateColumn.CellEditingTemplate>

                        </DataGridTemplateColumn>

                        <DataGridTextColumn Header="Tasks Count" IsReadOnly="true"

                                                 Binding="{Binding Data.EmployeeTasks.Count}">

                            <DataGridTextColumn.CellStyle>

                                <Style TargetType="DataGridCell">

                                    <Setter Property="HorizontalContentAlignment" Value="Center" ></Setter>

                                </Style>

                            </DataGridTextColumn.CellStyle>

                        </DataGridTextColumn>

                    </fxgantt:FlexyTable.Columns>

                </fxgantt:FlexyTable>

            </ControlTemplate>

And refer to the above template in this property setting:

<fxgantt:FlexyGantt CustomSourceListViewTemplate="{StaticResource flexyGanttTableTemplate}" ..... >

For more info on initializing the template take a look at this topic.

Final steps

You can similarly define a template for the summary task types. Please refer to the FlexyGantt/DataBinding/FlexyGanttResourceView sample for the full source code.

Here is the resultant look and feel:

---

� RadiantQ 2009 - 2019. All Rights Reserved.