In this tutorial we are going to see how to use the screen orientation effectively with Windows Phone development. Before we directly switch over the orientation in Windows Phone emulator first let us get some clear idea on what is screen orientation in windows phone using the article “Working with Screen Orientation in WP7”. Assuming that we are good with the screen orientation in Windows Phone, if we are developing the application which targets the orientation and if we need to test the orientation of the application with the Windows Phone Emulator then this tutorial will be useful for the readers.       [more]

Let us see the steps on how to test our application which is based on the screen orientation in windows phone. To start with Open Visual Studio 2010 IDE and create a new Silverlight for Windows Phone project with a valid project name as shown in the screen below. Once the project is created add some controls which are used to play around with the screen orientations.

Now drag and drop few controls to the screen which shows the orientation on phone for horizontal and vertical visibility. Once we designed the screen to show the desired result our screen looks like below.

XAML Code:

<phone:PhoneApplicationPage
x:Class=”F5debugHowto35.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:phone=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone”
xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
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 How to Series” Style=”{StaticResource PhoneTextNormalStyle}”/>
<TextBlock x:Name=”PageTitle” Text=”Screen Orientation” 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>

PhoneApplicationPage>

Now we need to change the orientation over the device change based on the need if the application need to support Portrait or it should support landscape or even both in  load event as shown in the code below.

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace F5debugHowto35
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();

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

Here our application need to support both Portrait and landscape so comment all the code and keep the last supported option only. Now to test the orientation on the emulator (virtual device) we have some inbuilt options with the emulator. We can change the orientation using the buttons provided (Right side tool bar) with the emulator as highlighted in the screen below.

Now we are done with our code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screens below.

Output Screens:

So in this short tutorial we have seen how to use the orientations effectively in testing our application using the Windows Phone Emulator with the inbuilt tools that are available to test it as per the code. This works exactly the same with the real device without any additional effort to make it work. That’s it from this tutorial on Windows Phone see you all in the next tutorial soon. Mean while Happy Programming!!!