Introduction
Mobile devices have a big constraint compared to desktops – their screen
size. Also, they can be handled in a variety of orientations. On the other
hand, they are always available, in your pocket or purse, at any time you want
to use them.
The mobility of the Windows Phone
7 device ensures that they can be used anywhere. This also brings the
possibility that the orientation in which they are used is not a pre-defined.
The devices can be held in any orientation and when the orientation changes
from portrait to landscape, a smartphone application should change how they
operate to maximize the value proposition of the new orientation.
In this article, we will explore how to handle orientation changes in your
application.
To configure your Windows Phone application for orientation support, you
need to set the SupportedOrientations property. The possible values for this
property are Portrait, Landscape and PortraitOrLandscape.
To enable orientation support, we need to set this property to
PortraitOrLandscape.
Let us explore this hands-on by switching the scrolling orientation in a
demo Windows Phone 7 application.
Hands-On
Create a new Silverlight for Windows Phone project in Visual Studio called
WinPhone7OrientationDemo.
In the XAML for the main page, change the SupportedOrientations property to
PortraitOrLandscape.
x:Class="WinPhone7OrientationDemo.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="PortraitOrLandscape" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
Now, go ahead and add an instance of the ScrollViewer control. We need this
control because it has a unique property; it allows you to scroll through its
contents.
Inside the ScrollViewer instance, add a StackPanel control, which will host
our contents.
Inside the StackPanel control, drag and drop a few controls like Button,
RadioButton, TextBlock and TextBox. For controls that have a width property,
make sure you set the width to the maximum possible that can fit.
To ensure that you have the right width, copy paste the following code,
which will add the ScrollViewer, StackPanel and a few dummy controls.
//MainPage.xaml snippet