Sunday, January 29, 2012

WP7 – Changing Visuals Based on Phone Theme with ThemeToStateBehavior

by vbandi via VBandi's blog on 1/29/2012 12:00:31 PM

The built-in resources in Windows Phone 7 help a lot with  automatically reflecting the selected theme of the phone. (See my earlier blog post: Being theme aware in Windows Phone 7 Silverlight apps). However, sometimes you want to be theme aware, but need more than the predefined resources. For example, you may want to have a generally blue background color, but want it to be a dark blue for the dark theme, and a light blue for the light theme. I created a little Behavior that allows you to do just this.

Here is how to use it:

• Create a new WP7 application (or use your existing one)
• Create a new Visual State Group with two Visual States in Expression Blend. Name them however you want, but I like to keep a naming convention for my states:

• Change the visuals as you like fit for both themes. For example, I changed the background of the LayoutRoot to a dark blue color for the ThemeStates_Dark Visual State, and a light blue color for the Themes_Light state. For fun, I have also changed the page name text to say “dark side” and “light side”

• To verify what the Light Theme looks like in Blend, you have to switch to the Device panel, and switch the Theme toggle to Light. This will change the values of the resources, and make the default text black.

• If you are happy with how your app looks in the different themes, just add the ThemeToStateBehavior (code at the bottom) to the root of your visual tree:

• Set the two themes for the dark and light theme in the Properties panel:

… And when you launch the app, you will see that it works as desired:

Based on the theme detection logic by Bart Wullems, here is the code for the behavior:

public class ThemeToStateBehavior : Behavior<Control>

{

    protected override void OnAttached()

    {

        base.OnAttached();

        var isLightTheme = (Visibility)Application.Current.Resources["PhoneLightThemeVisibility"] ==

                            Visibility.Visible;

        Dispatcher.BeginInvoke(() =>

                                VisualStateManager.GoToState(AssociatedObject, isLightTheme ? LightState : DarkState,

                                                            true));

    }

    [CustomPropertyValueEditor(CustomPropertyValueEditor.StateName)]

    public string LightState { get; set; }

    [CustomPropertyValueEditor(CustomPropertyValueEditor.StateName)]

    public string DarkState{ get; set; }

}

Enjoy!