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.

clip_image002[5]

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…

clip_image002[7]

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

clip_image004

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

image

 

Get the full source code here

Advertisements

12 thoughts on “Silverlight Visual Tree Visualizer

  1. John Smith says:

    Hi. I’d like to try your visualizer but the download link seems to be dead. Could you restore it or mail me the project?

  2. John Smith says:

    I just retried the link and it worked. Thank you for your code.

    • beatkiener says:

      I’ve noticed that sometimes the webserver where I have hosted my download content goes down.
      I have to talk with my hosting provider. Thank you for reporting this issue.

  3. Huan says:

    The name ‘VisualTreeVisualizer’ does not exist in the current context

  4. Thomas says:

    Nice Idea 🙂 really need that,
    but seems not to work in my enviroment 😦
    i can successfully write the Tree down,
    but the function Helpers.VisualTreeVisualizer.GetElementByHashCode(654897) returns null,
    even for top most elements.

    i am running Silverlight 4.0 in Visual studio 2010.
    The Application is an out of browser one…

    i called the function in watch window in the constructor after InitializeComponent() and some other initialisation stuff.
    maybe i am doing something wrong ?

    best regards

    • beatkiener says:

      Hi Thomas,

      Thank you for your feedback.
      GetElementByHashCode uses the Application.Current.RootElement to traverse the tree down to find the element with the provided hashcode. When you call GetElementByHashCode before the first layout cycle could happen then the Application.Current.RootElement is not ready.
      Therefore I’ve implemented an overloaded version where you can put in the root DependenyObject.
      Try this:

      Helpers.VisualTreeVisualizer.GetElementByHashCode (this, 33675143)

  5. Thomas says:

    hello, thank you for answer, i have triet out the MainPage and some other UIELements,but it stills returns null.
    maybe its another problem ?

  6. beatkiener says:

    It works fine with my OutOfBrowser app. Can you send me a simplified version of your project in order that I can debug/test it?
    My email: kiener@glauxsoft.com
    Thanks.

  7. […] usual, I made use of the work of others.  First, I used Beat Kiener’s VisualTreeVisualizer to show me what was there.  It was, of course, necessary to wait until the WrapPanel had been […]

  8. viragdesai says:

    Love you beatkiener !!!

    You just made my day !! Saved me a lot of time and effort and my problem was solved in matter of minutes..

  9. Willena says:

    Netbooks are great, but mobile computers of their size are rarely considered gaming machines. You need enough space to handle all those applications that take up hard disk space.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Advertisements
Advertisements
%d bloggers like this: