Designing for Multiple Orientations
       by kirupa  |  14 July 2010

Unlike a typical desktop or laptop, applications on your phone can be designed to work well when viewed in either portrait orientation or in landscape orientation. I emphasize "can be" because you do not have to make your application look nice across both orientations. You can just design for one.

For example, let's say you only support the portrait orientation. In this case, your application would look like this by default when the phone/emulator is viewed in portrait mode:

[ default, portrait orientation ]

When your rotate your phone/emulator into landscape, because you only support the portrait orientation, here is what your application will look like:

[ look Ma, no rotation! ]

Notice that the text and everything doesn't rotate even though the actual phone/emulator did.

Of course, you may not always want to restrict your application to just one orientation though. You may want your application to display correctly in both orientations if the user decides to rotate the phone. In that case, here is what your application would look like if the landscape orientation is supported:

[ the content is rotated ]

Notice this time your text is appropriately rotated to display everything correctly even though you rotated it. Epic win!

Designing an application that looks well across multiple orientations requires some planning and experimentation. In this short tutorial, you will learn how to use Expression Blend to make it a little easier to design and preview orientation aware applications!

Getting Started
Make sure you have what you need for getting started with Windows Phone development and launch Expression Blend. Simply create a new Windows Phone project. We aren't going to do anything more to your application.

The only thing you do need to do is that your Device panel is displayed:

[ behold the Device panel in all its glory ]

If you do not see the panel displayed, go to Window | Device to make sure this panel is displayed.

Previewing Multiple Orientations
Your device panel has a section labeled Orientation with two icons representing Portrait and Landscape:

[ the Orientation property ]

By default, you will be designing in the Portrait orientation and it will be selected by default. To change your orientation, click on the Landscape button. After you change the orientation, you will find that your artboard and phone chrome adjust accordingly to allow you to design and preview what your application will look like in the new orientation:

[ the phone chrome on the artboard rotates ]

You can quickly switch between both orientations by toggling between the Portrait and Landscape buttons in your Device panel.

Actually Supporting Multiple Orientations
By default, each Phone Application page you create is designed to only work in portrait orientation. Clicking on the Portrait and Landscape buttons in the Device panel only provides you with a design-time preview of what your application looks like inside Expression Blend.

To actually have your running application support multiple orientations, you will need to explicitly tell each page in your application to support multiple orientations. There is an easy way and a not-so-easy way to do this.

Easy Way to Support Multiple Orientations
From the first moment you change orientations, your Device panel will display a small blue information icon next to the Portrait and Landscape buttons:

[ the mysterious information button! ]

This icon appears because you are currently in an orientation that isn't supported by your device/emulator at runtime. As the tooltip says when you hover this icon, simply click on it to enable both orientations on your page. Once you click it, this icon will no longer appear.

Not-So-Easy Way
If you want to manually set which orientations are supported without clicking on the icon, you have a slightly more complicated path ahead of you. I really do mean it when I mention the word slightly!

Select your PhoneApplicationPage node from the object tree (Objects and Timeline panel), look in the Common Properties category in your Properties Inspector, and find the SupportedOrientations property:

[ the SupportedOrientations property ]

By default, this property will be set to Portrait. Click on the drop-down and select the appropriate orientation you want to support at runtime:

[ select the orientation(s) you wish to support at runtime ]

The values you can choose from are Portrait, Landscape, and PortraitOrLandscaope (aka both).

In case you were curious...
Clicking on the information button in the Device panel simply sets the SupportedOrientations to PortraitOrLandscape for you without you having to figure that out yourself.

Conclusion
While most of your applications will be designed for one orientation or the other, you may find yourself wanting to design a few pages to work across both. At the most basic level, changing the orientation results in the available space for your application changing.

When you preview an orientation in Expression Blend, we simply adjust the available space to simulate what your application will look like at runtime. In a future tutorial, we can look at more advanced scenarios where rotating the device/emulator allows your application to do something more advanced than just resizing to take into account the change in space.

Need Help?

If you have questions, need some assistance on this topic, or just want to chat - please drop by our friendly forums and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi about | facebook | twitter