Hello there! It’s been a while since I finished GetNoticed contest and my last post here. I am done with SheetMetalArranger – at least for the minute. But that the contest is done doesn’t mean that I am done with programming. Not at all!
I started new project (maybe one time I will get back to SheetMetalArranger to improve it, but after ten weeks I need something fresh now). It doesn’t matter what the project is about at the minute (I will probably write a post or two about that), the important thing is that I’m continuing with WPF and the time has come to take a closer look at TreeView control.
Basics
TreeView control is used to display hierarchically organised structure. The best example is folder tree, for instance the one you have in Windows Explorer.
Here’s simplest example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<TreeView> <TreeViewItem Header="My books"> <TreeViewItem Header="Fantasy"> <TreeViewItem Header="J. R. R. Tolkien"> <TreeViewItem Header="The Lord of The Rings"/> <TreeViewItem Header="Silmarillion"/> </TreeViewItem> </TreeViewItem> <TreeViewItem Header="Horror"> <TreeViewItem Header="H. P. Lovecraft - The Call of Cthulhu"/> <TreeViewItem Header="G. Masterton - The Manitou"/> </TreeViewItem> </TreeViewItem> </TreeView> |
To build hard-coded tree you simply nest one <TreeViewItem> into another and build your structure. Notice that Header property is what is going to be displayed in your application. There are two other properties of TreeViewItem that should be mentioned here: IsExpanded and IsSelected which are pretty much self-explanatory but it is worth to mention them as they are fundamental for controlling behaviour of the control.
Binding
Binding a collection to TreeView can be easily achieved, it is no different as other controls. You simply bind a collection to ItemsSource property. But the tricky thing is that you need to reflect the hierarchy somehow. One way to do that could be binding a collection that contains objects of class TreeViewItem which is equipped in collection Items which contains child objects. Here’s the same example but with the difference that all data is stored in data model:
1) Lets start with the data model: our library node will consist of name, collection of books (stored as strings) and collection of sub-nodes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
public interface ILibContainer { string Name { get; set; } List<string> Books { get; set; } List<ILibContainer> Containers { get; set; } } public class LibContainer : ILibContainer { public string Name { get; set; } public List<ILibContainer> Containers { get; set; } public List<string> Books { get; set;} public LibContainer() { Containers = new List<ILibContainer>(); Books = new List<string>(); } } |
2) Our actual data for the purpose of this example will be stored in static class with one static method GetData() that return instance of LibContainer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
public static class DataModel { public static ILibContainer GetData() { LibContainer library = new LibContainer(); library.Name = "My books"; //generate Fantasy container LibContainer fantasy = new LibContainer(); fantasy.Name = "Fantasy"; LibContainer tolkien = new LibContainer(); tolkien.Name = "J. R. R. Tolkien"; tolkien.Books.Add("Lord of The Rings"); tolkien.Books.Add("Silmarillion"); fantasy.Containers.Add(tolkien); library.Containers.Add(fantasy); //generate Horror container LibContainer horror = new LibContainer(); horror.Name = "Horror"; horror.Books.Add("H. P. Lovecraft - The Call of Cthulhu"); horror.Books.Add("G. Masterton - The Manitou"); library.Containers.Add(horror); //generate books in main container library.Books.Add("J. Verne - 20.000 Leagues under the Sea"); return library; } } |
3) Our view model will consist of observalbe collection of TreeViewItems and in its constructor it will get data from the above static class. Inside the view model there is also one small private method that converts LibContainers to TreeViewItems
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
public class ViewModel { private ObservableCollection<TreeViewItem> elements = new ObservableCollection<TreeViewItem>(); public ObservableCollection<TreeViewItem> Elements { get { return elements; } set { elements = Elements; } } public ViewModel() { //get data from model ILibContainer data = DataModel.GetData(); elements.Add(GetLib(data)); } private TreeViewItem GetLib(ILibContainer lib) { TreeViewItem treeElement = new TreeViewItem(); treeElement.Header = lib.Name; foreach(ILibContainer cnt in lib.Containers) { treeElement.Items.Add(GetLib(cnt)); } foreach (string book in lib.Books) { treeElement.Items.Add(new TreeViewItem { Header = book }); } return treeElement; } } |
4) We set instance of view model and set it as data context. For example as below. Now, after that our tree view can be simplified just to only one line.
|
1 2 3 4 5 6 |
<Window.Resources> <local:ViewModel x:Key="vm"/> </Window.Resources> <StackPanel x:Name="main" DataContext="{StaticResource vm}"> <TreeView ItemsSource="{Binding Path=Elements}"/> </StackPanel |
Load on-demand
The above example is nice and easy. It gets a bit more complicated when you want to load content of your tree view on-demand when content of your tree is huge and loading all data at once would be lengthy operation – I guess that’s common situation.
To achieve that we need to build custom class that will replace TreeViewItems in collection in our view model. That class must have: 1) collection of child items of the same class, 2) Parent, IsExpanded and IsSelected properties, 3) method to load children, 4) property that defines if the element can be expanded.
Here’s our example build this way:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
public class TreeElement : INotifyPropertyChanged { private readonly ILibContainer node; public TreeElement(ILibContainer baseElement, TreeElement parentElement, bool loadMore) { children = new ObservableCollection<TreeElement>(); if (loadMore) { children.Add(blankItem); } node = baseElement; parent = parentElement; } public TreeElement(string baseElement, TreeElement parentElement) { children = new ObservableCollection<TreeElement>(); node = new LibContainer{ Name = baseElement }; parent = parentElement; } public string Name { get { return node.Name; } } private static TreeElement blankItem = new TreeElement(); private TreeElement() { } //private contructor to create the above private readonly TreeElement parent; public TreeElement Parent { get { return parent; } } private readonly ObservableCollection<TreeElement> children; public ObservableCollection<TreeElement> Children { get { return children; } } public bool HasDummyChild { get { return this.Children.Count == 1 && this.Children[0] == blankItem; } } private bool isExpanded; public bool IsExpanded { get { return isExpanded; } set { if (value != isExpanded) { isExpanded = value; this.OnPropertyChanged("IsExpanded"); } // Expand all the way up to the root. if (isExpanded && parent != null) parent.IsExpanded = true; // Lazy load the child items, if necessary. if (this.HasDummyChild) { this.Children.Remove(blankItem); this.LoadChildren(); } } } private bool isSelected; public bool IsSelected { get { return isSelected; } set { if (value != isSelected) { isSelected = value; this.OnPropertyChanged("IsSelected"); } } } protected void LoadChildren() { foreach(ILibContainer cnt in node.Containers) { children.Add(new TreeElement(cnt, this, true)); } foreach (string book in node.Books) { children.Add(new TreeElement(book, this)); } } #region INotifyProperyChanged implementation public event PropertyChangedEventHandler PropertyChanged; private void OnPropertyChanged(params string[] propertiesChanged) { if (PropertyChanged != null) { foreach (string property in propertiesChanged) { PropertyChanged(this, new PropertyChangedEventArgs(property)); } } } #endregion } |
What’s important in the code above is that Children collection must contain dummy element before actual elements are loaded. This is necessary because it would not be possible to expand the element, therefore it would not be possible to execute method that load further elements.
ViewModel class will now have only collection of TreeElement and will gather data from DataModel in its constructor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
public class ViewModel { private readonly ReadOnlyCollection<TreeElement> trees; public ReadOnlyCollection<TreeElement> Trees { get { return trees; } } public ViewModel() { List<TreeElement> rootElements = new List<TreeElement>(); ILibContainer root = DataModel.GetData(); foreach (ILibContainer node in root.Containers) { rootElements.Add(new TreeElement(node, null, true)); } trees = new ReadOnlyCollection<TreeElement>(rootElements); } } |
Now, we need to define our TreeView control to display our custom items correctly. This is done by creating local style where we bind IsExpanded and IsSelected properties of TreeViewItem with counterparting properties of our custom TreeElement
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<Window.Resources> <local:ViewModel x:Key="vm"/> </Window.Resources> <Grid DataContext="{StaticResource vm}"> <TreeView ItemsSource="{Binding Path=Trees}"> <TreeView.ItemContainerStyle> <Style TargetType="{x:Type TreeViewItem}"> <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" /> <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" /> <Setter Property="FontWeight" Value="Normal" /> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="FontWeight" Value="Bold" /> </Trigger> </Style.Triggers> </Style> </TreeView.ItemContainerStyle> <TreeView.Resources> <HierarchicalDataTemplate DataType="{x:Type local:TreeElement}" ItemsSource="{Binding Children}" > <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Name}" VerticalAlignment="Center"/> </StackPanel> </HierarchicalDataTemplate> </TreeView.Resources> </TreeView> </Grid> |
And that’s it. This is how I use TreeView control. Possible extension to the above would be to create custom WPF control to handle custom types of tree elements and equip it with dependency property that exposes currently selected item. But that’s easy to do and isn’t in any way specific to TreeView.
So, thanks for today and good luck!
Sources:
WPF 4.5 Księga eksperta. Podręcznikprogramisty WPF 4.5! Adam Nathan (translated by Paweł Gonera, Ireneusz Jakóbik), published by HELION S.A 2005
https://www.codeproject.com/Articles/26288/Simplifying-the-WPF-TreeView-by-Using-the-ViewMode
