Dotneteers.net
All for .net, .net for all!

WP7 – Changing Visuals Based on Phone Theme with ThemeToStateBehavior

VBandi's blog

Syndication

Subscribe

Generic Content

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:

image

  • 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”

image

image

  • 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.

image

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

image

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

image

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

imageimage

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!


Posted Jan 29 2012, 01:00 PM by vbandi

Comments

Dew Drop – January 29, 2012 (#1,253) | Alvin Ashcraft's Morning Dew wrote Dew Drop &ndash; January 29, 2012 (#1,253) | Alvin Ashcraft&#039;s Morning Dew
on Mon, Jan 30 2012 3:35

Pingback from  Dew Drop – January 29, 2012 (#1,253) | Alvin Ashcraft's Morning Dew

Community Blogs wrote Windows Dev News for January 29, 2012 - #0033
on Mon, Jan 30 2012 6:21

body { font-size: 11pt; font-family: 'Tahoma'; margin:0; padding:0; height:100%;} Windows Dev News for

WP7 ??? Changing Visuals Based on Phone Theme with ThemeToStateBehavior wrote WP7 ??? Changing Visuals Based on Phone Theme with ThemeToStateBehavior
on Mon, Jan 30 2012 13:01

Pingback from  WP7 ??? Changing Visuals Based on Phone Theme with ThemeToStateBehavior

#wp7dev in the last month | Windows Phone User Group wrote #wp7dev in the last month | Windows Phone User Group
on Tue, Jan 31 2012 15:07

Pingback from  #wp7dev in the last month | Windows Phone User Group

Sally wrote re: WP7 – Changing Visuals Based on Phone Theme with ThemeToStateBehavior
on Wed, Mar 14 2012 0:01

Jesse, thanks for ciinafylrg your position. however you did not clarify why microsoft is dropping the hat when it comes to silverlight. mix demos were disappointing to say the least and prior to the silverlight section towards the end   no one mentioned anything about silverlight   not even when joe was talking about the phone he never even hinted that silverlight is the tool that brings developer's work to life on the phone  he didnt have to, but it would have been reassuring. we dont think microsoft is committed to silverlight the way it was 1-2 years ago. while we understand time changes things and technology changes faster than time, microsoft never realized the potential of silverlight at all other than trying it out for the new phone. show us that you guys are not just committed but also that silverlight is still a first class citizen and will also be used as a platform to develop apps in future devices like tablets using windows and possibly also on xbox. show us that we can safely continue to invest in this technology for building great LoB apps