×
Namespaces

Variants
Actions

Implementing Orientation Lock In Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article shows a simple way to programmatically implement orientation lock in your Windows Phone application.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested withCompatibility
Platform(s): Windows Phone 7+
Windows Phone 8
Windows Phone 7.5
Article
Keywords: WP7, WP8, Windows Phone, orientation, orientation lock, XAML
Created: martinsuchan (11 Feb 2013)
Last edited: hamishwillee (02 Jul 2013)

Contents

Introduction

Orientation lock is a feature, that enables you to keep your preferred screen orientation no matter in which position is currently the phone. There is currently no phone with hardware orientation lock button or official API for locking page orientation, but is quite easy to implement your own orientation lock within your app. By implementing this described features your app will support portrait and landscape orientation and user will be able to lock the preferred orientation whenever he wants.

The basic page overview

Each PhoneApplicationPage has two properties for defining current and available screen orientations:

/// <summary>
/// Gets or sets the supported phone orientations.
/// </summary>
public SupportedPageOrientation SupportedOrientations { get; set; }
 
/// <summary>
/// Gets the current orientation.
/// </summary>
public PageOrientation Orientation { get; set; }

The SupportedOrientations defines available orientations on the target page, either PortraitOrLandscape, or just Landscape or just Portrait.

The Orientation defines the current page orientation. The enum PageOrientation contains lot of unused values, the only meaningful are: Portrait, LandscapeLeft and LandscapeRight.

These two properties are actually implemented as DependencyProperties so it's possible to use databinding for defining their values from ViewModel.

Implementation of the orientation lock

For implementing the orientation lock we add three bindable properties to our ViewModel. In my sample I use the well known MVVM Light library.

So let's define our bindable properties in the MainViewModel.cs file:

public class MainViewModel : ViewModelBase
{
public bool RotationLocked
{
get { return _rotationLocked; }
set { Set(() => RotationLocked, ref _rotationLocked, value); }
}
private bool _rotationLocked;
 
public PageOrientation Orientation
{
get { return _orientation; }
set { Set(() => Orientation, ref _orientation, value); }
}
private PageOrientation _orientation = PageOrientation.LandscapeRight;
 
public SupportedPageOrientation SupportedOrientations
{
get { return _supportedOrientations; }
set { Set(() => SupportedOrientations, ref _supportedOrientations, value); }
}
private SupportedPageOrientation _supportedOrientations = SupportedPageOrientation.PortraitOrLandscape;
...
}

For our Orientation and SupportedOrientations properties we need to define the default values, otherwise the initialization of PhoneApplicationPage.InitializeComponent() will fail on undefined values.

We can later preserve these values in IsolatedStorageSettings so the app will restore them between sessions.

The next step is to implement the actual binding in MainPage.xaml or in any other page you want:

<phone:PhoneApplicationPage x:Class="RotationLock.MainPage"
...
DataContext="{Binding Main, Source={StaticResource Locator}}"
SupportedOrientations="{Binding SupportedOrientations, Mode=TwoWay}"
Orientation="{Binding Orientation, Mode=TwoWay}">
...
</phone:PhoneApplicationPage>

Now we are almost done, we only need to implement the Command for locking and unlocking the current page orientation. The Command implementation is pretty straightforward:

private void InitializeCommands()
{
SwitchRotationLock = new RelayCommand(SwitchRotationLockCommand);
}
 
public ICommand SwitchRotationLock { get; private set; }
 
private void SwitchRotationLockCommand()
{
if (RotationLocked)
{
// unlock orientation
SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;
}
else
{
// lock orientation
switch (Orientation)
{
case PageOrientation.None:
case PageOrientation.Portrait:
case PageOrientation.PortraitUp:
case PageOrientation.PortraitDown:
SupportedOrientations = SupportedPageOrientation.Portrait;
break;
case PageOrientation.Landscape:
case PageOrientation.LandscapeLeft:
case PageOrientation.LandscapeRight:
SupportedOrientations = SupportedPageOrientation.Landscape;
break;
default:
throw new ArgumentOutOfRangeException();
}
}
// set the rotation flag here
RotationLocked = !RotationLocked;
}

Now let's create a button for locking/unlocking page orientation:

<phone:PhoneApplicationPage.Resources>
<converters:RotationButtonTextConverter x:Key="LockDescription"/>
</phone:PhoneApplicationPage.Resources>
...
<Button Command="{Binding SwitchRotationLock}" Content="{Binding RotationLocked, Converter={StaticResource LockDescription}}"/>

In this example we've also databound RotationLocked flag the the Button Content using our Converter. The Converter looks like this:

public class RotationButtonTextConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
// return the proper 'rotation lock' button description
bool locked = value is bool && (bool) value;
return locked ? "unlock rotation" : "lock rotation";
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}

And that's pretty much all! Now if this app is started, you can tilt the phone as usual and the page orientation is changing, but if you want to keep the current page orientation, just click the "lock orientation" button. Now the current page orientation is fixed and you can tilt the phone into any position.
If you want to unlock the orientation again, just press again the "unlock orientation" button and everything behaves as before.

Note.pngNote: There is no way to prevent the orientation change between LandscapeLeft and LandScapeRight, this is by design. This orientation lock allows you to keep the orientation either in portrait or in landscape mode.

Warning.pngWarning: For some reason the Page designer in Visual Studio or in Blend fails to load when databinding on Orientation property is used. I haven't found any solution for this. The best approach for designing your page then probably is comment the line with Orientation property, edit your page and at the end add back the Orientation databinding line.

Related Articles


Summary

We have shown that implementing orientation lock programmatically in Windows Phone 7 and 8 is pretty straightforward. The only problematic thing is the broken designer, but this issue can be solved using described workaround.

You can download source code containing ready to use sample here: File:RotationLock.zip.

This page was last modified on 2 July 2013, at 13:59.
322 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×