Руководство по проектированию управления WPF - временная шкала

Question

Я работаю над элементом управления для одного из наших приложений. Элемент управления показывает текущий фокусированный день в виде пояса, ось X - время дня. Ось Y не имеет шкалы как таковой, скорее она будет выделять элементы для отображения. Общий вид элемента управления будет очень похож на диаграмму Ганта, показывающую время суток для различных задач. Для (очень грубой) идеи см. Статью ascii (не) ниже.

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

У меня фоновая сетка разработана таким образом, что ее размер можно изменять, а индикатор «текущего времени» реализован в виде вертикальной синей линии, чтобы показать, где мы находимся по отношению к задачам. При изменении размера элемента управления текущая позиция индикатора времени пересчитывается, чтобы убедиться, что он показывает правильное время.

В чем я сейчас не уверен, так это в том, как реализовать горизонтальные полосы, которые представляют элементы задачи. У меня есть объект задачи с временем начала, временем окончания, именем и описанием, и я хотел бы, чтобы элемент управления содержал коллекцию этих объектов. Я также хотел бы, чтобы эти объекты управляли дисплеем.

Мое знакомство с 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();
    }
}