This post is Day #4 in a series called the 31 Days of Windows Phone.

Yesterday, we talked about one of the dedicated hardware buttons on a Windows Phone, the Back button.  Today, we’re going to focus on another aspect of the hardware: Device Orientation.

Portrait vs. Landscape

In case the terms aren’t obvious, Portrait is a vertical orientation of the device, and Landscape is a horizontal orientation.  Each are available to any Windows Phone 7 application, but by default, Silverlight applications start in Portrait, where XNA applications start in Landscape.  (Games generally work better on a wider screen.)  For this post, we’re going to focus on Silverlight applications, and how we work with the orientation change that will inevitably happen as our users use our application.

Your Default Project Will Be “Portrait-Only”

If you take a look at the header information on your MainPage.xaml file, you’ll see two properties:

SupportedOrientations="Portrait" Orientation="Portrait"

Think of SupportedOrientations as the list of possibilities you’re willing to support in your application.  You can set your SupportedOrientations to one of three values:

• Portrait (the default)
• Landscape
• PortraitOrLandscape

The Orientation value is what you want your application to use when it starts.  It has a larger list of values, but keep in mind that in order to start in a Landscape mode, you need to have your SupportedOrientations include Landscape as an option.  Here’s your list of starting Orientation values:

• Landscape
• LandscapeLeft (tip the phone left)
• LandscapeRight (tip the phone right)
• Portrait
• PortraitDown (normal vertical position)
• PortraitUp (tip the phone upside-down)

You can see from the above list that not only can you specify whether to start with Landscape or Portrait, but you can also specify which direction those orientations should align.  This allows you to start your application from any screen orientation you prefer.

Changing Your Orientation

There are two ways to get your orientation to change.  The first is to just set your SupportedOrientation to “PortraitOrLandscape” and let the operating system do it for you.  In many cases, this isn’t recommended, because much of your application won’t fit on the screen anymore.  The second way is to do it via code.  That’s the example we’re going to show here.

Let’s start with a simple interface that takes up the whole vertically-oriented screen.  Here’s an example:

You can see that in the Landscape orientation of this application, many of our buttons are off the screen.  Not exactly an optimal user experience.  An easy way to handle this would be to just drop the title.  I’m pretty sure that our user can figure out that this is a calculator, so perhaps when they’re in Landscape mode, we just turn that title off.  We could also rearrange our buttons, and if that makes more sense for your application, then do it!  The purpose of this post is to show you HOW to change your application, not to dictate specifics on WHAT you should change.  Here’s the code I am using to make the title bar disappear and reappear (this is the entire contents of my MainPage.xaml.cs file):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Day4_DeviceOrientation
{
	public partial class MainPage : PhoneApplicationPage
	{
		// Constructor
		public MainPage()
		{
			InitializeComponent();
			this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged);
		}

		void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
		{
			if ((e.Orientation == PageOrientation.LandscapeRight)||(e.Orientation == PageOrientation.LandscapeLeft))
			{
				TitlePanel.Visibility = Visibility.Collapsed;
			}
			else if ((e.Orientation == PageOrientation.PortraitDown) || (e.Orientation == PageOrientation.PortraitUp))
			{
				TitlePanel.Visibility = Visibility.Visible;
			}
		}
	}
}

Because I only care that my application is Landscape or Portrait (and not one of the more specific orientations), I am checking for both states, and adjusting my interface accordingly.  You could certainly break out the individual cases seperately, and make your interface look differently for each.

You’ll notice that I created an event handler for the OrientationChanged event.  This is certainly the simplest way to recognize when this happens, but you could always use the Accelerometer if you prefer.  We’ll be covering more on the Accelerometer on Day #11.  Here’s a look at the final example with the new code in place:

Download the Code

This is not a working calculator example, but it might be a good starter project if you’d like to give it a try.  Feel free to download this project, and add the missing functionality.