<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Using Hierarchical Data template

Published on
17,045 Points
11,045 Views
Last Modified:
Approved
As more and more people are shifting to the latest .Net frameworks, the windows presentation framework is gaining importance by the day. Many people are now turning to WPF controls to provide a rich user experience. I have been using WPF controls for several of my UI requirements and find that they are quite easy to use once you get the hang of it. However, the controls can seem a little confusing and hard to use for a beginner, especially if you have a background only in winforms. It is much easier if you try to work with individual controls and understand their behavior in the beginning stages.

When I started off with WPF, I needed to show a recursive object in a tree view and frankly speaking, the WPF Treeview control gave me nightmares while I tried to do so .However, in the end it turned out to be pretty simple. All you need to do is create a data object that you want to show on the tree and bind it to the itemsource of the Treeview. Here’s how.

Data Object

Let us create a class called Person with Name, Age and Children as properties. The aim here is to show the name and age of a person in a tree along with details of his children as sub-nodes and this continues recursively, similar to a family tree.
 
public class Person
    {
        public Person()
        {
            Children = new ObservableCollection<Person>();
        }
        public string Name { get; set; }
        public int Age { get; set; }
        public ObservableCollection<Person> Children { get; set; }
    }

Open in new window


As you can see the number of levels can be determined only at runtime. Now what we will do is let WPF do all the hard work for us and find out how many levels there are while we sit back and enjoy the show.

Treeview template

To find out the number of levels, we use the tree view with the template as shown below –
 
<TreeView Name="trVwPerson" xmlns:obj="clr-namespace:TestWpf">
  <TreeView.ItemTemplate>
     <HierarchicalDataTemplate DataType = "{x:Type obj:Person}" ItemsSource="{Binding Path=Children}">
         <StackPanel Orientation="Horizontal">
             <TextBlock Text="{Binding Path=Name}"/>
             <TextBlock Width="10"/>
             <TextBlock Text="{Binding Path=Age}"/>
         </StackPanel>
      </HierarchicalDataTemplate>
   </TreeView.ItemTemplate>
</TreeView>

Open in new window


Here we are using a Hierarchical Data template and setting its data type.

We have already declared the class earlier, so when we set the item source of the tree , it will automatically pick this template for an object of type Person and apply it as the item template.

Item Source Binding

After creating the class and using the template, we need to bind the item source of the Treeview to a list. To do this, I'm just going to create a dummy list of the said class and set it to the item source of the tree view.
 
ObservableCollection<Person> Souce = new ObservableCollection<Person>();
            Person P1 =
            new Person()
            {
                Name = "GrandFather",
                Age = 90
            };
            Person P11 = new Person()
            {
                Name = "Father1",
                Age = 60
            };
            Person P111 = new Person()
            {
                Name = "Child1",
                Age = 30
            };
            P11.Children.Add(P111);
            Person P12 = new Person()
            {
                Name = "Father2",
                Age = 60
            };

            P1.Children.Add(P11);
            P1.Children.Add(P12);

            Person P2 =
            new Person()
            {
                Name = "GrandFather2",
                Age = 91
            };
            Person P3 =
            new Person()
            {
                Name = "GrandFather3",
                Age = 92
            };
            Souce.Add(P1);
            Souce.Add(P2);
            Souce.Add(P3);
            trVwPerson.ItemsSource = Souce;

Open in new window


Lo and Behold! Now you have a hierarchical tree with n number of levels that looks like this:
Tree view with multiple levels.
0
Comment
0 Comments

Featured Post

Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

Join & Write a Comment

This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…
Wrapper-1-Query. Use an Excel function to calculate a column for an Access query. Part 1. Shows a query in Access that has a calculated column with the results of an Excel worksheet function. See how to call a wrapper function from a query, and …
Other articles by this author

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month