帶有基於日期的子點的WPF ItemsControl

Question

目前我有一個ObservableCollection<Foo> Bar = new ObservableCollection<Foo>(); 。

Foo像這樣建立起來

public class Foo(){
    private DateTime _scanStartTime;
    public DateTime ScanStartTime{
        get { return this._scanStartTime; }        
        set { this._scanStartTime = value; this.OnPropertyChanged("ScanStartTime");
    }
}

Bar包含3個元素 。

Bar.Add(new Foo(new DateTime(Yesterday)));
Bar.Add(new Foo(new DateTime(Today)));
Bar.Add(new Foo(new DateTime(Today)));

上面的代碼僅用於演示目的。

現在我想在我的gui上顯示這3個元素。 我想創建這樣的東西：

我對這些要點很感興趣。 我該如何添加這些？ WPF有可能嗎？ 我應該將我的ObservableCollection Bar拆分為2並以編程方式（C＃）將它們添加到gui中嗎？

Answer 1

WPF為您提供TreeView控件。 它允許您定義HierarchicalDataTemplate ，用於通過視圖表示對象層次結構（在您的情況下為樹）。

這是一個小樣本：

<Grid>
    <TreeView ItemsSource="{Binding Collection}">
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type local:Work}" ItemsSource="{Binding WorkItems}">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}"/>
                    <Button Content="+" >
                        <Button.Style>
                            <Style TargetType="Button">
                                <Setter Property="Margin" Value="5,2,5,2"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsFinalItem}" Value="False">
                                        <Setter Property="Visibility" Value="Collapsed"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Button.Style>
                    </Button>
                </StackPanel>
            </HierarchicalDataTemplate>
        </TreeView.Resources>
    </TreeView>
</Grid>

代碼背后：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
        Collection.Add(new Work
        {
            Name = "Clean my place",
            WorkItems = new ObservableCollection<Work>()
            {
                new Work { Name = "Today", IsFinalItem =true  },
                new Work { Name = "Tomorrow", IsFinalItem =true  },
                new Work { Name = "Monday", IsFinalItem =true  },
            }
        });
        Collection.Add(new Work { Name = "Clean Jim's place" });
        Collection.Add(new Work { Name = "Fix pc" });
        Collection.Add(new Work
        {
            Name = "Free",
            WorkItems = new ObservableCollection<Work>()
            {
                new Work { Name = "Today", IsFinalItem =true  },
                new Work { Name = "Tomorrow", IsFinalItem =true  },
                new Work { Name = "Monday", IsFinalItem =true  },
            }
        });
    }

    public ObservableCollection<Work> Collection { get; set; } = new ObservableCollection<Work>();
}

工作班：

public class Work
{
    public string Name { get; set; }
    public ObservableCollection<Work> WorkItems { get; set; }
    public bool IsFinalItem { get; set; }
}

結果如下：

Answer 2

我建議使用TreeView和更好的數據結構。 構建一個數據結構，表示您希望它們顯示的順序中的項目。

我建議使用這樣的東西（沒有完全實現;只是為了讓你知道我的意思）。

ObservableCollection<Bar> FooList;

public class Bar
{
    public ObservableCollection<Foo> Foos; 
    public DateTime Date;
} 

然后你有一個結構化的集合，你可以綁定到TreeView 。