Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / programming / debugging

See the WPF Visual Tree with the VS 2010 WPF Visualizer

0.00/5 (No votes)
24 Jan 2012CPOL2 min read 21.6K  
Visual Studio 2010 has a new visualizer for WPF that exposes a dependency object's visual tree.
In order to understand WPF, it is sometimes useful to examine the "visual tree" that's created by WPF applications for windows and user controls. Prior to Visual Studio 2010, this was possible only by adding a new visualizer like Woodstock by Josh Smith, Karl Shifflett, and Florian Kruesch. In VS 2010, a visualizer for visual trees is included "off the shelf."

To use the visualizer, you only need to compile a WPF project in "Debug" configuration, set convenient breakpoints in code where one or more dependency objects (such as a WPF window or control) are referenced, and then press F5 to start debugging. When execution reaches a break point, locate an active reference to a dependency property, and click the magnifier icon to view its visualizer. (You can do this by holding the mouse over the reference in code until the values DataTip appears, or finding a reference in the Autos, Locals, or Watch windows. The magnifier can be found in all of these locations.)

For dependency objects, the WPF Visualizer will appear with a Visual Tree pane on the left, and a Properties pane on the right. (If the dependency object has no rendered visual tree members, only the selected object's type name will be in the visual tree. If it does have rendered visual tree members, a triangle will appear beside the object type name. Clicking on the triangle will expose its immediate descendants.)

The trick is in finding a breaking point where a visual tree can be viewed. If you break within a window's constructor, you can view the window itself using "this," but since the window will not have been rendered at that time, the tree will only contain the window object. The earliest place to see the visual tree of a window would be immediately after the content of the window has been displayed. You can add the following code in the code behind file of a window:

protected override void OnContentRendered(EventArgs e)
{
    base.OnContentRendered(e);
}


Set a break point here and use the visualizer on "this" from the Locals window, and you will be able to see the window's complete visual tree.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)