Handling Orientation in Windows Phone7 - [Part-5]


In this article, I will explain how to handling orientation in Windows Phone 7 applications. This tutorial will help developers to develop an orientation supported application.

In this part we are discussing about the orientation change event handling and how to supports application in both (portrait & landscape) mode. Windows Phone 7 basically supports two types of screen orientation – portrait and landscape. However there are several type orientations available.


Portrait Mode for Windows Phone 7

Landscape Mode for Windows Phone 7



Windows Phone screen orientation can be handled from the XAML for a specific page. To set two properties for a page: SupportedOrientations and Orientation.


xaml code



In the above code snippet SupportedOrientations property is responsible for types of screen orientation support page portrait or landscape. An Orientation property is specified for specific orientation of a page.

Apart from that we can also handle orientation in the code behind using SupportedOrientations property see below code snippet.


SupportedOrientations = SupportedPageOrientation.Portrait;


In this part I have consider two mechanisms for displaying contents in portrait or landscape mode.

For understand the in portrait or landscape mode I have taken two example here.

Example-1: Auto-sizing and scrolling: This example I have used a StackPanel control and ScrollViewer control to support both orientations. This mechanism is simple to use if we have to show contents in portrait or landscape mode.

Example-2: Grid Layout: in this example I have used a grid layout control and move element positioning within the grid cells based on the selected orientation mode.

Let us start with example-1 development.
Step-1: Create a Windows Phone 7 project and select File -> New Project menu.


Project Window


Step-2: Enter the project name and press OK button.

Step-3: In MainPage.xaml, in the XAML code, by default portrait set with SupportedOrientations and Orientation property. Now we are modifying these properties PortraitOrLandscape with SupportedOrientations and Orientationis Portrait. See below code snippet.


SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"


Step-4: In this step, I have added two button controls in grid layout by defining two rows. This page is developed for navigate the both examples. See below screenshot and code snippets.


Windows Phone 7



<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="Orientation App"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Main Menu"
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">
<Button Content="My Pictures"
Height="72" HorizontalAlignment="Center" Margin="0,20"
Name="btnMyPictures" VerticalAlignment="Top" Width="200" Click="btnMyPictures_Click" />
<Button Content="My Controls"
Height="72" HorizontalAlignment="Center" Margin="0,100"
Name="btnMyControls" VerticalAlignment="Top" Width="200" Click="btnMyControls_Click" />
</Grid>
</Grid>


Step-5: Now add a views and images directory in the project to keep all UI and images. Here I have added two xaml pages (MyPictures.xaml and MyControls.xaml) in view directly and added few images in images directory see below picture.


Solution Window



Step-6: Now add the code for navigate the MyPictures.xaml page using Navigation Service API see below code snippet.

private void btnMyPictures_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/views/MyPictures.xaml", UriKind.Relative));
}

private void btnMyControls_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/views/MyControls.xaml", UriKind.Relative));
}


Step-7: Now we can go ahead with Example-1 for Auto-sizing and scrolling concept in MyPictures.xaml page. In this page I have used ScrollViewer control and added a StackPanel control inside the ScrollViewer control. The ScrollViewer control allows scrolling through the StackPanel if the UI controls fall up the screen. See the blow code snippet for MyPictures.xaml page.


<ScrollViewer x:Name="ContentGrid" Grid.Row="1" VerticalScrollBarVisibility="Auto">
<StackPanel Background="Transparent" >
<Image Height="125" HorizontalAlignment="Left" Name="image1" Stretch="Fill"
VerticalAlignment="Top" Width="133" Source="/WP_HandleOrientation;component/images/f1.jpg" />
<Image Height="125" HorizontalAlignment="Center" Name="image2" Stretch="Fill"
VerticalAlignment="Center" Width="138" Source="/WP_HandleOrientation;component/images/f2.jpg" />
<Image Height="125" HorizontalAlignment="Right" Name="image3" Stretch="Fill"
VerticalAlignment="Bottom" Width="138" Source="/WP_HandleOrientation;component/images/f3.jpg" />
<Slider Height="84" Name="slider1"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>


Step-8: Now run the application by pressing F5 function key to run application in debug mode.


screen orientation mode portrait and landscape



view screen for orientation portrait and landscape


Step-9: Now select MyControls.xaml page for example-2 and set the SupportedOrientations property as PortraitOrLandscape see below code snippet.


SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"



Step-10: Now we can go ahead with Example-2 using Grid layout with 2 x 2 Grid, here I have added 2 rows and 2 columns here I have added few controls like picture box, button, link button, radio button and ellipse. First we need to understand that how these controls are added in the grid control, see below scratch diagram of grid.


