Mobile Corner

Windows Phone 7 Orientation Primer

Nick Randolph walks through how to define, change and work with orientation within your Windows Phone application.

• By Nick Randolph
• 08/09/2011

Most Windows Phone applications are designed and developed with portrait mode in mind. However, there are times when it makes sense for the application to be used in landscape mode: for example, video playback or browsing images. In addition, most hardware keyboards slide out sideways, which is only useful if the applications can operate in landscape mode. In this post we'll discuss how you can support either -- or both -- portrait and landscape orientations within your application.

The first thing to understand about orientation is that it's set at a page level. This means you can specify within each page what orientations it supports via the SupportedOrientations property. For example, the default page definition starts with a PhoneApplicationPage element, where the SupportedOrientations attribute is set to Portrait.

<phone:PhoneApplicationPage 
    x:Class="OrientationChangedSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" >

The other values for the SupportedOrientations property are Landscape and PortraitOrLandscape. As you would assume, specifying Portrait forces the page to be displayed in Portait regardless of how the user orientates the device. Landscape forces Landscape display, while PortaitOrLandscape allows the page to automatically reorient the page depending on how the user holds the device.

If you do use the PortaitOrLandscape value, you probably want to be able to detect when the application switches orientation. This is done by intercepting the OrientationChanged event on the page.

public MainPage() {
    InitializeComponent();

   OrientationChanged += PageOrientationChanged;
}

private void PageOrientationChanged(object sender, OrientationChangedEventArgs e) {
    if ((e.Orientation & PageOrientation.Landscape) > 0)
    {
        VisualStateManager.GoToState(this, "Landscape",true);
    }
    else
    {
        VisualStateManager.GoToState(this, "Portrait", true);
    }
}

In reality, the OrientationChanged event gets raised even if you specify Landscape as the SupportedOrientations. This is because at startup the page is initially in Portrait, but is then immediately reoriented to Landscape. In this case the OrientationChanged event will only be raised once.

The previous code demonstrates that we do a binary "AND" between the new page orientation, given by the Orientation property on the eventargs, and the PageOrientation.Landscape enumeration value. The PageOrientation actually has the following seven discrete values (with their corresponding binary and integer values):

Of these seven values, a Windows Phone application will only ever be in one of three orientations: PortraitUp (default orientation), LandscapeLeft or LandscapeRight. PortraitDown is there for completion, but is never used within an application as it would result in the display being upside-down in certain cases. Portait and Landscape are there so that you can easily detect which orientation the device is in. In the PageOrientationChanged method in the previous code snippet, the binary "AND" between the Orientation and the PageOrientation.Landscape enumeration value will return a positive number for both LandscapeLeft and LandscapeRight.

You might be wondering why the PageOrientationChanged method calls VisualStateManager.GoToState, since the page will automatically reorient when the user changes the orientation (assuming SupportedOrientations is set to PortraitOrLandscape). Whilst the page does reorient, and controls will automatically resize based on their alignment and margin properties, in some cases you may wish to modify the layout for each orientation. This is most effectively done using VisualStates (which were covered in the previous post).

[Click on image for larger view.]

An important consideration when working with the Device window in Expression Blend: Do not modify any property on in window whilst in state recording mode. This can cause unexpected issues, particularly working with orientation.