Using the WPF Tree Visualizer

Versions:  2010
Published:  1/29/2010
Code:  vstipDebug0004

 

For those not familiar with WPF Trees, check out this article:  https://msdn.microsoft.com/en-us/library/ms753391(VS.100).aspx

 

Now.  For those that ARE familiar with them have we got something for you:  WPF Tree Visualizer.  Yes, it started out as a CodePlex project and ended up in the product itself as a visualizer.  But how do you use it? 

 

  1. Enter debug mode using any method you prefer.

  2. Once you are there take a look at either a DataTip, the Watch window, the Autos window, or the Locals window.  For this example, I will use the Autos window.

  3. Choose any control in the Autos window and then click on the magnifying glass way over to the right of the control name.
    image

  4. You will see a drop down list.  Choose the WPF Tree Visualizer to get this dialog:
     image

  5. This thing has a lot of different parts so let's take a look at each one.  First, the Visual Tree shows you the hierarchy of the controls:
    image

  6. Clicking on any particular node of the tree will show you the Rendering view just below:
    image

  7. Also, the selected control will have its properties displayed in the large area to the right:
    image

  8. In, both, the Visual Tree and the Properties area you can search/filter the results by typing into the "Search" or "Filter" textboxes respectively:
    image

  9. WARNING:  Watch out for the results as they may not be what you expect.  See the extra items in the list that don't have the word "context" in them?  How did they get there?  Well, if I scroll to the right and look at other properties you can see how it happened:
    image 

    Currently, there is no way that I am aware of to change this behavior.