Valorem Consulting

| Tags: WPF

originally posted by Josh Smith: (link) - please comment at original post

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!

Remember to please comment at original post: (link)

2018 IdentityMine, Inc. Privacy Policy