Windows Phone - Handling Light and Dark Theme Changes

by Kevin November 14, 2011 21:29

I love how the icons in the AppBar magically know how to switch from light to dark to match the currently selected OS theme, but I hate how they don't seem as "smart" when I use them elsewhere in my app.

Well, after doing it the hard way in UCF News (switching between header templates in the code behind), I stumbled across a really simple way in someone's response to a question on the subject. I couldn't believe it was that easy. I like to tell myself that this method only became available with the OS 7.5 (Mango) release, so it isn't entirely my fault that I missed it. Smile

Here is a code snippet to demonstrate. Just put both versions of the graphic, light and dark, in the same block, set the Visibilty attribute as shown, and let the OS do the rest.

<StackPanel>
    <!-- LightTheme -->
    <Image Source="/Images/AppBarIcons/light/appbar.new.rest.png"
        Visibility="{StaticResource PhoneLightThemeVisibility}" />
    <!-- DarkTheme -->
    <Image Source="/Images/AppBarIcons/dark/appbar.new.rest.png"
        Visibility="{StaticResource PhoneDarkThemeVisibility}" />
</StackPanel>

That's all it takes. I'm sure the same trick can be applied for other resources, but I haven't had to try it yet. Hopefully this post will save you a little time on your next app.

 

About the author

me

I work on .NET development by day; Windows PC & Windows Phone development by night.

Month List