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):

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

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.

8 Responses to “Theme aware panorama background in windows phone 7”

  1. [...] quick search found this article which uses the ViewModel to determine the background image to be used.  I don’t feel like [...]

  2. Omega Ra says:

    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.

  3. Håkan Reis says:


    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.

  4. Omega Ra says:

    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?

  5. [...] ホームイベント:第1回LightSwitch縛りの会(7/30) RSS feed Xian Guo Zhua Xia Yodao Google netvibes newsgator Bloglines iNezha © 2011 蒼の王座・裏口 Lightテーマ/Darkテーマ用にPanoramaの背景画像をコードで切り替える方法 8月 22nd, 2011 コメントする | トラックバックTheme aware panorama background in windows phone 7 | Jayway Team Blog – Sharing Experienceで紹介されている方法をざっくりと紹介。ViewModels/MainViewModel.csに以下のコードを追加。public bool LightThemeEnabled {     get     {         return (Visibility)Application.Current.Resources["PhoneLightThemeVisibility"] == Visibility.Visible;     } } 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;     } } 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));     } }MainPage.xamlを以下のように修正。<Grid x:Name="LayoutRoot"    Background="Transparent"    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}">        <!–Panorama control–>      <controls:Panorama Background="{Binding PanoramaBackgroundImage}" Title="My Application">Expression Blend対応の為に、SampleData/MainViewModelSampleData.xamlに以下のコードを追加。<local:MainViewModel.PanoramaBackgroundImage>     <ImageBrush ImageSource="/Assets/PanoramaBackground_dark.jpg" /> </local:MainViewModel.PanoramaBackgroundImage>これで、Darkテーマか、Lightテーマかによって背景画像を切り替えられるようになりました。タグ: Windows Phone 7 56個のWindows Phone Iconsが提供されています まだコメントはありません。 Cancel reply [...]

  6. [...] Theme aware panorama background in windows phone 7 [...]

  7. [...] is how things go. To work with image sets, the most straightforward solution , a variation from here, goes as [...]

  8. [...] This post was mentioned on Twitter by Lars Sjögreen, Larry King. Larry King said: Theme aware panorama background in windows phone 7 — Jayway Team Blog #SL #RIA [...]

Leave a Reply