Floating FB popout byF5debug

Learn Windows Phone 7 Development in 31 Days – Day 20 – 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 .     [more]

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.

clip_image002

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:

1

SupportedOrientations="Portrait" Orientation="Portrait"

clip_image004
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:

01

<phone:PhoneApplicationPage

02

x:Class="F5debugWp7Orientations.MainPage"

03

xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>

04

xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml&quot;">http://schemas.microsoft.com/winfx/2006/xaml"</a>

     

05

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

06

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

07

xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008&quot;">http://schemas.microsoft.com/expression/blend/2008"</a>

08

xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;">http://schemas.openxmlformats.org/markup-compatibility/2006"</a>

     

09

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

10

FontFamily="{StaticResource PhoneFontFamilyNormal}"

11

FontSize="{StaticResource PhoneFontSizeNormal}"

12

Foreground="{StaticResource PhoneForegroundBrush}"

13

SupportedOrientations="Portrait" Orientation="Portrait"

14

shell:SystemTray.IsVisible="True">

15

 

16

<!--LayoutRoot is the root grid where all page content is placed-->

17

<Grid x:Name="LayoutRoot" Background="Transparent">

18

<Grid.RowDefinitions>

19

<RowDefinition Height="Auto"/>

20

<RowDefinition Height="*"/>

21

</Grid.RowDefinitions>

22

 

23

<!--TitlePanel contains the name of the application and page title-->

24

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

25

<TextBlock x:Name="ApplicationTitle" Text="F5DEBUG WP7 TUTORIALS" Style="{StaticResource PhoneTextNormalStyle}"/>

26

<TextBlock x:Name="PageTitle" Text="Orientations" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

27

</StackPanel>

28

 

29

<!--ContentPanel - place additional content here-->

30

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

31

<TextBlock Height="30" HorizontalAlignment="Left" Margin="41,47,0,0" Name="textBlock1" Text="Name" VerticalAlignment="Top" />

32

<TextBox Height="72" HorizontalAlignment="Left" Margin="143,27,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="307" />

33

<TextBlock Height="30" HorizontalAlignment="Left" Margin="41,125,0,0" Name="textBlock2" Text="Age" VerticalAlignment="Top" />

34

<TextBox Height="72" HorizontalAlignment="Left" Margin="143,105,0,0" Name="textBox2" Text="" VerticalAlignment="Top" Width="307" />

35

<TextBlock Height="30" HorizontalAlignment="Left" Margin="41,203,0,0" Name="textBlock3" Text="Address" VerticalAlignment="Top" />

36

<TextBox Height="72" HorizontalAlignment="Left" Margin="143,183,0,0" Name="textBox3" Text="" VerticalAlignment="Top" Width="307" />

37

<TextBlock Height="30" HorizontalAlignment="Left" Margin="41,281,0,0" Name="textBlock4" Text="Mobile No" VerticalAlignment="Top" />

38

<TextBox Height="72" HorizontalAlignment="Left" Margin="143,261,0,0" Name="textBox4" Text="" VerticalAlignment="Top" Width="307" />

39

<TextBlock Height="30" HorizontalAlignment="Left" Margin="41,359,0,0" Name="textBlock5" Text="City" VerticalAlignment="Top" />

40

<TextBox Height="72" HorizontalAlignment="Left" Margin="143,339,0,0" Name="textBox5" Text="" VerticalAlignment="Top" Width="307" />

41

<Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="54,456,0,0" Name="button1" VerticalAlignment="Top" Width="160" />

42

<Button Content="Clear" Height="72" HorizontalAlignment="Left" Margin="240,456,0,0" Name="button2" VerticalAlignment="Top" Width="160" />

43

</Grid>

44

</Grid>

45

</phone:PhoneApplicationPage>

Portrait Mode:

clip_image006

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

clip_image008

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:

01

x:Class="F5debugWp7Orientations.MainPage"

02

xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>

       

03

xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml&quot;">http://schemas.microsoft.com/winfx/2006/xaml"</a>

04

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

     

05

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

06

xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008&quot;">http://schemas.microsoft.com/expression/blend/2008"</a>

     

07

xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;">http://schemas.openxmlformats.org/markup-compatibility/2006"</a>

08

mc:Ignorable="d" d:DesignWidth="728" d:DesignHeight="480"

09

FontFamily="{StaticResource PhoneFontFamilyNormal}"

10

FontSize="{StaticResource PhoneFontSizeNormal}"

11

Foreground="{StaticResource PhoneForegroundBrush}"

12

SupportedOrientations="Landscape" Orientation="Landscape"

13

shell:SystemTray.IsVisible="True">


Landscape:

clip_image010

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:

1

// Portrait Orientation

2

SupportedOrientations = SupportedPageOrientation.Portrait;

3

// Landscape Orientation

4

SupportedOrientations = SupportedPageOrientation.Landscape;

5

// For Lanscape and Portrait

6

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.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter