Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Handling Orientation in Windows Phone 7

DZone's Guide to

Handling Orientation in Windows Phone 7

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

Windows Phone 7 supports 2 orientations: Landscape and Portrait. The combination of these 2 orientations can lead to different combinations.

  1. None
  2. Portrait
  3. Lanscape
  4. PortraitUp
  5. PortraitDown
  6. LanscapeLeft
  7. Lanscape Right


The users can just rotate the Windows Phone to move from one orientation to another, and the application must provide the orientation support.

One can set the fixed orientation to Landscape, Portrait or both.  You can do this in the Windows Phone Application form by setting the page’s Supported Orientation in either XAML or code behind.

 private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
 {

            this.SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;

 }
<phone:PhoneApplicationPage
    x:Class="CookBook.MainPage"
    xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation">http://schemas.microsoft.com/winfx/2006/xaml/presentation</a>"
    xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml</a>"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008">http://schemas.microsoft.com/expression/blend/2008</a>"
    xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006">http://schemas.openxmlformats.org/markup-compatibility/2006</a>"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
     FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">

To detect the orientation changes in your form, you need to add en event handler OrientationCahnged to the PhoneApplicationPage.

 private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
 {
            MessageBox.Show(this.Orientation.ToString());
  }

You can also override the base class method OnOrientationChanged inside this event handler.

The screenshot above shows LandScapeRight as the Orientation .

This is retreived from the Enum PageOrientation that is defined inside the namespace Microsoft.Phone.Controls

   private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
   {

            PageOrientation orient = this.Orientation;

   }
    public enum PageOrientation
    {
        None = 0,
        Portrait = 1,
        Landscape = 2,     �
        PortraitUp = 5,
        PortraitDown = 9,
        LandscapeLeft = 18,
        LandscapeRight = 34,
    }

The values here might sound somewhat strange but when you convert the values in to binary, you might find it interesting ..

Sometimes it is better to put the controls inside the ScrollViewer so that when in the landscape mode, if the controls go beyond the form’s height, the user can scroll down to view the controls.

If you don't add the scrollba , you might see that the controls go beyond the form height and cannot be accessed.

You can find other approaches for handling the Page Orientation from the following websites



Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

Published at DZone with permission of Senthil Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}