Hướng dẫn thiết kế điều khiển WPF - dòng thời gian

Question

Tôi đang làm việc trên một điều khiển cho một trong các ứng dụng của chúng tôi. Bộ điều khiển hiển thị ngày hiện đang được tập trung làm hình gird, trục X là thời gian trong ngày. Trục Y không có tỷ lệ như vậy, thay vào đó nó sẽ tách ra các mục sẽ được hiển thị. Giao diện tổng thể của điều khiển sẽ khá giống với biểu đồ gantt, hiển thị thời gian trong ngày của các tác vụ khác nhau. Đối với một ý tưởng (rất thô), xem nghệ thuật ascii (không) bên dưới.

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

Tôi có lưới nền hoạt động sao cho có thể thay đổi kích thước và có chỉ báo "thời gian hiện tại" được thực hiện dưới dạng đường thẳng đứng màu xanh lam để cho biết vị trí của chúng tôi. Khi điều khiển được thay đổi kích thước, vị trí của chỉ báo thời gian hiện tại được tính toán lại để đảm bảo nó hiển thị đúng thời điểm.

Điều tôi bây giờ không chắc chắn là cách triển khai các thanh ngang đại diện cho các mục tác vụ. Tôi có một thực thể nhiệm vụ với thời gian bắt đầu, thời gian kết thúc, tên và mô tả và tôi muốn kiểm soát chứa một tập hợp các thực thể này. Tôi cũng muốn những thực thể này thúc đẩy việc hiển thị.

Việc tiếp xúc với WPF của tôi khá hạn chế, nhưng trong quá khứ, những nỗ lực của tôi trong việc hình dung một tập hợp các đối tượng có liên quan đến việc sử dụng hộp danh sách và bảng dữ liệu. Nó sẽ là tuyệt vời nếu nó có thể ràng buộc một bộ sưu tập vào một bảng xếp chồng hoặc một cái gì đó tương tự vì vậy tôi có thể có cách nhẹ nhàng như thế này. (Tôi mặc dù StackPabnel vì nó sẽ xử lý sắp xếp thẳng đứng đối với tôi)

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

bất cứ ai có thể cho tôi biết nếu những gì tôi nghĩ đây thậm chí còn có thể, và (hy vọng) cho tôi một số hướng dẫn như thế nào để đạt được những gì tôi muốn làm.

Xin cảm ơn trước.

--EDIT--
"Điều khiển" hiển thị từng tác vụ không phải phức tạp hơn một dòng có thời gian bắt đầu và kết thúc và chú giải công cụ của tên tác vụ. Trong thời gian này, tôi không cần phải có thể đi sâu vào các công việc, mặc dù điều này có thể xảy ra sau.

Answer 1

Giả sử lớp dữ liệu của bạn là một cái gì đó như thế này:

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

Bạn có thể sử dụng một ItemsControl để đặt ra các mục như hình chữ nhật.

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

Trong đoạn mã XAML trên, bảng điều khiển của ItemsControl (đó là ListBox lớp cơ sở, ListView, vv) được thay đổi thành một Canvas cho việc định vị tốt hơn về mặt hàng này.

Bạn có thể sử dụng ItemsControl.ItemTemplate để tùy chỉnh cách hiển thị các mục.

Tôi đã gắn kết thuộc tính Bắt đầu và chỉ mục của lớp TimeLineEntry với thuộc tính Canvas.Left và Canvas.Top đính kèm của ItemContainer và tôi cũng đã sử dụng trình biến đổi giá trị để chuyển đổi giá trị DateTime thành vị trí pixel.

Mã cho trình chuyển đổi giá trị rất đơn giản.

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