WPF control design guidance - timeline

Question

I'm working on a control for one of our apps. The control shows the currently focused day as a grid, the X-axis being time of day. The Y axis doesn't have a scale as such, rather it will separate out the items to be displayed. The overall look of the control will be quite similar to a gantt chart, showing the times of day of various tasks. For a (very rough) idea, see the ascii (not) art below.

8      9     10     11     12      1      2      3      4      5      6
-----------------------------------------------------------------------------
|      |      |      |      |      |      |      |      |      |      |
|      ======================      |      |      |      |      |      |
|      |      |      ======================      |      |      |      |
|      |      |      |      |      |      |      ========      |      |
|      |      |      |      ===========================================
|      |      |      |      |      |      |      |      |      |      |

I have the background grid worked out so that it is resizable, and has a "current time" indicator implemented as a vertical blue line to show where we are in relation to the tasks. When the control is resized, the current time indicator's position is recalculated to ensure it shows the right time.

What I am now unsure of is how to implement the horizontal bars that represent the task items. I have a task entity with start time, end time, name and description and I'd like the control to contain a collection of these entities. I'd also like these entities to drive the display.

In the past my attempts at visualizing a collection of objects has involved using a listbox and datatemplates. It would be great if it was possible to bind a collection to a stack panel (which does vertical stacking) or something similar so I could have something like this:

<UserControl declarations here... >
    <UserControl.Resources>
        <ObjectDataProvider x:Key="myCollection" />
    </UserControl.Resources>
    <Grid Name="myBackgroundGrid" Margin="0,0,0,0" ... >stuff goes here to draw the background</Grid>
    <StackPanel ItemsSource="{Binding Source={StaticResource myCollection}}" />
</UserControl>

Is this even possible, and if so how does one achieve it?

---

--EDIT--
The "control" that displays each task doesn't have to be anything more complicated than a line with a start and end time, and a tooltip of the name of the task. For the time being, I don't need to be able to drill into tasks, although this may come later.

Answer 1

Assuming your data class is something like this:

public class TimeLineEntry
{
    public string Name { get; set; }
    public DateTime Start { get; set; }
    public int Index { get; set; }
    public int Duration { get; set; }
}

You can use an ItemsControl to lay out entries as rectangles.

<ItemsControl ItemsSource="{Binding}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="{x:Type ContentPresenter}">
            <Setter Property="Canvas.Left" Value="{Binding Path=Start, Converter={StaticResource timeToPositionConverter}}" />
            <Setter Property="Canvas.Top" Value="{Binding Path=Index, Converter={StaticResource indexToPositionConverter}}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="TimeLineEntry">
            <Rectangle  Width="{Binding Duration}" Height="10" ToolTip="{Binding Name}" Fill="Red" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

In the above XAML code, panel of the ItemsControl (which is the base class ListBox, ListView, etc) is changed to a Canvas for better positioning of the items.

You can use ItemsControl.ItemTemplate to customize the way items are displayed.

I have binded Start and Index properties of the TimeLineEntry class to Canvas.Left and Canvas.Top attached properties of ItemContainer and I have also used value converters to convert DateTime values into pixel positions.

Code for value converters are straightforward.

public class IndexToPositionConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is int)
        {
            return ((int)value) * 10;
        }
        return 0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}