Quick and dirty WPF element tree viewer

This morning I decided to build a little WPF dialog window that would show the visual tree of some UI, and provide visual indicators over that UI when you select one of its elements.  This was just a fun exercise.  If you want to have a serious element tree viewer, then be sure to use Snoop instead.  This quick post just shows the result of my morning fun.

Here’s the resulting dialog window in action:


Notice that a ContentPresenter is selected, which contains an image of a ninja.  In the UI being analyzed, you’ll see that the ContentPresenter is decorated with a light green box:


The “Snooper” dialog window contains a TreeView that renders the visual tree of the other UI.  That TreeView is declared as:


It is bound to a hierarchy of VisualElement objects.  VisualElement is a class that I made to represent an element and its child elements.  The important part of that class is seen below:


Notice that when a VisualElement is selected, it puts a SelectionAdorner into the adorner layer of its associated UIElement.  SelectionAdorner is a class I made that just renders a rectangle around some element.  It is seen below:


You can download the demo project here.  NOTE: Be sure to change the file extension from .DOC to .ZIP and then decompress.  WPF is fun!

4 Responses to Quick and dirty WPF element tree viewer

  1. Quick and dirty WPF element tree viewer…

    DotNetBurner – burning hot .net content…

  2. […] Quick and dirty WPF element tree viewer (Josh Smith) […]

  3. Brad says:

    Hey Josh,

    Cool post. I like the ninja. I have been reading your blog for a long time now and for some reason I just noticed that you post your code snippets as images. Any specific reason for this?

    The last few have made the code noticeably blurry and hard to read. Ever though of using Syntax Highlighter? (http://code.google.com/p/syntaxhighlighter/)

    Keep up the awesome content


  4. BungNguyen says:

    Hi Josh! I have a problem. Can you help me?
    I’m building a project and was being error. You can see (http://i437.photobucket.com/albums/qq96/tbndlu/Untitled.png)

%d bloggers like this: