Virtualizing Tree View (VTreeView)

• Download source and demo project (VS 2008) - 213.67 KB

Introduction

This article discusses how to use my Virtualizing TreeView (or VTreeView). It also, compares the performance and flexibility between WPF's TreeView and my VTreeView.

Background

I built a project that used the WPF treeview. I was impressed with the data binding and flexibility in styling the treeview. After I thought I was done I found that the performance of the treeview was lacking. The perfomance issues are in part to the amount of data (150 item on the main level and 100 under each of those) and the complexity of the style (each node had a custom icon) I was using. Loading my tree view took about 6 seconds. At first I thought the amount of time was long because each of the 150 nodes had to check its children to see if it should show the expander. At this point I decided to try Philipp Sumi's extented treeview. I like Philipp's extention because it allows for data virutalization. I was able to override the HasChildItems and write a much faster method than the slow default of fetching all the children. This cut my load time down to about 3 seconds. But this still was not fast enough. I realized that the remaining 3 seconds was not related to the data but to the UI Elements. The TreeView does not virtualize its UI Elements. The only controls that do are ones that use the virtualizing stack panel such as the listbox. I decided to google a little more and I found Beatriz Costa's Tricks on improving the treeview's performance. After converting her code to use my business logic my load time dropped to about 1/2 a seconds and the memory usage drop by a factor of 10. You could say I found my answer. My only difficulty with her code was that it was hard to reuse because the treeview logic and the business logic were mixed into the same classes and the styles had to be copied. After all this, I decided to make a custom control that extends the listbox that would act and look like a treeview. I call it the VTreeView.

Using the Code

Data Binding. The first line is binding to a TreeView and second to a VTreeView.

myTreeView.ItemsSource = root.Children;

myVTreeView.Data.AddRootItems(root.Children);

Binding To Children. The treeview uses HierarchicalDataTemplate. The VTreeView use an abstract class call TreeNode. So instead of setting ItemsSource = "{Binding Path=Children}" the TreeNode can be extended overriding the Children property. Note how the overriden property use a cached version of the TreeNode List. This is optional. I show this to emphasized the flexibility of extending the TreeNode class.

private List<treenode> children = null;

public override ICollection<treenode> Children
{
    get
    {
        if (children == null)
            updateChildren();

        return children;
    }
}

private void updateChildren()
{
    children = new List<treenode>();

    for (int i = 0; i < 150; i++)
    {
        children.Add(new RandomTreeNode() { Name = i.ToString() });
    }
}

At this point you are ready to use the VTreeView, but if you would like to further optimize the VTreeView and use some its added functionality keep on reading.

Overriding the Name property. If you decided to use the default template or a copy of it you will need to override this property.

private string _name = "";
public override string Name
{
    get { return _name; }
    set
    {
        _name = value;
    }
}

Overriding the HasChildren property. This property is virtual so you don't have to override it. The default implementation just get checks the count on the Children property. If checking the child count is slow than you can override this method with something faster.

Overriding the UpdateChildren method. This method is called if the VTreeView.Data.UpdateChildren(TreeNode TN) is called. This allows you to update entire collections and have it reflected in the tree. But if your tree is static there is no need to override this method.

TreeNode IsExpanded Property. This properties allow you programaticly expand and collapse a node. It is used in the default data template to control the look of the expander.

TreeNode Level Property. It is used in the default data template to control the amount indentation of the of the node. This is what really makes the ListBox look like a TreeView. I have to give credit to Beatriz for this one.

The VTreeView.Data is of Type TreeData. This class keeps the Tree Data bound to the ListBox and response to node expansion and collapsing. This class can be use to add root items, remove items (and their desendants), and to send update children commands.

Added Bonus

VTreeView is extended from ListBox. This gives us the added bonus of all the selection modes including multiple select. SelectedItems and Items properties allow for easy selection control and searching for items.

Conclusion

Remember this is a custom control so you can use the default styles or replace them with your own. The VTreeView requires items of type TreeNode but you can mix and match different classes that extend TreeNode. For example you could have a TeamTreeNode class of whose children are of type PlayerTreeNode. Please give me feedback. I would really like to know if this article has been helpful. You may email me at paul@zyto.com.