Tips on debugging UI errors in Windows Phone 7

Question

I have a Windows Phone 7 application and I regularly see "weird" UI glitches that take me AGES to debug. It's a range of issues like controls appearing to have extra margin, scrollbars not appearing, animations looking really glitchy, entire page scrolled down, combobox items offset, etc. etc.

I'm happy to admit it might be me - but how to you debug UI errors like this? I know there's Silverlight Spy for the PC Silverlight Apps. Is there anything like this for Windows Phone 7?

Any debugging tips v much appreciated.

Answer 1

Here are a couple of things which I normally do... none of them are real smart, but sharing nevertheless.

1. Deploy it after every 2-3 controls that you add and ensure things are correctly laying out.
2. If by chance it doesn't work the way I am expecting it to, I have a parallel Silverlight 3 project running in which I typically paste the XAML and see if it works fine.

After that, I typically check it out as a Silverlight project since even I am not sure of any tools available for Win Phone 7.

I have favorited this question and I hope someone points us to something more interesting.

Answer 2

I have found that it is a good idea to start with Windows Phone 7 Design Templates, adopt a version control system right from day one of the project and to edit the XAML, use Expression Blend. The Visual Studio is great for writing code, but, to harness the real power of the tools, Expression Blend is the best to style your application.

HTH, indyfromoz

Answer 3

There's a lot you can checkout with Blend as Indy suggests. This is really good advice.

Regarding some of your specific issues these aren't necessarily glitches. I'll comment on a couple that stand out.

Extra margin - this and padding are built into the metro controls by design. Again, in blend you can dig into this by retemplating the control and changing properties of objects within the control.

The procedure for this is rclick the control, edit template, edit a copy. Then you can look at the different states and objects and change things as suits. While doing this please keep in mind the App Certification Requirements and UI Design Guidelines.

Regarding scrollbars, these are by design hidden until you start scrolling. You can control their availability with Horizontal/VerticalScrollBarVisibility on relevant controls (or on the ScrollViewer embedded in some controls - again retemplate in blend).

Combobox isn't metro themed so is going to struggle in the fitting in department, but there are posts around where people have done work on this. ListPicker is a better fit imo from the Windows Phone Toolkit released with the RTM tools.

Answer 4

Here are some tips:

1. Many people have issues with the emulator due to their graphics card.

Things like slow animations and ui glitches are very common.

Check that your graphics card is Direct X 10.1 at least and that your Driver

Model is WDDM 1.1

Make sure you have the latest drivers.

1. Windows 7 has less issues with the emulator than Vista

2. Make sure you have the latest tools, get the RTM release from the website.

3. In the RTM release, the frame rate counters are displayed by default in a vertical bar on the left, you should monitor these to check for performance issues

Answer 5

If you can't see any obvious causes for the glitches in your code the first thing I would recommend is to actually test your app on a real device. Somethings - particularly animated objects -don't always look exactly the same when you run them on a device.

I thought I had a animation glitch in one of my apps but it only appears in the emulator. When I run on an actual device I don't see it.

Of course this doesn't help you if you can't get a phone to test it on yet, but before you potentially waste hours trying to debug a problem you might not have I would work on the rest of the app until such time as you can test the app on a real phone.

The same goes for anyone creating animations - don't waste time perfecting animations in the emulator. The timings will almost certainly be different on the actual device, so wait till you have one to test on.