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!

In my previous post I showed a markup extension that only creates elements declared in your XAML file if you are running with Full Trust from the CLR. After I posted that, Laurent Bugnion, a fellow WPF MVP and WPF Disciple (as well as a really great guy!), asked if I know of a way to use a markup extension to perform the moral equivalent of a #if … #elif … #endif in C#. That was an interesting question, so I decided to investigate. It turned out to be very simple.

Here is my new If class:

You can use that markup extension to conditionally add elements to the element tree, based on whether you are building a DEBUG or RELEASE build. Here is a demo of that class being used:

If you create a DEBUG build, the top TextBlock appears in the Window, otherwise the bottom TextBlock shows up. Naturally, if you have a more complicated set of build options, you can enhance my If class to take those build configurations into account.

[EDIT]

After I posted this, Andrew Smith pointed out that there is another way to achieve this, as seen here. The approach involves the use of the Markup Compatibility XML namespace, and another assembly to contain your own XML namespaces. That technique is more complicated to set up, but the elements in excluded blocks will not be created/seen by the XAML reader.

[/EDIT]

Download the source code here. NOTE: Change the file extension from .DOC to .ZIP and then decompress it.

Karl and Andrew have taken Mole to the next level. Now you can edit properties and fields of an object, and those modifications are persisted! I was only marginally involved with this new feature, mostly testing and giving feedback, but I’m really glad that those two guys took the time to see it through to completion. This is really amazing stuff, and I highly recommend you check out the new article and download the latest bits. Here is the new article:

There have been many iterations of the Mole visualizer. The latest and greatest release is not confined to WPF applications, it works with any application!! Karl Shifflett and Andrew Smith (of Infragistics) have really hit the ball out of the park. I helped out with testing, editing the article, and providing feedback. I’ve been too busy learning Silverlight 1.1 to keep up with their amazing pace. Great work guys!

(Note: I cross-posted this blog entry between this blog and my new blog. Normally I would not do this, but I really want to help spread the word about Mole for Visual Studio. It’s such an awesome tool!)

Karl Shifflett decided that Mole II was not good enough, so he added in a feature which allows you to see non-public fields of the object you are inspecting. Now you can see properties and fields, which makes the debugging process even more rapid because the true state of your objects can be seen with ease. After we reviewed the new feature, Karl blogged about it and wrote an article on CodeProject. Check out his updates here: http://karlshifflett.wordpress.com/2007/12/11/mole-v22-black-ops-version-released/

As of this writing, this new feature does not display the private fields of an object’s ancestor types. It only displays the fields found in the object’s most derived partial. I think that needs to be addressed before it is truly “done,” but so far it’s a great start. Nice work, Karl!

Karl Shifflett, Andrew Smith, and I have gone too far this time. We are so far gone into the world of WPF visualizers that there’s no turning back. We took our Mole visualizer for WPF and built something ten times better…Mole II.

That’s right, the visualizer which made Woodstock look like a toy is now dwarfed by its successor. Mole II is so incredibly cool, so fast, so robust, and so IMMINENTLY USEFUL that I can do it no better justice than to simply provide you with a link to the article about it: http://www.codeproject.com/KB/WPF/moleIIforWPF.aspx

Karl and I have been slaving over this thing for weeks now. Andrew has been like a sniper, who has helped squash some of the really nasty bugs and then disappear into the thickets until needed again. Mole II was the most fun, collaborative, interesting, and exciting software project I’ve ever been involved with. All I can say is…WOW!

Oh yeah, by the way, I’ll be giving a WPF presentation tonight (Thursday, 12/7/2007) at the Beantown .NET User Group. If you’re in Boston tonight, stop on by.

Woodstock was a prototype; a “proof of concept” which really caught on and matured. After I published the Woodstock article a good friend and cohort in WPF crime, Karl Shifflett, began working on a better WPF visualizer. After a couple weeks of us discussing, prototyping, emailing code snippets, sharing/critiquing ideas, and him working around the clock, he finally published an article about it. His WPF visualizer, called Mole, is now publicly available, just waiting for WPF developers to download it and put it to use.

I highly recommend that you check out Mole. It is the WPF visualizer. Forget about Woodstock, use Mole!