WPFコントロールの設計ガイダンス - タイムライン

Question

私は、私たちのアプリケーションのコントロールのために取り組んでいます。コントロールは現在のフォーカスされた日を鳥として表示し、X軸は時刻です。 Y軸にはスケールがありません。表示するアイテムを切り離します。コントロールの全体的な外観は、ガントチャートと非常によく似ており、さまざまなタスクの日時を示しています。 （非常に荒い）アイデアについては、以下のascii（not）の芸術を見てください。

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

は、私はそれがサイズ変更可能であり、我々は、タスクに関連している場所を示すために、青の縦ラインとして実装「現在の時間」インジケータを持つように背景のグリッドが出てきました。コントロールのサイズが変更されると、現在の時刻インジケータの位置が再計算され、正しい時刻が表示されます。

ここで私は、タスク項目を表す水平バーをどのように実装するのかがわかりません。私は、開始時刻、終了時刻、名前、および説明を持つタスクエンティティを持っています。これらのエンティティのコレクションを格納するようにしたいと思います。私はまた、これらのエンティティがディスプレイを駆動したいと思います。

私のWPFへの暴露は非常に限られていますが、これまでは、オブジェクトのコレクションを視覚化しようとしていましたが、リストボックスとデータテンプレートを使用していました。スタックパネルやそれに類するものにコレクションをバインドすることができれば、私はこのようなセミットを持つことができれば嬉しいです。 （それは私のために垂直スタッキングを扱うことになるので、StackPabnelけれども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> 

は誰でも可能です私はここで考えなら、私に教えて、どのように私が欲しいものを達成するためにと（たぶん）私にいくつかのガイダンスを与えることができますする。

ありがとうございます。

- EDIT_
各タスクを表示する「コントロール」は、開始時刻と終了時刻を含む行と、タスク名のツールヒントよりも複雑である必要はありません。当分の間、私は後で来るかもしれませんが、私は仕事に掘り下げることができる必要はありません。

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

あなたは長方形としてエントリをレイアウトするItemsControlを使用することができます。

Answer 1

は、あなたのデータクラスを仮定すると、このようなものです。上記のXAMLコードで

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

は、（基本クラスリストボックス、リストビューなどである）のItemsControlのパネルは、商品のより良い位置決めのためCanvasに変更されます。

ItemsControl.ItemTemplateを使用すると、項目の表示方法をカスタマイズできます。

TimeLineEntryクラスのStartおよびIndexプロパティをItemContainerのCanvas.LeftおよびCanvas.Top添付プロパティにバインドしました。また、Dateコンバーターを使用して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(); 
    } 
}