WPF kontrol tasarımı kılavuz - zaman çizelgesi

Question

Uygulamalarımızdan biri için kontrol üzerinde çalışıyorum. Kontrol şu anda odaklanmış günü bir kuşak olarak gösterir, X ekseni günün zamanıdır. Y ekseninin bir ölçeği yoktur, bunun yerine görüntülenecek öğeleri ayıracaktır. Kontrolün genel görünümü, çeşitli görevlerin günlerini gösteren bir gantt şemasına oldukça benzeyecektir. Bir (çok kaba) fikir için, aşağıdaki ascii (değil) sanatına bakın.

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

Ben boyutlandırılabilir ve biz görevlerine göre nerede göstermek için dikey mavi çizgi olarak uygulanan bir "şimdiki zaman" göstergesine sahip olacak şekilde arka plan çizgisi çalıştı var. Kontrol yeniden boyutlandırıldığında, doğru zamanın gösterildiğinden emin olmak için mevcut zaman göstergesinin konumu yeniden hesaplanır.

Şu anda emin olmadığım şey, görev öğelerini temsil eden yatay çubukların nasıl uygulanacağıdır. Başlangıç ​​zamanı, bitiş zamanı, adı ve açıklaması olan bir görev varlığım var ve kontrolün bu varlıkların bir koleksiyonunu içermesini istiyorum. Bu varlıkların ekranı sürmesini de isterim.

WPF'ye maruz kalmama oldukça sınırlıdır, ancak geçmişte bir nesne koleksiyonunu görselleştirme girişimlerimi bir liste kutusu ve veri tabanları kullanmayı içermiştir. Bir koleksiyonu bir yığın panele ya da benzer bir şeye bağlamak mümkün olsaydı, bu gibi bir şeye sahip olabilirdim. (Benim için dikey elde taşıma kolu olacağından StackPabnel gerç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> 

kimse bile neyin mümkün olduğunu buradan düşünce olmadığını söyleyebilir ve nasıl istediklerini elde etmek amacıyla (umarım) bana bazı rehberlik verebilir yapmak.

Şimdiden teşekkürler.

--EDIT--
Her görevi görüntüleyen "denetim", başlangıç ​​ve bitiş zamanı olan bir satırdan ve görev adının araç ipucundan daha karmaşık bir şey olmak zorunda değildir. Şimdilik, bu daha sonra gelse de, görevlere bakabilmem gerekmiyor.

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

Sen dikdörtgenler olarak girişlerini düzenlemek için bir ItemsControl kullanabilirsiniz:

Answer 1

veri sınıfını varsayarsak böyle bir şeydir. Yukarıdaki XAML kodda

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

, (temel sınıf liste kutusu, liste görünümü, vs) ItemsControl panel ürünlerinin daha iyi pozisyona sokulabilmesi için, Canvas değiştirilir.

Öğelerin görüntülenme şeklini özelleştirmek için ItemsControl.ItemTemplate uygulamasını kullanabilirsiniz.

TimeLineEntry sınıfının Başlangıç ​​ve Dizin özelliklerini Canvas'a yapıştırdım.Left ve Canvas.Top ItemContainer öğesinin eklenmiş özelliklerini ve ayrıca DateTime değerlerini piksel konumlarına dönüştürmek için değer dönüştürücülerini kullandık.

Değer dönüştürücüler için kod basittir.

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