Missing Background Image on Panorama Control breaks ContextMenu and Causes Performance Issues in Windows Phone Applications

Missing Background Image on Panorama Control breaks ContextMenu and Causes Performance Issues in Windows Phone Applications

Warning: If you are using a background image for a Panorama control in your application, make sure you get the path correct. Here’s why:

Today I was working on a relatively complex application that uses the Panorama control on the main page of the application. It also has a context menu on items in a couple of the panes with the panorama control. Up until this afternoon everything seemed to work fine. However, as we get close to finishing the project I decided to go through and clean up the images that were included in the project (if you’ve ever worked with a designer or spent a lot of time in Blend you’ll understand why I have to do this step!). Now in most cases your application will continue to work even if the path to your images are wrong – you just won’t see an image where you expect to. This can make it a little hard to ensure you haven’t broken anything as part of the clean up process.

After doing the clean up I did notice that I’d broken a couple of image paths but figured that I’d fixed most of them. I did however also notice that the application was performing really slowly, like it would take a second or so to add a character into a textbox. As I mentioned this is a relatively complex application so I thought that I must have broken some logic in the background causing a perf issue. What I didn’t realise was that the perf issue was related to my image clean up.

Figuring I’d come back to sort out the perf issue later (I’ve been focussed on getting one part of the app finished today so head was in a different place in the app dev cycle) it wasn’t until I noticed another bug that I had to stop what I was doing and address the issue (although at the time I figured it was unrelated). It turned out that none of the the context menus (from the Silverlight toolkit) were working. OMG I thought, what have I done now…. I even thought I’d ping Jeff and see whether he had any gems of wisdom.

One of my golden rules is that I always use source control. Whether it is a simple project I’m working on by myself, or a large project, I always check in my code and frequently. The context menus had been working so I then spent the next hour trawling back through the source control history until I got back to a working version. I then walked forward gradually trying to isolate the issue. Eventually it came down to a missing “/” in the path to the background image for the Panorama control…. really…. yes, really!!! If you get the background image path wrong you will:

– Cause MAJOR performance issues in your application as the panorama control will continually look for the background image (well I’m guessing that’s what it’s doing but either way it’s a major UI performance drain)

– Prevent any ContextMenus from working on that page of your application

– There are probably other controls that may not work well.

Disclaimer: You might be thinking “why didn’t he notice the missing background image”…. in most case you’d be right as the background is usually hard to miss. In this particular instance the background image is very very subtle, just enough to give some visual feedback when the user pans. It looks great but you actually don’t notice it missing unless you’re looking for it.

Bookmark for Mobile App Design Guidelines

Bookmark for Mobile App Design Guidelines

Windows Phone

Themes for Windows Phone
http://msdn.microsoft.com/en-us/library/ff769554(v=vs.92).aspx

User Experience Design Guidelines for Windows Phone
http://msdn.microsoft.com/en-us/library/hh202915(v=vs.92).aspx

 

Android

http://developer.android.com/design/index.html

 

iOS

iOS Human Interface Guidelines
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html