WPF ItemsControl with subpoints based on date

Question

Currently I have a ObservableCollection<Foo> Bar = new ObservableCollection<Foo>();.

Foo is build up like this

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

Bar contains 3 elements.

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

The code above is just for demonstration purpose.

Now I want to display this 3 elements on my gui. I want to create something like this:

I'm struggeling with the subpoints. How can I add these? Is it possible with WPF? Should I split my ObservableCollection Bar into 2 and add them programmatically (C#) to the gui?

Answer 1

WPF provides you with TreeView control. It allows you to define HierarchicalDataTemplate which is used to express object hierarchy (tree in your case) via view.

Here is a small sample:

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

Code behind:

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

Work class:

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

And the outcome:

Answer 2

I would recommend a TreeView and a better data structure. Build a data structure that represent the items in the order you want them to display.

I recommend using something like this (not fully implemented; just to give you an idea what I mean).

ObservableCollection<Bar> FooList;

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

Then you have a structured collection you can bind to a TreeView.