Quick and dirty WPF element tree viewer

September 30, 2009

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:

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:

demowindow

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

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:

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:

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!


The “From Russia with Love” way to create ViewModels

September 7, 2009

I just published an article about a technique I use to streamline and simplify the way that ViewModels are created in an MVVM app.  I’m not saying that this is the “right” way to do things, but simply something I find useful.  Enjoy!

http://www.codeproject.com/KB/WPF/FromRussiaWithLove.aspx


How to prevent a TabItem from being selected

September 4, 2009

In case you ever need to prevent the user from selecting a tab in a WPF TabControl, here’s one way to do it…

ControllingTheTabControl

The SelectedContent of the TabControl hasn’t changed at the time that the ItemsSource’s default collection view raises its CurrentChanging event.  If you decide to lock the user into the selected tab, simply set the TabControl’s SelectedIndex back to the index of the SelectedContent.  No fuss, no muss…