Click here to Skip to main content
15,885,032 members
Articles / General Programming / Debugging
Tip/Trick

See the WPF Visual Tree with the VS 2010 WPF Visualizer

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
24 Jan 2012CPOL2 min read 21.3K   1  
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)


Written By
Yoder's List
United States United States
Gil Yoder is an application performance analyst at Chevron. He has been working in their IT organization for about fifteen years. Before Chevron computer technology was more hobby than profession for him. He still considers it a hobby and enjoys learning about all of its aspects.

He starting learning how to program on a TRS-80 Model I computer with 4K RAM and 4K ROM. Those who can remember those days know that the 4K ROM contained all of the "OS" for the computer, and somewhat crippled version of Microsoft BASIC.

After a while he was able to upgrade the computer so that eventually he had a fully loaded 64K system, 48K RAM, and 16K ROM. With that he learned to program in BASIC and Z80 Assembly Language. He sold his first machine language program to 80-Micro Magazine (shortly before it folded) for $500. The program was a Z80 Debugger that sported a feature allowing single stepping within ROM.

At this time most of Yoder's free time is spent programming and learning about C#, WPF, SilverLight, MVVM, and other related technologies.

Mr. Yoder lives in a small suburb of Houston, TX with his wife. He and his wife have one daughter who is married and has two wonderful boys. Yoder looks forward to the day he can teach his grandsons how to design and create WPF controls.

Comments and Discussions

 
-- There are no messages in this forum --