Displaying any .NET object in a WPF TreeView

I recently encountered an interesting challenge: How to display a .NET object’s properties in an expandable tree view? This is something we constantly use inside the Visual Studio debugger:

Visual Studio Debugger's data tip

The debugger’s data tip control is exactly what I needed. An input would be any .NET object, and the result should be a tree view displaying the object’s properties and fields.

I figured there would be an easy solution I can google and copy-paste, spending no more than 10 minutes on the whole thing. No such luck. Even though I found some similar solutions, they weren’t what I wanted or simply didn’t work.

After some research and coding, spending much more than the intended 10 minutes, I came up with a solution I’m pretty pretty happy with (*self pat on the back).

The general idea

We need to populate a TreeView. To do that, we will need to go over each property of the object and add it to the tree. Then, we will need to go to the children of each of those properties and add them as well. And so on.

As a matter of fact, going over the properties and fields of an object with Reflection is not that easy. You might have virtual properties, abstract classes and generics. Luckily, a library that does exactly that, already exists. You probably know it and use it every day – Yes, it’s Newtonsoft.Json.

Serializing an object to JSON will do exactly what we need – Go over the object’s properties and fields with reflection, turning them into a “tree-like” data structure. Once in JSON format, we can use JavaScriptSerializer (in System.Web.Extensions) to deserialize the JSON and get a data structure we can easily iterate over and populate the tree view.

Thanks to this article (Which showed how to display JSON in a WinForms tree view) for pointing me in the right direction.

By the way, we can use the same solution to visualize a JSON document in a WPF TreeView.

The code

The WPF Control displaying the tree will be:

ObjectInTreeView.xaml:

With some code-behind:

You’ll notice that whenever the property ObjectToVisualize changes, a new TreeNode is created with the factory method CreateTree.

All the logic of serializing to JSON and deserializing with JavaScriptSerializer happens in the TreeNode class:

Usage and Result

We can use the ObjectInTreeView Control in XAML or in code. In XAML you can write something like:

And in code:

The result will be:

You might want to style that tree a bit before going to production though.

Hope this helped and happy coding.

Share:

Enjoy the blog? I would love you to subscribe! Performance Optimizations in C#: 10 Best Practices (exclusive article)

9 thoughts on “Displaying any .NET object in a WPF TreeView”

  1. Wow. This is great but I’m having a little trouble adapting it to what I want since I’m really inexperienced in WPF. Is there any way you can post the complete solution?

    1. I managed to build the user control with one issue. Visual Studio complained that InitializeComponent() does not exist so I had to add an empty method called InitializeComponent(). That was strange.

      Now I’m trying to add the userControl to a WPF window with a small dictionary of key,values as a test data. I’ve confirmed that it has the dictionary of values but the user control does not show on the window. Any idea what I might be doing wrong?

          1. Hi. I tried again, this time being careful to not copy paste the XAML and thereby lose the InitializeComponents stuff. Unfortunately it still doesn’t work. I’ve uploaded my solutions here:
            https://nofile.io/f/z7km0B81z4v/shipViewerWPF.zip
            https://nofile.io/f/qmK2qtEpgWa/ObjectInTreeView2.zip

            ObjectInTreeView2 is the treeView control and shipTreeViewerWPF is a host with a button and a ObjectInTreeView with the ObjectToVisualize pointing to the button.

            Perhaps when you have time you could look at it and see what I’m doing wrong.
            Thanks.

Comments are closed.