For the Windows Phone app that I’ve been working on recently I want to make sure that it has good support for both the light and dark themes on Windows Phone. This is pretty easy to achieve in most places by binding styles to the built-in resources but I found myself needing to change the background image of a panorama control.
A quick search found this article which uses the ViewModel to determine the background image to be used. I don’t feel like this is the right place to implement this as it is really something that should be accomplished through XAML along with the rest of the UI. What I decided to do was extend the Panorama control with my own ThemeAwarePanorama control.
First I set up a basic UIHelper class to help me determine if the light theme is active:
Next I added a new class to my project called ThemeAwarePanorama:
All that was left then was to create this control in my XAML:
And now my background image will switch based on my phone’s theme. Better yet is that this also works in Expression Blend so I can easily toggle the theme within it and preview the styles without needing to start up the emulator.