Theme aware panorama background in windows phone 7

I like the thought you have to put in to a Windows Phone 7 application, to make it work in both dark and light themes together with the accent colors. But at the same time it creates quite a few challenges. One of those is to have a panorama background and title graphics that reacts to your default settings.

The trick is to have the view model handle what graphics should be displayed and make it sensitive to theme changes. The first I did was to use the them detection method proposed by An Insomniac Geek This looks like this in my version (as I place it in the base class for my views):

public bool LightThemeEnabled { get { return (Visibility)Application.Current.Resources["PhoneLightThemeVisibility"] == Visibility.Visible; } }

Next is to fix the properties for the ViewModel that is attached to the view like this:

public ImageBrush PanoramaBackgroundImage { get { var url = LightThemeEnabled ? "/Assets/PanoramaBackground_light.jpg" : "/Assets/PanoramaBackground_dark.jpg"; var brush = new ImageBrush { ImageSource = new BitmapImage(new Uri(url, UriKind.RelativeOrAbsolute)) }; return brush; } }

Finally fix the bindings in the view:

...

For some extra fun don’t forget to set the property in the sample date for blendability. It’s always better to support this for blend design time as well.


    
      
  

I use this method whenever I need graphics in my view that should be theme aware, for example an image for titles and headers.

public BitmapImage PageTitleImage
{
  get
  {
    var url = LightThemeEnabled ?
              "/Assets/logo_on_light.png" :
              "/Assets/logo_on_dark.png";

    return new BitmapImage(new Uri(url, UriKind.RelativeOrAbsolute));
  }
}

This Post Has 8 Comments

  1. Omega Ra

    I am trying to make my apps background change with light/dark. Where do these snippets of code go? App.Xaml.cs? Mainpage.xaml.cs?

  2. Håkan Reis

    @Omega

    I use the MVVM pattern for my applications.

    Most code go into the ViewModel as properties. That way I can just bind to it in the View (XAML). None of it should be in the code behind page.

  3. Omega Ra

    okay, so it goes in the XAML. bear with me I have next to no coding knowledge, learning as I go. Not sure where the ViewModel is…ugh I need to read a book lol.

Leave a Reply