Walkthrough: Implementing SnapView in your Windows 8 App

There are four supported orientations in Windows 8. There is Full View, Snap View, Fill View and Portrait View. Each is important in the overall strategy of Windows 8. In order to get your app into the Windows Store, you must support the Full, Snap and Fill view. And to support them, XAML uses ViewStates that easily execute custom animations and show your tailored content.

What view?

The different views in Windows are something developers have to deal with but are fundamentally one of Windows 8’s core differentiators in the marketplace. Since a Windows 8 is only active when it is visible it means that only one app can run at a time – similar to the IPad. But because of SnapView, Windows 8 allows users to view more than one app at a time, even if the second app is in a narrow format. As a result, the user can enjoy more than one app at a time, increasing the opportunity for productivity.

The image above shows the Full, Snap, and Fill View on a slate device, respectively. It is an important note to say that Snap is not a touch-only mechanism. I run on a desktop that has no touch input. I use snap. It allows me to have more than one Windows 8 app up at one time. It also allows me to have a desktop app and a Windows 8 app running at the same time. It’s nice.

Some detail

The core resolution of Windows 8 is 1366 x 768. This is a beautiful 16:9 resolution just like your HD television at home. It makes Windows 8 an ideal platform for consuming  like television and movies. Snapping, however, splits that resolution. The FillView becomes a traditional 1024 x 768 (a resolution most developers are accustom to). The SnapView becomes 320 x 768 (a resolution mysteriously similar to Windows Phone). The three resolutions reveal themselves to be thoughtfully designed and quite useful to in app design efforts.

Store certification requirements

Here’s how it reads:

3.6 Your app must use the mechanisms provided by the system for those features that have them

Your app must support a snapped layout. In landscape orientation, your app’s functions must be fully accessible when the app’s display size is 1024 x 768. Your app must remain functional when the customer snaps and unsnaps the app.

As a personal aside, it is interesting to consider what it means to support the SnapView. If you look at Solitaire, it reorients the cards to a vertical orientation when snapped. If you look at the Windows Store, it shows only a static logo when snapped. Both support SnapView. What does that mean your app needs to do to support SnapView? Well, it depends.

Supporting SnapView in XAML

XAML supports SnapView by leveraging the ViewStates. In the video below, I’ll show you the basic implementation on supporting every Windows 8 orientation view.

And, there you go! If I can do it with a stuffy nose, you can support Snap, too!

Best of luck!