strach screen


Now and add an image control to (R0, C0) and (R0, C1). Add StackPanel control to (R1, C0) and (R1, C1). The (R1, C0)’s StackPanel containing buttons and link button to the grid, (R1, C1)’s StackPanel containing RadioButton and Ellipse. See below xaml code snippet for the same.


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="204"/>
<ColumnDefinition Width="252*"/>
</Grid.ColumnDefinitions>

<Image x:Name="Image1" Stretch="Fill"
HorizontalAlignment="Center" Height="100" Width="111"
Source="/WP_HandleOrientation;component/images/c1.jpg" Margin="23,0,70,0" />

<StackPanel x:Name="buttonList" Grid.Row="1"
HorizontalAlignment="Center" Margin="2,0,60,0">
<Button Content="Action 1" />
<HyperlinkButton Content="Link" Height="36" Name="hyperlinkButton1" Width="111" />
</StackPanel>


<Image x:Name="Image2" Grid.Column="1" Stretch="Fill"
HorizontalAlignment="Center" Height="100" Width="124"
Source="/WP_HandleOrientation;component/images/c2.jpg" Margin="47,0,81,0" />

<StackPanel x:Name="buttonList1" Grid.Row="1" Grid.Column="1"
HorizontalAlignment="Center" Margin="34,0,92,0">
<RadioButton Content="Radio" Name="radioButton1" />
<Ellipse Height="83" Name="ellipse1" Stroke="Black" StrokeThickness="1" Width="84">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="1,0.8" StartPoint="0,0.8">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FFE21414" Offset="1" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</StackPanel>
</Grid>
</Grid>


Step-11: To and an OrientationChanged event here two ways to add this event in the page using xaml code and code behind of MyControls.xaml.cs.

Method-1 using xaml code add the following code to the top of the page under phone:PhoneApplicationPage.


OrientationChanged="PhoneApplicationPage_OrientationChanged"


While start typing OrientationChanged event it will display “”. See blow picture.


xaml code


I have selected this “” option; it will create the handler in code behind with the default name of "PhoneApplicationPage_OrientationChanged."

Method-2 using code behind add the following code in the constructor.


this.OrientationChanged += new EventHandler(OrientationsWithGridLayout_OrientationChanged);


It will create the handler automatically in MyControls.xaml.cs file.
void OrientationsWithGridLayout_OrientationChanged(object sender, OrientationChangedEventArgs e)
{

}

Step-12: The following code will switch the position of the controls in the grid based on an orientation change.

While start typing OrientationChanged it will display “”. See blow picture.


void OrientationsWithGridLayout_OrientationChanged(object sender, OrientationChangedEventArgs e)
{

if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait))
{
Grid.SetRow(Image1, 0);
Grid.SetColumn(Image1, 0);
Grid.SetRow(buttonList, 1);
Grid.SetColumn(buttonList, 0);

Grid.SetRow(Image2, 0);
Grid.SetColumn(Image2, 1);
Grid.SetRow(buttonList1, 1);
Grid.SetColumn(buttonList1, 1);
}
else
{
Grid.SetRow(Image1, 0);
Grid.SetColumn(Image1, 0);
Grid.SetRow(buttonList, 0);
Grid.SetColumn(buttonList, 1);

Grid.SetRow(Image2, 1);
Grid.SetColumn(Image2, 0);
Grid.SetRow(buttonList1, 1);
Grid.SetColumn(buttonList1, 1);
}
}


Step-13: Now run the application by pressing F5 function key to run application in debug mode.


screen orientation with controls


Thank you!


Comments

Author: Narendra Reddy vajrala06 May 2011 Member Level: Gold   Points : 0

wonderful article

Guest Author: Raman Malhotra21 Apr 2012

This is one of the best articles so far I have read online. Just useful information. Very well presented. Thank you very much to sharing with us. I've found some other good articles too over internet during searching this article which also explained very well about RadioButton Control in Windows Phone 7 Development.
http://www.mindstick.com/Articles/a6d78097-46a3-4392-856e-640ce106b959/?RadioButton%20Control%20in%20Windows%207%20Phone%20Development

http://social.msdn.microsoft.com/Forums/en/windowsphone7series/thread/89cf0ad0-e4bd-4baf-9532-157c30f3fd81

Thanks Everyone for your precious post.

Guest Author: Clement11 Jun 2012

Hoping to spare someone the hours of pain it took me to figure this out. On one computer it was an issue of not having the IIS correctly up and set. On the other straight app with nothing on it wouldn't run and returned the error. The fix was from the menu bar Build>Build Silverlight Application.It then seems to work properly.



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: