Force an orientation on a single page in Xamarin.Forms

Introduction

In certain cases, there are requirements where a certain page in your application can only be viewed in a particular orientation, i.e. portrait/landscape. Dealing with this issue in native Android/iOS is like a walk in the park, but doing this in a cross-platform framework can be confusing!

Want to find the easiest way out of it? This tutorial is intended to show you how to force an orientation on a single page while developing with Xamarin. Let’s get to it!

Device Orientation

Device screen orientation in Xamarin is usually configured from the native (Android/iOS) project as suggested here. But what if we need to change the screen orientation of one particular screen (say to landscape) in Xamarin.Forms and other screens are different (maybe portrait)? Unfortunately, there are no direct API’s available from Xamarin.

If a common configuration is required throughout the application, then it can be done from the respective native projects. But to make any changes for a particular screen, we need to go back to the native hosts, as there are no direct API’s available for this (as of now).

For example, consider the following scenario: I have a Forms project that has five screens — out of those, for the fourth screen I need to support only landscape orientation, and for all remaining screens only portrait.

To solve this problem for Android, you need to register with Xamarin.Forms Messaging Center API.

Use the MessageCenter class to send the message from the Forms screen to Android MainActivity and notify the orientation change.

ForthPage.xaml.cs

public partial class ForthPage : ContentPage 
{ 

protected override void OnAppearing() 
{ 
   base.OnAppearing(); 
   MessagingCenter.Send(this, "AllowLandscape"); 
} 
   
   protected override void OnDisappearing() 
{ 
   base.OnDisappearing(); 
   MessagingCenter.Send(this, "PreventLandscape"); //during page close setting back to portrait 
} 
 
}

In your MainActivity, respond to it using the following piece of code

MainActivity.cs

[Activity(Label = "Main", ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation,ScreenOrientation = ScreenOrientation.Portrait)] 
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity 
{ 

//allowing the device to change the screen orientation based on the rotation 
MessagingCenter.Subscribe<ForthPage>(this, "AllowLandscape", sender => 
{
RequestedOrientation = ScreenOrientation.Landscape; 
}); 

//during page close setting back to portrait
MessagingCenter.Subscribe<ForthPage>(this, "PreventLandscape", sender => 
{ 
 RequestedOrientation = ScreenOrientation.Portrait;
});

.
.
.
}

It’s required that the Activity class contains the ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation attributes, and the default screen orientation should be Portrait(ScreenOrientation = ScreenOrientation.Portrait).

The same approach can be used for iOS applications also, but I prefer using the following alternative for iOS. We can configure just using AppDelegate and a custom renderer as follows:

// AppDelegate.cs

public override UIInterfaceOrientationMask GetSupportedInterfaceOrientations(UIApplication application,UIWindow forWindow) 
{ 
   var mainPage = Xamarin.Forms.Application.Current.MainPage; 
   if (mainPage.Navigation.NavigationStack.Last() is ThirdPage)
  {
    return UIInterfaceOrientationMask.Landscape;
  } 
    return UIInterfaceOrientationMask.Portrait;
}

Set the Configuration back to portrait on page disappear.

//ForthPageRenderer.cs 

using System; 
using Foundation; 
using UIKit; 
using Xamarin.Forms; 
using Xamarin.Forms.Platform.iOS; 


[assembly: ExportRenderer(typeof(ForthPage), typeof(ForthPageRenderer))] 

namespace MyForm.iOS {

public class ForthPageRenderer : PageRenderer 
{ 

     public override void ViewWillDisappear(bool animated) 
    { 
       base.ViewWillDisappear(animated);
       UIDevice.CurrentDevice.SetValueForKey(NSNumber.FromNInt((int)(UIInterfaceOrientation.Portrait)), new NSString("orientation"));}
    } 

 }
}

This is all about changing the screen orientation in Xamarin.Forms at runtime.

Summary

Using the above methodology, you can force an orientation onto a single Xamarin.Forms page. Also, the above code is quite flexible and can easily be changed according to your needs.

If I’ve missed something, go ahead and add it in the comments. I’ll make sure to add any needed changes to the post. Also, if you find something incorrect in the blog, please go ahead and correct me in the comments.

Smash that clap button if you liked this post.

You can reach out to me on LinkedIn or StackOverflow! I am always available! 😛

If you’d like to contribute, head on over to our call for contributors. You can also sign up to receive our weekly newsletters (Deep Learning Weekly and the Comet Newsletter), join us on Slack, and follow Comet on Twitter and LinkedIn for resources, events, and much more that will help you build better ML models, faster.