WPF ItemsControl with Date Based Subitems
I currently have ObservableCollection<Foo> Bar = new ObservableCollection<Foo>();
.
Foo
created this way
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 above code is for demonstration purposes only.
Now I want to display these 3 items on my gui. I want to create something like this:
I am struggling with subpoints. How can I add them? Is this possible with WPF? Should I split mine ObservableCollection Bar
by 2 and add them programmatically (C #) to the gui?
source to share
WPF provides you with a control TreeView
. It allows you to define HierarchicalDataTemplate
which one is used to express the hierarchy of objects (tree in your case) through a view.
Here's a small example:
<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 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>();
}
Working class:
public class Work
{
public string Name { get; set; }
public ObservableCollection<Work> WorkItems { get; set; }
public bool IsFinalItem { get; set; }
}
And the result:
source to share
I would recommend a TreeView
better data structure too. Create a data structure that represents the items in the order in which you want to display them.
I recommend using something like this (not fully implemented, just to give you an idea of what I mean).
ObservableCollection<Bar> FooList;
public class Bar
{
public ObservableCollection<Foo> Foos;
public DateTime Date;
}
Then you have a structured collection that you can bind to TreeView
.
source to share