App Hub
Hi, VisitorSign In

Visuals & Media

Make your applications visually appealing with images, animations, and media.

Sensors & Other Phone Specific Features

Use unique features of the phone, such the accelerometer, GPS, and camera, in your applications.

Beyond the QuickStarts

Screen Orientations
Silverlight quickstart for Windows Phone development

Silverlight for Windows Phone supports portrait and landscape screen orientations. This QuickStart describes how to work with orientation changes in Windows Phone.

This QuickStart contains the following sections:

Orientations

Windows Phone supports the following screen orientations:

  • Portrait
  • Landscape left
  • Landscape right

Users can simply rotate the device to initiate a change from one orientation to another. When you're testing your application in the emulator, you can switch the screen orientation by clicking the buttons in the emulator toolbar. The orientation buttons have rectangles with arrows that indicate the orientation change.

Orientation

In portrait orientation, the page is oriented vertically so that the height of the page is greater than its width.

In either of the two landscape orientations, the Status Bar and the Application Bar remain on the side of the screen that has the Power and the Start button, respectively. Landscape left has the Status Bar on the left and landscape right has the Status Bar on the right.

Portrait is the default orientation for applications and you must add additional code to support landscape. You can't specify only left or only right landscape orientation. If you support landscape orientation, you must support both left and right. To specify that your application supports portrait and landscape, you must set the SupportedOrientations property to PortraitOrLandscape either in the XAML or in the code.

There are different ways to display content in either portrait or landscape orientation. Two techniques are scrolling and grid layout.

Scrolling Technique

The scrolling technique uses a StackPanel control that is placed within a ScrollViewer control. Use this technique if you're displaying content in a list or if you have different controls appearing one after another on the page. The StackPanel enables you to order the child elements one after another in your application and the ScrollViewer control enables you to scroll through the StackPanel if the UI elements don't fit on the screen when you switch from portrait to landscape.

To use the scrolling technique, you typically perform the following steps.

The following example shows a StackPanel and several controls within a ScrollViewer.

XAML

<ScrollViewer x:Name="ContentGrid" Grid.Row="1" VerticalScrollBarVisibility="Auto">
<!--You must apply a background to the StackPanel control or you
will be unable to pan the contents.-->
<StackPanel Background="Transparent" >
<!--Adding various controls and UI elements.-->
<Button Content="This is a Button" />
<Rectangle Width="100" Height="100" Margin="12,0"
HorizontalAlignment="Left" Fill="{StaticResource PhoneAccentBrush}"/>
<Rectangle Width="100" Height="100" HorizontalAlignment="Center"
Fill="{StaticResource PhoneAccentBrush}"/>
<Rectangle Width="100" Height="100" Margin="12,0"
HorizontalAlignment="Right" Fill="{StaticResource PhoneAccentBrush}"/>
<TextBlock Text="This is a line of text that will wrap in portrait
orientation but not landscape orientation." TextWrapping="Wrap" />
<CheckBox Content="A CheckBox"/>
<RadioButton Content="A RadioButton" />
</StackPanel>
</ScrollViewer>

The following illustrations show the scrolling behavior for portrait and landscape orientations. The portrait orientation doesn't require scrolling, but the landscape orientation does require scrolling.

ScrollViewer

ScrollViewer

Grid Layout Technique

The grid layout technique positions UI elements in a Grid. When an orientation change occurs, you programmatically reposition elements into different cells of the Grid.

To use the grid layout technique, you typically perform the following steps.

The following example creates a 2 x 2 Grid to position an image and a collection of buttons. The OrientationChanged event handler repositions the elements within the Grid when the orientation is changed.

XAML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<!--Create a 2 x 2 grid to store an image and button layout.-->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--Add an image to the grid. Ensure the image height and width
are set to 300 and 500 respectively for this example.-->
<Image x:Name="Image1" Grid.Row="0" Grid.Column="0"
Stretch="Fill" HorizontalAlignment="Center" Source="licorice.jpg"
Height="300" Width="500"/>
<!--Add a StackPanel with buttons to the row beneath the image.-->
<StackPanel x:Name="buttonList" Grid.Row="1" Grid.Column="0"
HorizontalAlignment="Center" >
<Button Content="Action 1" />
<Button Content="Action 2" />
<Button Content="Action 3" />
<Button Content="Action 4" />
</StackPanel>
</Grid>

C#

private void PhoneApplicationPage_OrientationChanged(
object sender, OrientationChangedEventArgs e)
{
// Switch the placement of the buttons based on an orientation change.
if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait))
{
Grid.SetRow(buttonList, 1);
Grid.SetColumn(buttonList, 0);
}
// If not in portrait, move buttonList content to visible row and column.
else
{
Grid.SetRow(buttonList, 0);
Grid.SetColumn(buttonList, 1);
}
}

Visual Basic

Private Sub PhoneApplicationPage_OrientationChanged(ByVal sender As Object, ByVal e As OrientationChangedEventArgs)
' Switch the placement of the buttons based on an orientation change.
If ((e.Orientation And PageOrientation.Portrait) _
= PageOrientation.Portrait) Then
Grid.SetRow(buttonList, 1)
Grid.SetColumn(buttonList, 0)
End If
' If not in portrait, move buttonList content to visible row and column.
Grid.SetRow(buttonList, 0)
Grid.SetColumn(buttonList, 1)
End Sub

The following illustrations show the grid layout behavior for portrait and landscape orientations. In the portrait orientation, the buttons are positioned on the bottom. In the landscape orientation, the buttons are positioned on the right.

Grid

Grid

See Also

var gDomain='m.webtrends.com'; var gDcsId='dcschd84w10000w4lw9hcqmsz_8n3x'; var gTrackEvents=1; var gFpc='WT_FPC'; /*<\/scr"+"ipt>");} /*]]>*/
DCSIMG