Screen orientation on Windows Phone 7

DZone 's Guide to

Screen orientation on Windows Phone 7

· Mobile Zone ·
Free Resource

As many modern smartphone devices, Windows Phone 7 supports screen orientation changes. With the help of the Windows Phone 7 SDK, it is possible to take advantage of these capabilities and customize the application behavior based on the current orientation state.

General Information

A Windows Phone 7 device has two types of screen orientation – portrait and landscape. And although there are several types of above mentioned orientations (depending on the inclination direction - up, down, letf or right), the basic looks for the two base orientation types are the following:

Screen orientation can be controlled from the XAML markup for a specific page, and it can vary from page to page in your application. For example, you might want to restrict a settings page to be portrait-only, but at the same time, the main page might support both landscape and portrait views for convenience purposes .

Screen orientation in your application

In your XAML markup, you can set two properties for a page: SupportedOrientations and Orientation.

SupportedOrientations defines the types of screen orientation that the page supports and is limited to the SupportedPageOrientation enum, that defines three possible types: Portrait, Landscape and PortraitOrLandscape. The last one implies that the page can be viewed both in portrait and landscape modes.

The same can be done in code-behind, by directly invoking the SupportedOrientations property:

On the other side, the Orientation property defines the current page orientation. Unlike SupportedOrientations, it cannot be modified at runtime. That being said, SupportedOrientations is superior to Orientations, therefore if at runtime the supported orientation is changed, while the page orientation is of a different type, the actual orientation will become the one set by SupportedOrientation. You must be very careful when modifying this property while the application is running.

To track the orientation changes, there is the OrientationChanged event handler. It is also tied to the page you are working with, so you can create it from this (current page class):

this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged); 

Then, simply put your code inside the actual handler:

void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
// Your code here

This event handler might be very useful if you would like to re-arrange some controls or perform specific animations when the device is rotated to change the orientation.

By default, page contents are placed inside a Grid that is automatically resized based on orientation settings, which is fine until the content fits on the page while in one orientation mode and doesn’t when switched to another. Here is a specific example:

As you can see here, the contents fit perfectly fine while the device is in portrait mode. If the user decides to turn it, and the application supports landscape mode, the last button becomes cut.

At this point, the user can’t reach that control (which isn’t necessary a button). The solution for this problem would be placing the page contents (the part that should be scrolled through) inside a ScrollViewer, which basically creates a scrollable area.

You can either wrap the entire page contents and make it scrollable or create specific scrollable areas. In the screenshot below, only the button area is scrollable, while the application and page titles are visible.

NOTE: ScrollViewer allows the Content property to only be set once; therefore you will have to create a separate panel inside it if you would like to host multiple controls.

Although the scrolling works, the user might not know how large the actual page is. To avoid this, both horizontal and vertical scrollbars can be placed by assigning the VerticalScrollBarVisibility and HorizontalScrollBarVisibility properties for the ScrollViewer. The recommended default value for these properties is Auto, so that the scrollbars are only displayed when the scrolling process is started by the user.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}