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!