Zooming

20120212-1

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!

Getting a new designer into Metro is always a challenge. They ask me to show them really good Metro implementations in WP7 apps to learn from. So, I turned to the wisdom of my Twitter followers, and asked them:

“What Windows Phone 7 apps should I show an aspiring designer who wants to see examples of “Metro done right”?

I received a dozen or so answers – so here is what my tweeps recommended, in no particular order:

Birdsong

recommended by @chton

4th & Mayor

recommended by @chton, @ailon, @emalamisura, @Mark_Monster, @byron_miller

Official FourSquare app

recommended by @ailon

MetroTube

recommended by @lukencode, @jderde, @BinaerJongleur, @weemundo, @byron_miller. MetroTube is not available any more.

1800PocketPC

recommended by @1800PocketPC

Spotify

recommended by @jderde

USGA Golf app concept

recommended by @Depechie

AppFlow

recommended by @BinaerJongleur, @weemundo

Mehdoh

recommended by @BinaerJongleur

WP7 OS apps

Such as People Hub, Office Hub, etc. Recommended by @nikovrdoljak

Facebook

recommended by @ramontrotman

I’m a WP7

recommended by @nikovrdoljak, @byron_miller

Cocktail Flow

recommended by @byron_miller, @TheRomit, @peSHIr

Space Weather

recommended by @byron_miller

Yelp

recommended by @byron_miller

NextGen Reader

recommended by @gbegerow

Amazon Kindle

recommended by @gbegerow

IMDB

recommended by @vbandi

Do you have any other recommendations? Let me know in the comments, and I will update the post.

20111129-1