IdentityMine

| 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:

1_snooper

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:

2_demowindow

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

3_treeview

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:

4_visualelement

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:

5_adorner

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)

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestShare on RedditShare on TumblrEmail this to someoneDigg thisFlattr the authorShare on StumbleUpon

Comments are closed.