Mango Background Image Load Gotcha

One not often mentioned change in Windows Phone 7.1 Mango is background image loading.  By default images are now loaded and decoded on a background thread, rather than blocking the UI thread.

This is great for performance, however it does mean a potentially breaking change in Mango.

Ok, well not a breaking change, in that it won’t stop your app from working, but breaking in the sense that you might see undesirable behaviour when upgrading to Mango.

The big culprit here is page backgrounds.  If you are using an ImageBrush of an image for your page\panorama\pivot you might find that when the page loads there is a slight flicker or delay before the background image is displayed.  So your pages loads and then half a second later the background image appears.

This is happening because the background image is now being loaded and decoded on a background thread, meaning your page is actually loading quicker (because you aren’t waiting for the background image to be loaded, as you were before) – but before the background image has finished.

Fortunately the fix is easy.  We just need to tell Silverlight to delay displaying of the page until the background has finished loading.

<controls:panorama>
  <controls:panorama.background>
    <imagebrush imagesource="UriSource="Images\MainPanorama.jpg"/">
  </controls:panorama.background>
</controls:panorama>

In Mango you can now specify CreateOptions to tell sliverlight to wait will the image has loaded:

<controls:panorama>
  <controls:panorama.background>
    <imagebrush>
      <imagebrush.imagesource>
        <bitmapimage createoptions="DelayCreation" 
           urisource="Images\MainPanorama.jpg">
      </imagebrush.imagesource>
    </imagebrush>
  </controls:panorama.background>
</controls:panorama>

Unfortunately specifying DelayCreation does mimic the exact behaviour of WP7.0.  From my testing it does seem to introduce a few split seconds of a blank screen between pages when navigating in Mango which didn’t happen in 7.0.