Working With Screen Orientation in WP7

Introduction

In this article we are going to see about the Screen Orientations in Windows Phone 7 Development. As a Windows Phone 7 user we can see screen orientations are pretty simple just by titling the device and seeing the screen tilts as per the device, but as a developer when we see we have to handle much of the orientations programmatically as per the requirement. The in built sensors plays a major role when using the screen orientations in place for the developers to design the application looks easy for the end users to make use of the application effectively .

In the Windows Phone 7 development by default the screens are in Portrait mode and we have 3 types of supported Screen Orientations as below

• Portrait
• Landscape(Left)
• Landscape(Right)

In order to use the orientation change with the Windows Phone development, in XAML page we need to make use of the SupportedPageOrientation properties. We can make use of these orientations in page level so that for each of the page we can specify a different orientation for better usability. The possible properties of the SupportedPageOrientation can be one of the below options

• Portrait
• Landscape
• PortraitOrLandscape

Let us jump start to see the step by step process on how to use the Windows Phone 7 Screen orientation effectively.

Steps

Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 Application with a valid project name as shown in the screen below.

We can see a new Windows Phone 7 Application created with the designer windows and the XAML window. Now we can see the Orientations mentioned in the XAML code highlighted as shown in the screen below. By default we can see the Orientation is specified as Portrait as shown in the screen below.

XAML Code

SupportedOrientations="Portrait" Orientation="Portrait"



Now we will add some controls to have a good user look and feel as shown in the screen. Once we added the controls your complete XAML code will look like the below listing where we can see the SupportedOrientaion="Portrait". Now run the application by pressing F5 and we can see the application in Portrait orientation as shown in the screen below.

XAML Code

<phone:PhoneApplicationPage
x:Class="F5debugWp7Orientations.MainPage"
xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;"> http://schemas.microsoft.com/winfx/2006/xaml/presentation"
</a>
xmlns:x="
<a href="http://schemas.microsoft.com/winfx/2006/xaml&quot;">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&quot;">http://schemas.microsoft.com/expression/blend/2008"</a>
xmlns:mc="
<a href="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;">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="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
 <!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
     <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="F5DEBUG WP7 TUTORIALS" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="Orientations" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>
     <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="41,47,0,0" Name="textBlock1" Text="Name" VerticalAlignment="Top" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="143,27,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="307" />
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="41,125,0,0" Name="textBlock2" Text="Age" VerticalAlignment="Top" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="143,105,0,0" Name="textBox2" Text="" VerticalAlignment="Top" Width="307" />
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="41,203,0,0" Name="textBlock3" Text="Address" VerticalAlignment="Top" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="143,183,0,0" Name="textBox3" Text="" VerticalAlignment="Top" Width="307" />
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="41,281,0,0" Name="textBlock4" Text="Mobile No" VerticalAlignment="Top" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="143,261,0,0" Name="textBox4" Text="" VerticalAlignment="Top" Width="307" />
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="41,359,0,0" Name="textBlock5" Text="City" VerticalAlignment="Top" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="143,339,0,0" Name="textBox5" Text="" VerticalAlignment="Top" Width="307" />
        <Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="54,456,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
        <Button Content="Clear" Height="72" HorizontalAlignment="Left" Margin="240,456,0,0" Name="button2" VerticalAlignment="Top" Width="160" />
    </Grid>
</Grid>
</phone:PhoneApplicationPage>

Portrait Mode

We can switch between the orientations right from the Emulator by clicking on the buttons as shown in the screen below.

Now let us change the Orientation in the XAML Code to Landscape as shown in the code below and run the application once again and see the application output as shown in the screen below.

XAML Code

x:Class="F5debugWp7Orientations.MainPage"
xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>
xmlns:x="
<a href="http://schemas.microsoft.com/winfx/2006/xaml&quot;">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&quot;">http://schemas.microsoft.com/expression/blend/2008"</a>
xmlns:mc="
<a href="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;">http://schemas.openxmlformats.org/markup-compatibility/2006"</a>
mc:Ignorable="d" d:DesignWidth="728" d:DesignHeight="480"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Landscape" Orientation="Landscape"
shell:SystemTray.IsVisible="True">

Landscape



Also we can control the orientation from the code behind programmatically by using one of the below code as per the requirement as shown in the screen below.

Code Behind

// Portrait Orientation
SupportedOrientations = SupportedPageOrientation.Portrait;
// Landscape Orientation
SupportedOrientations = SupportedPageOrientation.Landscape;
// For Lanscape and Portrait
SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;

Based on the application design and requirement we can assign the orientation and we can customize to make the better look and feel .

Conclusion

So in this article we have seen the different screen orientations which can be used in the windows phone 7 application development to make a good user experience interface when we tilt the device as per the orientation.