Know About WP7 Page Orientation and Supported Orientations

The root class of the Windows Phone 7 page includes two attributes called “Orientation” and “SupportedOrientations”. Those are actually enum values and provides you option to set the orientation of your page programmatically.

Today in this post we will describe about it in depth. If you are new to Windows Phone 7 programming, you will find this tip handy to understand about the page orientation on Phone page. Read to know more about this.

What is Orientation and SupportedOrientations?

These are two different enum type attributes set to Page level of Windows Phone 7. Orientation defines the current orientation of the page and SupportedOrientation defines the orientations that could be supported by your page. For example, in your application you may chose not to give the user permission to change the orientation of the page and you want it to open only in Portrait or Landscape mode. You can easily do this by these attributes.

namespace Microsoft.Phone.Controls

{

    // Summary:

    //     An enumeration defining the orientations that may be supported by an application.

    public enum SupportedPageOrientation

    {

        // Summary:

        //     Portrait orientation.

        Portrait = 1,

        //

        // Summary:

        //     Landscape orientation. Landscape supports both left and right views but there

        //     is no way programmatically to specify one or the other.

        Landscape = 2,

        //

        // Summary:

        //     Landscape or portrait orientation.

        PortraitOrLandscape = 3,

    }

}

SupportedOrientations is an enumeration value which defines the orientations supported by your application page. It is available under Microsoft.Phone.Controls namespace and consists of three enum values named “Portrait”, “Landscape”, “PortraitOrLandscape”. If you specify the supported orientation value as “Portrait”, the user will not be able to change the layout to “Landscape” mode. Similarly, setting the SupportedOrientations to “Landscape” will disable the Portrait orientation.

namespace Microsoft.Phone.Controls

{

    // Summary:

    //     An enumeration defining the possible orientations of a page.

    public enum PageOrientation

    {

        // Summary:

        //     No orientation is specified.

        None = 0,

        //

        // Summary:

        //     Portrait orientation.

        Portrait = 1,

        //

        // Summary:

        //     Landscape orientation.

        Landscape = 2,

        //

        // Summary:

        //     Portrait orientation.

        PortraitUp = 5,

        //

        // Summary:

        //     Portrait orientation. This orientation is never used.

        PortraitDown = 9,

        //

        // Summary:

        //     Landscape orientation with the top of the page rotated to the left.

        LandscapeLeft = 18,

        //

        // Summary:

        //     Landscape orientation with the top of the page rotated to the right.

        LandscapeRight = 34,

    }

}

Similarly, PageOrientation is also available under Microsoft.Phone.Controls namespace with the above enum values. Read the comments associated with them to understand about each enum values actual operation.

Playing with the Code

To do the demonstration, we need to modify the MainPage.xaml first. We will add three MenuItems in the Application Bar called Portrait, Landscape and PortraitOrLandscape. On click of menu item, we will set the proper page orientation and supported orientations using a custom DependencyProperty called “PageOrientation”.

Find here with the XAML code, that we are going to use in this tutorial:

<phone:PhoneApplicationPage.ApplicationBar>

    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

        <shell:ApplicationBar.MenuItems>

            <shell:ApplicationBarMenuItem Text="Portrait" 

                                          Click="OnOrientationChanged"/>

            <shell:ApplicationBarMenuItem Text="Landscape"

                                          Click="OnOrientationChanged"/>

            <shell:ApplicationBarMenuItem Text="PortraitOrLandscape"

                                          Click="OnOrientationChanged"/>

        </shell:ApplicationBar.MenuItems>

    </shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

The code implementation for the click event will look as below, where we will set the proper orientation of the page and supportive orientations based on the selected menu item text:

private void OnOrientationChanged(object sender, EventArgs e)

{

    ApplicationBarMenuItem applicationBarMenuItem = sender as ApplicationBarMenuItem;

    switch (applicationBarMenuItem.Text)

    {

        case "Landscape":

            SupportedOrientations = SupportedPageOrientation.Landscape;

            PageOrientation = SupportedPageOrientation.Landscape;

            break;

        case "PortraitOrLandscape":

            SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;

            PageOrientation = SupportedPageOrientation.PortraitOrLandscape;

            break;

        case "Portrait":

        default:

            SupportedOrientations = SupportedPageOrientation.Portrait;

            PageOrientation = SupportedPageOrientation.Portrait;

            break;

    }

}

Demonstration

Let’s see it in action now. Build the project and run it. This will launch the application in Windows Phone 7 emulator. It will open it in Portrait mode by default (as per our code).

The first image mentioned here shows the default portrait orientation when the phone is in portrait mode. When you rotate your phone to landscape orientation, this will not change the layout accordingly. Because, the supported orientations type is still “Portrait”.

Click the Global Application bar. This will open the application bar in the UI as shown below:

Select proper menu item to see them in action. Let’s click on the “Landscape” mode. You will now see that the page will change it’s orientation in Landscape mode though the phone itself is in Portrait mode. Rotate the phone in Landscape mode, you will notice that the page will still remain in Landscape orientation. This is because, we are setting both the page orientation and supported orientations to “Landscape” mode.

Let’s do another demonstration. Click the application bar and chose “PortraitOrLandscape” this time from the menu item. By default when the phone is in Portrait mode, the page orientation will be Portrait only but if you rotate the Phone layout to Landscape, this will automatically change the page orientation to “Landscape” based on the current page orientation set to it.

Hope, this post was helpful for you to understand more about page orientation and supported orientations of Windows Phone 7 application. Let me know, if you have any queries on this topic. I will try to help you out. Follow my blog to stay tuned on latest articles, news and tips on various topics like Silverlight, Windows Phone 7, LightSwitch. Happy Coding.