Binding to a custom IList

This is functionally very similar to binding to data using ADO.NET Entity Model. Instead of binding to the ADO.NET data classes, you will be binding to your custom types here.

This topic provides you minimal code to help you understand the concepts, please refer to the GanttChartCustomDataBinding sample to see the full source code.

Follow these steps to create a new application:

Step 1: Create the control

Create an empty WPF application and add this to the MainPage XAML:

<gantt:GanttControl x:Name="ganttControl" Width="800" Height="600" />

Step 2: Initialize your custom IList

Initialize a list with your custom items with properties like this and assign it to the GanttControl's ItemsSource:

DateTime dtStart = TimeComputingUtils.ToUtcKind(DateTime.Today);

ObservableCollection<CustomTask> taskItems = new ObservableCollection<CustomTask>

{

new CustomTask { TaskName = "Task 1", TaskID = "1", StartTime = dtStart, RequiredEffort=TimeSpan.Parse("8:00:00"), Description = "Description of Task 1" },

new CustomTask { TaskName = "Task 2", TaskID = "2", PredecessorIndices="1", StartTime = dtStart, RequiredEffort=TimeSpan.Parse("16:00:00"), Description = "Description of Task 2" },

new CustomTask { TaskName = "Task 3", TaskID = "3", StartTime = dtStart, RequiredEffort = TimeSpan.Parse("12:30:00"), CompletedEffort = TimeSpan.Parse("02:30:00"), Description = "Description of Task 3" },

new CustomTask { TaskName = "Child Task 1", TaskID = "4", IndentLevel = 1, StartTime = dtStart, RequiredEffort = TimeSpan.Parse("08:00:00"), CompletedEffort = TimeSpan.Parse("04:00:00"), Description = "Description of Task 3/Child Task 1" },

new CustomTask { TaskName = "Child Task 2", TaskID = "5", IndentLevel = 1, PredecessorIndices="4+8", Description = "Description of Task 3/Child Task 2" },

// etc.

};

this.ganttControl.ItemsSource = taskItems;

Note that if you want to be notified of property changes to your bound objects due to end-user editing, you should implement the INotifyPropertyChanged interface in your custom types.

Step 3: Setup mappings

Setup mappings so to point out which property in your custom type points to which information. Update the XAML as follows:

<radiantq:GanttControl x:Name="ganttControl" Grid.Column="1" IDBinding="{Binding TaskID}" NameBinding="{Binding TaskName}" IndentLevelBinding="{Binding IndentLevel}"

StartTimeBinding="{Binding StartTime}" EffortBinding="{Binding RequiredEffort}"

ProgressPercentBinding="{Binding CompletedEffort, Converter={StaticResource converter}}"

PredecessorIndicesBinding="{Binding PredecessorIndices}"

PreferredStartTimeBinding="{Binding PreferredStartTime}" SortOrderBinding="{Binding SortOrder}"

DescriptionBinding="{Binding Description}" AssignedResourcesBinding="{Binding AssignedResources}"

Step 4: Support Editing

Add buttons to support Adding, Removing, Moving, Indenting and Outdenting of the tasks. In the event handler invoke the appropriate functions, like this:

private void Add_Click(object sender, RoutedEventArgs e)

{

this.ganttControl.AddNewItem(

new CustomTask { TaskName = "New Task", StartTime = dtStart, PredecessorIndices = "", RequiredEffort=TimeSpan.FromHours(8), TaskID = this.ganttControl.Model.GetNewID().ToString(), Description = "Description of new Task" });

}

private void Delete_Click(object sender, RoutedEventArgs e)

{

IActivity activity = this.ganttControl.SelectedActivity;

this.ganttControl.RemoveActivity(id);

}

private void Indent_Click(object sender, RoutedEventArgs e)

{

IActivity activity = this.ganttControl.SelectedActivity;

this.ganttControl.Indent(this.ganttControl.ActivityViews[activity]);

}

private void Outdent_Click(object sender, RoutedEventArgs e)

{

IActivity activity = this.ganttControl.SelectedActivity;

this.ganttControl.Outdent(this.ganttControl.ActivityViews[activity]);

}

private void MoveUp_Click(object sender, RoutedEventArgs e)

{

IActivity activity = this.ganttControl.SelectedActivity;

if (activity != null)

{

IActivityView selItem = this.ganttControl.GanttTable.SelectedItem as IActivityView;

int selIndex = this.ganttControl.GanttTable.SelectedIndex;

if (selIndex > 0)

{

// Move the selected item up a row

this.ganttControl.GanttTable.MoveRows(selIndex, 1, selIndex - 2);

// Retain the selection:

this.ganttControl.GanttTable.SelectedItem = selItem;

}

Step 5: Listening to changes

To listen to changes in the bound objects, implement INotifyPropertyChanged interface on your bound object type. (This is not illustrated in the above mentioned sample).

The end-user will be able to edit the start date, duration, dependencies, progress percent, etc. using the table and the chart in the UI and the changes will be reflected automatically in your bound data source.