Dealing with Page Orientations (Silverlight For Windows Phone)

In this part, we will learn how to handle switching between page orientations based on the device’s position. There are two types of page orientation: portrait or landscape. Let us follow the steps below:

1. Create a new project or use any previously created project. Insert a new page; on Solution Explorer select Add, then New Item.

2. Select Windows Phone Portrait Page and rename the file to your liking, in this example, Orientation.xaml, then select Add.

tmp1C-35

3. Insert a video file into your project and set its Build Action property as "Resource".

tmp1C-36

4. Add a MediaElement control and place it inside content grid. Then set the source property to refer to the previously added video file.


tmp1C-37_thumb

5. In order to make the page support both portrait and landscape orientation, insert the following code into the page’s PhoneApplicationPage definition.

tmp1C-38_thumb

6. Now set Orientation.xaml as the application’s initial page by changing the property of WMAppManifest manifest file.

tmp1C-39_thumb

On the Task section, change the value of NavigationPage into Orientation.xaml

tmp1C-40_thumb

7. Then on the Orientation.xaml page source code, add an event handler to handle the page’s orientation switch. Type in the code below:

tmp1C-41_thumb

 

 

tmp1C-42_thumb

8. Press F5 and change the emulator’s orientation by pressing the orientation button on the top right corner of the emulator. When the orientation changes to landscape, the video will be shown in full screen mode and the page title will disappear.

tmp1C-43

The handling of page orientation alteration can increase the Window Phone application’s user experience. It is of course your option to develop an application that can adapt to the way users hold their devices.

Next post:

Previous post: