Page Orientation In Windows Phone

Orientation:

• Windows Phone supports portrait and landscape screen orientations.
• Types of Orientations
• Portrait
• Landscape Left
• Landscape Right

Portrait :

• Portrait is a vertical orientation of the device.
• By default, silverlight applications runs portrait orientation.
• In Portrait orientation, the page oriented vertically so that the height of the page is greater than its width.

Landscape :

• Landscape is a horizontal orientation of the device.
• By default, XNA application runs landscape orientation.
• In Landscape orientation, the page oriented horizontally so that width of the page is greater than its height.

• There is no way to specify that a page supports only landscape left or only landscape right. we have the possibility to support both or no landscape mode.

• We can simply rotate device to initiate a change orientation to another.

In emulator, we can switch the screen orientation by clicking the buttons in the emulator Tool bar.

• The orientation buttons have rectangles with arrows that indicates the orientation change.

                                             

• We can specify the supported orientation on page level.

• we can support different orientation on a page level, the value can be specified in code or as an attribute of the PhoneApplicationPage in XAML.

SupportedOrientations=”Portrait”

• Possible values of SupportedOrientations property
• Portrait
• Landscape
• PortraitOrLandscape

• We can specify orientations manually in code.

SupportedOrientations =SupportedOrientations.Portrait; SupportedOrientations=SupportedOrientations.Landscape; SupportedOrientations=SupportedOrientations.PortraitOrLandscape;

• Page Orientation change event:
• In this event, we can override functionality or add more functionality the page orientation.

eg: Change the size of the page elements.

Syntax:

protected override void OnOrientationChanged(OrientationChangedEventArgs e)

{

//write code here for override or add functionality

base.OnOrientationChanged(e);

}

Scrolling Technique:

• Avoid fixed sizes of elements, set the element's width using “*” (asterisk) or “AUTO”, these are handles elements sizes in orientation (horizontal).
• Add Scroll viewers for containers like the stackpanel, or use elements that come with built-in scrolling capabilities, this is handles vertical size.
• The scrolling technique uses a StackPanel or Grid layout controls with in Scrollviewer control.
• Scrollviewer control enables the scroll, If StackPanel or Grid  control not fit in page.

• The grid layout technique positions UI elements in a Grid. When an orientation change occurs, programmatically change the elements positions.
• Grid layout technique, perform following steps
• Change the SupportedOrientations property of the page to PortraitOrLandscape.
• Use Grid for the content panel.
• Create an OrientationChanged event handler and add code to reposition elements in the Grid.

Demo:

Create an application for Orientation Demo

Create a new project by selecting File menu > New Project or short-cut keys Ctrl+Shift+N.

Choose Windows Phone Template, and change project name as "Orientation Demo"

MainPage.xaml:

• By default page supported orientation is Portrait.

SupportedOrientations="Portrait"

• I have changed SupportedOrientation Portrait to PortraitOrLandscape, Then only page supported orientations.

SupportedOrientations="PortraitOrLandscape

• I have created three rows for Content Panel Grid then I have added three Images each one for a row in MainPage.xaml.
• Right click on project and create folder with name Images.
• Add images to Images folder by right click on Images folder choose add-> add existing items.

This demo goal is displays images vertically in Portrait orientation, and displays horizontally in Landscape orientation.

• Add following code in MainPage.xaml

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <RowDefinition Height="AUTO"/> <RowDefinition Height="AUTO"/> <RowDefinition Height="AUTO"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="AUTO"/> <ColumnDefinition Width="AUTO"/> <ColumnDefinition Width="AUTO"/> </Grid.ColumnDefinitions> <Image Name="image1" Source="/Images/1.png" Height="200"/> <Image Name="image2" Source="/Images/2.png" Height="200" Grid.Row="1"/> <Image Name="image3" Source="/Images/3.png" Height="200" Grid.Row="2"/> </Grid>

• After added images into MainPage.xaml , its look like following image.
• We can change controls positions programmatically in a GRID, when orientation changes occurs.
• Create OrientationChanged event handler in a PAGE. When device or emulator changes orientation OrientationChanged event handler will be fired.
• In Landscape, I have displaying images in a single row and three columns.

Add following code in OrientaionChanged event handler.

private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
            if ((e.Orientation & PageOrientation.Portrait) == PageOrientation.Portrait)
            {
                Grid.SetRow(image1, 0);
                Grid.SetRow(image2, 1);
                Grid.SetRow(image3, 2);
                Grid.SetColumn(image1, 0);
                Grid.SetColumn(image3, 0);
                Grid.SetColumn(image2, 0);
            }
            else
            {
                Grid.SetRow(image1, 0);
                Grid.SetRow(image2, 0);
                Grid.SetRow(image3, 0);

                Grid.SetColumn(image1, 0);
                Grid.SetColumn(image2, 1);
                Grid.SetColumn(image3, 2);
            }

        }

Portrait

Landscape

Get source code for Orientation