Home > Metro, Windows 8 > Windows 8 Supporting Snapped view and other views

Windows 8 Supporting Snapped view and other views

Windows 8 New UI Style apps are always fullscreen. Except for some special cases, which i’ll discuss here.

If the screen resolution is at least 1366 px in width, then the so called "Snapped View" can be used. To bring a app into snapped view, the user can drag the app from the top to left or right side of the screen, where the app will then snap.

The rest of the screen can be used from another app, which can be either any app from the store or any classic desktop app, even the desktop itself.

This feature is meant for having two applications side by side. Example for this would be the weather app (red), which can be arranged next to the mail app.

 

image

The "Snapped" view is defined as 320px in width and the total height of the screen. It can be either placed on the right or on the left side.

The rest of the screen is then called "Filled" view, which is total width – 320 px

And then there is the default view, called "FullscreenLandscape" view and if the device supports rotation, then there is the last view, called  "FullscreenPortrait"

Windows 8 UI certification guidelines require, that at least "Snapped" view is supported, which does not mean, there must be functionality. It would be good enough to display the app logo, just it should look nice and professional.

But even better is, if the app can provide real value in this view. That’s pretty much depending on the app and its usage scenario, but here i’ll show how to switch between theses views.

The real switching is of course done by the user. The app must then act on the users decission and provide the best possible view of its data.

In this example i’ll just use a very primitive UI, which will show how to handle the different view switches.

For this i’ve used the minimalistic app from here and added 4 StackPanels, each for one of the 4 views:

image

All but the first StackPanel’s are hidden using Visibility="collapsed" attribute.

Each StackPanel does have a unique color and some text, so that it’s easy to see, which one is active. The idea is, that every view does have his own StackPanel and all other Stackpanels are hidden. This change of visibility can be easily done using the VisualStateManager feature, which allows to declaratively define the visibility and lots of other things depending on the view.

We could do this all by hand, but it’s rather annoying and much better to do this in Blend. So let’s open this page in Blend using right click on the MainPage.xaml and select "Open in Blend". This will show the page in Blend like this:

(Make sure, so switch the Window mode to animation using the menu
"Window->Workspaces->Animation"

image

At the left bottom, we can see all possible views.

Now lets define the visibility changes for each of this views:

Click on Filled, then open the Grid next to the right, so that this will be shown:

image

When Filled view is active, then we want to make two changes:
– Hide the StackPanelFullscreen

– Show the StackPanelFilled

For this we first select the StackPanelFullscreen, then go to the top right edge of Blend, type in vi to filter for all properties starting with vi and then change the Visibility to Collapsed:

image

Then we click on StackPanelFilled and set its visibility to visible.

Now we repeat this steps for the view "FullScreenPortrait" and then do the same for the other views.

After this, stop recording by clicking on the top left edge of Blend:

image

 

Now Save and go back to Visual Studio, let it reload the changed files and test the application. Now each view should display a different color and text.

image image imageimage

All the magic in Blend is saved into the <VuslaStateManager.VisualStateGroups> section in XAML, where it’s now easy to understand…?

It defines per state all property changes against the default UI definition above

image

Categories: Metro, Windows 8
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: