Home > Development, UX > WP to W8: View States using Visual State Manager

WP to W8: View States using Visual State Manager

This article is part of a series about my experience porting apps from Windows Phone to Windows 8. Official porting guidance can be found here and don’t forget to follow the Building Windows 8 blog and the Windows 8 App Developer blog for the latest information.

If you are currently working on a Windows 8 app that you’d like reviewed for possible early entry into the marketplace, please contact me.

 

In my last blog post I talked about using the Visual State Manager to deal with different screen resolutions and the new Snapped view. I thought it would be helpful to share an example of how to do it.

image

In the screenshot above we have a simple user interface for a music player. The left side shows album art and the right side shows the track list on top of the playback controls (Play, Pause, Stop, etc.). Notice that the screen is divided into three rows and two columns and notice that the rows are different heights. These will be important in a minute.

The playback buttons were created using the technique I described in my previous post. I copied AppBarButtonStyle and removed the label under the circle. Then I changed the Content property for each button to the character I needed for each “icon” (in Sego UI Symbol). Finally, the buttons were grouped into a horizontal StackPanel which allows me to organize and scale them as a group. Since the buttons are vector (font) based, I can make them extra large by selecting the containing StackPanel and setting it’s scale to 2.

image

With this layout we basically get ‘Filled’ view for free. The grid is a little more narrow so the track list isn’t as wide, and the album art shrinks just a little. But it still looks great so let’s focus on ‘Portrait’ mode next.

As I mentioned in the previous article, to properly work on View States in Blend right now you need to change both the Platform tab and the States tab. Let’s change to the ‘Portrait’ view (Platform tab) and to the ‘FullScreenPortrait’ state (States tab).

image image

Now let’s make the changes for Portrait:

  1. Select the AlbumArt image and change RowSpan to 0 and ColumnSpan to 2. Now the Album Art is at the top and is centered on the screen.
  2. Select the TrackList and change Column to 0 and ColumnSpan to 2. Now the track list is also centered on the screen.
  3. Select the PlaybackControls panel and change its Column to 0 and ColumnSpan to 2. Like the track list, the playback controls are now centered on the screen.

 

Save your work. It should look something like this:

image

Now it’s time to work on Snapped view. Lucky for us it’s a lot like Portrait view. In fact, we’ll do exactly the same steps we did with Portrait but we’ll add one more step at the end.

Switch to ‘Snapped’ view (Platform tab) and ‘Snapped’ state (States tab).

image  image

Now the changes for Snapped (same as Portrait):

  1. Select the AlbumArt image and change RowSpan to 0 and ColumnSpan to 2. Now the Album Art is at the top and is centered on the screen.
  2. Select the TrackList and change Column to 0 and ColumnSpan to 2. Now the track list is also centered on the screen.
  3. Select the PlaybackControls panel and change its Column to 0 and ColumnSpan to 2. Like the track list, the playback controls are now centered on the screen.

 

The album art scales nicely. The text looks larger because the list isn’t as wide. We might want to decrease the font size but I think it actually looks good so I left mine. The biggest offenders are the playback controls. They’re way too big for the space.

image

The cool thing about our buttons is that since they’re vector, we can scale them back down just the same way we scaled them up. Select the PlaybackControls stack panel and scale it back down to 1x.

image

Now we have a cool little snapped view for our music player.

image

Run the application and test it in portrait, landscape, filled and snapped views. Because the page inherits from LayoutAwarePage, the correct Visual State is loaded on each change and our UI works great. You can play around with changing other properties and you can even test more complex layouts by adding additional controls and showing and hiding them based on the view state. Pretty cool!

 

Download the Sample

The sample project includes both a ‘Starting’ point and a completed version. Note that the app isn’t a functional music player, it’s just a sample layout to help you get familiar with the Visual State Manager.

About these ads
Categories: Development, UX Tags: ,
  1. Cojan Ciprian
    November 4, 2012 at 7:09 am

    Hi, i’ve been trying to use your sample but visual studio had this error:

    Impossibile trovare il tipo o il nome dello spazio dei nomi ‘ApplicationViewStateChangedEventArgs'; probabilmente manca una direttiva using o un riferimento a un assembly E:\Windows8\Materiale\DeviceLayout\Completed\Common\LayoutAwarePage.cs 142 63 DeviceLayout

    I don’t understand what assembly is left.

    Thanks
    Ciprian

  2. March 13, 2013 at 5:33 pm

    Thanks for a great visual summary.

  1. April 22, 2012 at 10:58 pm
  2. April 22, 2012 at 11:15 pm
  3. April 24, 2012 at 7:08 am
  4. August 7, 2012 at 11:30 am
  5. August 29, 2012 at 11:02 am
  6. October 15, 2012 at 6:15 am
  7. April 22, 2013 at 4:32 pm

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: