Handling different orientations and views with Windows Store Apps

Microsoft recently set the Guinness World Record for the maximum number of developers (2500+) coding for a single event at a common location (in my hometown, Bangalore) for over 18 hours. I was a part of it and it was a lot of fun! We even had an anthem for the event :)

If you haven’t started yet, and want to be a part of this huge developer opportunity, you may like to have a look at some learning material to get started!

Going over the many applications that the participants built, I found a common issue that they faced.

They found it difficult to handle the snapped view.

What is snapped view?

Normally, the Windows Store App would run in a full-screen mode, and this is one of the good things about it. Your app gets the entire screen!

However, there are times when you’d like to keep an eye on your email or chat with a friend while working on another app.

Snapped view is a neat way of keeping your Windows Store app in foreground while you are working on something else. I use it very often with the Windows Mail app or the Messaging app, and it’s been very helpful.

What was the problem the developers faced?

Well, they started with the File –> New –> Project and started with a Blank App, as their app wasn’t really showing large amounts of data and was mostly a single page app.

The Blank App template comes with an innocent looking MainPage.xaml, which happens to be the culprit. This page is a simple page or a “Blank page”. As a result, you’ll actually have to put in some work to handle the changes in the orientation or the different views.

The easiest solution is to replace your MainPage.xaml with a new “Basic Page”.

It’s gonna give you the following prompt if this is the first time you are adding a Basic Page to a Blank App.

Go ahead and say Yes! After all, in Visual Studio we trust! :)

It adds some files which does all the hard work for us.

The LayoutAwarePage.cs is the base class that the "Basic Page” derives from. The Basic Page also helps us with the Back button and a nice page title, all styles applied!

It must be pretty obvious by now why the “Layout Aware Page” is important :)

But to really have fun working with it, open the “Device Window” from the “Design” menu.

You should be able to see the Devices pane as shown below. The different views are presented along with the Portrait Orientation and as you switch between these, the design surface shows the results.

If you are from WPF/Silverlight background, you would know the concept of Visual States. This is what handles the different orientations at runtime. As soon as you switch between the different views or change orientation, the appropriate Visual State is entered. Earlier, we used to rely on Expression Blend to deal with Visual States. With VS 2012, you get this built in, which is always fun!

You can now check the “Enable state recording” checkbox and start manipulating the properties of the UI elements so that they look elegant in the different views.

Here, I’m only changing the font size of the “pageTitle” TextBlock when we enter the FullScreenLandscape mode to 72px instead of 56px.

You can do some really fancy UI stuff like having a completely different grid layout and toggling visibility when views are switched. You get the general idea, don’t you! :)

Thanks for reading and happy coding!

Amar

PS: You can follow me on twitter at “_amarnit”, where I share some quick tips/learnings at times!