WPF控制设计指南 - 时间表

Question

我正在为我们的某个应用程序开发控件.该控件将当前聚焦的日显示为网格,X轴是一天中的时间.Y轴没有这样的比例,而是将要显示的项目分开.控件的整体外观与甘特图非常相似,显示了各种任务的时间.对于(非常粗略的)想法,请参阅下面的ascii(非)艺术.

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

我将背景网格设计成可调整大小,并将"当前时间"指示器实现为垂直蓝线,以显示我们与任务相关的位置.调整控件大小后,将重新计算当前时间指示器的位置,以确保显示正确的时间.

我现在不确定的是如何实现代表任务项的水平条.我有一个具有开始时间,结束时间,名称和描述的任务实体,我希望控件包含这些实体的集合.我也喜欢这些实体来驱动显示器.

我对WPF的曝光非常有限,但过去我尝试可视化对象集合涉及使用listbox和datatemplates.如果可以将一个集合绑定到一个堆栈面板或类似的东西,这将是很好的,所以我可以像这样semothing.(我虽然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; }
}

您可以使用a 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等)被更改为a Canvas以更好地定位项目.

您可以使用ItemsControl.ItemTemplate来自定义项目的显示方式.

我已将TimeLineEntry类的Start和Index属性绑定到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();
    }
}