XAML check in Windows 8 Store Apps / VS2012

Question

I am looking for a way to test the XAML launch in a Windows 8 store app. Essentially, I want the firebug / chrome inspector style functions, where I can see the XAML source generated at runtime, to debug simple layouts and style issues.

I tried Snoop, Pistachio and WPF Inspector, but no one works for Windows Store apps. The only thing I can find that seems to work for Store apps is XAML Spy, which costs 90 euros. I can not justify this cost.

Is there any other way to test XAML?

Answer 1

The VisualTreeDebugger class from the WinRT XAML Toolkit is what you can use if you want a free tool. It's not as much as XAML Spy, but you get what you pay for. I was thinking about adding additional features to it, such as actual visualization of what you are debugging, but the required work would not justify the investment time +, I did not want to step on Koen Zwikstra turf. I am sure that he is doing a great job with this tool. In any case, VisualTreeDebugger is enough for me, so maybe you will be enough too.

The way you can use this is to add a class to your code, add a link to your XAML, for example

xmlns:debug="WinRTXamlToolkit.Debugging" 

then put the hook on the control where you want to start debugging, for example

 debug:VisualTreeDebugger.BreakOnLoaded="True" 

which will unload the main data of the visual tree as text in the debugger output window (Ctrl + W, O) and break the code that dumped your tree, where you can examine the variable "path", which contains a list of all the visual elements of the tree from the debugged control to the root, so you can observe their values ​​if what you need was not unloaded in the output window.

Other options include

 debug:VisualTreeDebugger.BreakOnTap="True" debug:VisualTreeDebugger.BreakOnLayoutUpdated="True" debug:VisualTreeDebugger.BreakOnLoaded="True" debug:VisualTreeDebugger.TraceOnTap="True" debug:VisualTreeDebugger.TraceOnLayoutUpdated="True" debug:VisualTreeDebugger.TraceOnLoaded="True" 

Since this is source code and a really simple simple class, you can easily add extra things to the code to do any custom debugging.

Answer 2

WinRT XAML Toolkit now has a visual visual tree debugger.

Get it from NuGet: nuget.org/packages/winrtxamltoolkit.Debugging then call WinRTXamlToolkit.Debugging.DC.ShowVisualTree() to display the debugger tool inside your application. This is the third option, so now you can use

• WinRTXAMLToolkit.Debugging.VisualTreeDebugger class - allows you to debug a tree in your Visual Studio
• XAML Spy is a great commercial visual tree debugger that works in a separate window
• and now it's the visual tree debugger in the WinRT XAML Toolkit that works inside your application.

Answer 3

XAML Spy is what you need. You will find it at http://xamlspy.com .

Answer 4

There is a new free tool called XAML Inspector. It is available through NuGet. Just search for "xamlinspector" or get if on the project page: www.xamlinspector.com

Hi Christian