W03: Page Orientation in Windows Phone 7

In this short tutorial I will show how to operate with Page Orientation in Windows Phone 7 applications.

Additional Information

• How to: Handle Orientation Changes on Windows Phone (MSDN)
• SupportedPageOrientation Enumeration

Page Orientation

Each XAML page in a Windows Phone 7 application is able to support three modes of page orientation: Portrait, Landscape(left) and Landscape(right). To specify a page orientation you have to use SupportedPageOrientation Enumeration. Bellow are three images showing each of page orientation modes.

• Portrait
  
  
  
• Landscape (left)
  
  
  
• Landscape (right)
  
  
  

To switch between orientations in emulator you can use the buttons shown on image bellow. Buttons appear when you hover your mouse over the emulator window.

Supported Page Orientations

You can specify supported Page Orientations for each page in XAML markup or programmatically (in code). To enter page orientations in XAML you have to modify the “SupportedOrientations” and, probably, “Orientation” attribute in phone:PhoneApplicationPage element (check image bellow). SupportedOrientations uses SupportedPageOrientation enumeration and Orientation is a default Orientation for the page. For example if your application is going to use Landscape as SupportedPageOrientation then make sure the Orientation attribute is set to Landscape also otherwise the page will look badly in emulator and phone.

To specify page orientations manually in code you need to add one of the following lines to your page code (for example to page constructor)

// for portait only orientation
SupportedOrientations = SupportedPageOrientation.Portrait;
 // for landscape only orientation
SupportedOrientations = SupportedPageOrientation.Landscape;
// for both orientations
SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;

Page Orientations change event

As developer, you have an opportunity to override the page orientation change event to add some extra functionality to it (for example to change size of some page elements). To do so you have to override OnOrientationChanged method:

protected override void OnOrientationChanged(OrientationChangedEventArgs e)
{
    base.OnOrientationChanged(e);

    // add some extra functionality here
}