#Wpf treeview template example code#

If you create an instance of the EmployeeTypes class as shown in the following code snippet, you will create the hierarchy of EmployeeTypes and Employees shown in Figure 3. Type = new EmployeeType('Project Managers') Listing 1: A collection class is a great place to initialize default data for that collection.

#Wpf treeview template example free#

Feel free to load this collection with the data of your choice. For purposes of this article, I'm using hard-coded data. In the constructor of the EmployeeTypes collection class, you build the collection of EmployeeType objects and fill each one with Employee objects, as shown in Listing 1. This is a collection of EmployeeType objects. The last class you create is a collection class called EmployeeTypes created using the generic List class. First is a string property, called Description, which holds the name of the EmployeeType, such as “Supervisor” or “Project Manager.” The second property, Employees, is a generic collection property to hold a list of Employee objects that are associated with this particular EmployeeType. The EmployeeType class contains two properties. A constructor is created to accept a name argument that you can use to set the Name property when you create an Employee object. This class has a single property called Name. The first class you build is the Employee class. Just as a TreeView is a hierarchical structure, create a set of classes that is also a hierarchy.įigure 2 shows the three classes that will be necessary for expressing a hierarchy of EmployeeType objects of which each EmployeeType object can hold one or more Employee objects.įigure 2: Three classes are needed to express a three-level TreeView. What's important is how you structure the classes into which your data will be placed. How and from where you retrieve the data is not important for this article.

You want to retrieve data from a database table or an XML file and build the TreeView dynamically. You don't want to use hard-coded XAML in your WPF application. įigure 1 shows you how this TreeView looks when you run the WPF application.įigure 1: A hard-coded two-level TreeView Create Hierarchical Classes to Mimic Your TreeView To start, let's look at the typical two-level WPF TreeView that has been hard-coded with the values shown in the following code snippet. In this article, I'm going to break down how these templates work, so you can really understand what's going on underneath the hood. What if you have more than two levels? This is where it's vital to understand exactly how the HierarchicalDataTemplates work.

#Wpf treeview template example how to#

To properly understand the rationale of HierarchicalDataTemplate, I found this blog from StackOverflow is very helpful.There are many examples of using the Windows Presentation Foundataion (WPF) TreeView that you can find on the Web, however, most of them only show you how to go to two levels. For the FileInfo objects, there is no child associated with each FileIno, therefore DataTemplate is used instead. In our case, the FolderItem contains sub-FolderItem + FileInfo objects, so for FolderItem, HierarchicalDataTemplate is used. Whenever there is recursion, the HierarchicalDataTemplate should be used. The correct use of DataTemplate or HierarchicalDataTemplate is the key. Once the model is defined as above, we can then use DataTemplate and HierarchicalDataTemplate in XAML: Here the CompositeCollection is used to hold heterogeneous types of data collection.

Create a class called FolderItem, and add constructors and data member as follows:Īdd another property called children, which contains both the FolderItem and FileInfo types of objects.

Below is my implementation to present all the subfolders and files inside a TreeView control. I have been struggling on this for quite a few days, and after searching StackOverflow and other MSDN blogs, finally I found one solution: use CompositeCollection. both the folders and files) to the TreeView, we need some extra efforts. the sub items contain more than one types of data (e.g.

When we want to bind heterogeneous data types, i.e. Several good blogs had covered such topics, for instance, David Sackstein ’s blog, Claus Konrad Blog, to list a few.

Data binding plays crucial roles in WPF, and is one of the most elegant advantages of using MVVM design pattern.įor the WPF TreeView control, one can use HierarchicalDataTemplate to easily bind homogeneous data structures as shown below.