Switching out the background image based on the Windows Phone theme

To pass certification you have to cater for the dark and light theme in Windows Phone. You should already be using MVVM, so this is quite an easy and a quick fix.

Here is an example of how to do this on your panorama view:

In the xaml for your panorama view, add a binding to the background property

<phone:Panorama Title="App Title" Background="{Binding Path=PanoramaBackgroundImage}" Name="MainPanorama">

Then in the viewmodel for your panorama view, add the property that you just wired up

public ImageBrush PanoramaBackgroundImage
        {
            get
            {
                if ((Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"] == Visibility.Visible)
                {
                    return new ImageBrush()
                        {
                            ImageSource =
                                new BitmapImage(new Uri("/Assets/background_dark.jpg", UriKind.Relative))
                        };
                }
                else
                {
                    return new ImageBrush()
                        {
                            ImageSource = new BitmapImage(new Uri("/Assets/background_light.jpg", UriKind.Relative))
                        };
                }
            }
        }

Couple of points to note:
1. The property is of ImageBrush type, this is how you pass an image via a binding.
2. The images are in my Assets folder, and the properties are set to "Content" and "Copy Always", thus you only have to set the UriKind to Relative.
3. If there is no reason to have your background images as a png, such as gradients or transparency, then convert them to jpg's. This saves a lot on file size, and thus app size, and overhead to load the images.

Comments