WPF控件設計指導 - 時間線

Question

我正在爲我們的某個應用程序的控件工作。該控件將當前關注的日期顯示爲網格，X軸是一天中的時間。 Y軸沒有像這樣的比例尺，相反它將分離出要顯示的項目。控件的整體外觀與甘特圖非常相似，顯示了各種任務的時間。對於一個（非常粗糙的）想法，請參見下面的ascii（not）藝術。

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的（其是基類列表框，ListView的等）的面板被改變爲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(); 
    } 
}