基于日期的 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)));

上面的代码仅用于演示目的。

现在我想在我的图形用户界面上显示这3个元素。我想创建像这样的东西：

我正在努力解决子点问题。如何添加它们？ WPF 可以实现吗？我应该将我的 ObservableCollection Bar 分成2个，并将它们以编程方式（使用C#）添加到gui中吗？

- MyNewName

---

在我看来，有许多方法可以实现这个功能。其中一种方法是使用 ListView，该 ListView 具有一个项目模板，其中包含一个标签和一个按钮，两者都绑定到 StartScanTime。我漏掉了什么？ - AQuirky

@AQuirky 谢谢你的评论。我想我忘记了一些东西。今天可以创建多个Foo，因此不确定一个标签下会有多少个Foo。 - MyNewName

仍有许多可能性。您可以使用DataGrid，并对所有相同的日期进行分组。您也可以使用树形结构。使用数据网格方法，您可以坚持使用单个平面集合。树将需要嵌套列表。因此，很大程度上取决于您想如何组织数据。 - AQuirky

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

结果如下图所示：

- Karolis Kajenas

---

谢谢这个例子！我会改变数据结构，并用树形视图实现它。非常感谢。 - MyNewName

Answer 2

我建议使用TreeView和更好的数据结构。构建一个代表您想要显示的项目顺序的数据结构。

我建议使用类似以下的方法（未完全实现，只是为了让您了解我的意思）。

ObservableCollection<Bar> FooList;

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

然后你会拥有一个结构化的集合，可以绑定到 TreeView。

- Mighty Badaboom