WPF Management Design Guide - Timeline

Question

I am working on a control for one of our applications. The control shows the current focused day as a support, and the X axis shows the time of day. The Y axis does not have a scale as such; it will highlight the elements to display. The overall appearance of the control will be very similar to the gantt chart showing the time of day of various tasks. For a (very rough) idea, see The Art of ascii (not) below.

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

I have a background grid designed to resize and have a “current time” indicator implemented as a vertical blue line to show where we are in relation to the tasks. When the control changes, the current position of the time indicator is recalculated to make sure its correct time.

Now I'm not sure how to implement horizontal columns that represent the elements of a task. I have a task object with a start time, end time, name and description, and I would like the control to contain a collection of these objects. I would also like these objects to display a display.

WPF , . , - , . (, StackPabnel, )

<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>

- , , , , () , , .

.

- EDIT--
"", , - , . , .

Answer 1

, :

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

ItemsControl .

<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>

XAML ItemsControl ( ListBox, ListView ..) Canvas .

ItemsControl.ItemTemplate, .

Start Index TimeLineEntry Canvas.Left Canvas.Top ItemContainer, DateTime .

.

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();
    }
}