Silverlight Visual Tree Visualizer

A Visual Tree visualizer enables you to view the visual tree while you are debugging in visual studio. It provides detailed information about all properties on every element in the visual tree, and a snapshot image of each element, allowing you to more easily debug complex WPF user interfaces.

Unfortunately debugger visualizers are not supported in Silverlight development environment. They are being considered for future releases.

Currently I’m working on a quite big Silverlight application. To have a visual tree visualizer is a huge time-saver during development. Just a while ago I implemented a visual tree visualizing helper for the Silverlight environment. It writes the tree as a textual-tree into the output-window of visual studio.

 

-Demo.MainPage  23692278
|-Grid Name=LayoutRoot 41429416
   |-StackPanel  21454193
     |-Button  26765710
     | |-Grid  5894079
     |   |-Border Name=Background 11903911
     |   | |-Grid  40026340
     |   |   |-Border    Name=BackgroundAnimation 24692740
     |   |   |-Rectangle Name=BackgroundGradient 20908074
     |   |-ContentPresenter Name=contentPresenter 654897
     |   | |-Grid  1816341
     |   |   |-TextBlock  7658356
     |   |-Rectangle Name=DisabledVisualElement 53954942
     |   |-Rectangle Name=FocusVisualElement 15832433
     |-Button Name=btnSetValue 50632145
       |-Grid  12905972
         |-Border Name=Background 8274172
         | |-Grid  7358688
         |   |-Border    Name=BackgroundAnimation 66228199
         |   |-Rectangle Name=BackgroundGradient 59182880
         |-ContentPresenter Name=contentPresenter 16347077
         | |-Grid  38750844
         |   |-TextBlock  49044892
         |-Rectangle Name=DisabledVisualElement 62883878
         |-Rectangle Name=FocusVisualElement 29083993

 

The output contains the hierachial tree, the element type and if available the name and other property values such as Grid.Row/Columns etc. Each node also contains the hash code of the CLR object (see below for why).

 

The helper provides the following methods:

• void WriteDownwards(DependencyObject obj)
  Writes the full visual tree from a given dependencyobject down to the leafs into the output.
• void WriteUpwards(DependencyObject obj)
  Writes the visual tree from a given dependencyobject up to the application root into the output.
• DependencyObject GetElementByHashCode(int hashCode)
  Searchs an element in the visual tree matching with the given hash code.

 

How to use

Call WriteDownwards or WriteUpwards in the immediate window…

…you get the tree in the output. Use the hash code…

…to get an object reference in the watch window to inspect the element in more detail or to manipulate some property values.

 

Get the full source code here