This is a brain dump on implementing a responsive layout based on a device being in Portrait or Landscape mode.

In summary, I used a ContentView’s ControlTemplate to host a layout that depends on a device being in Portrait or Landscape mode. In addition, I then overrode the OnSizeAllocated method on the ContentPage.


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns=""

            <ControlTemplate x:Key="PortraitTemplate">
                    <StackLayout VerticalOptions="CenterAndExpand">
                        <Entry Style="{StaticResource RegistrationEntry}" Text="{Binding Email}"    Placeholder="email"  />
                        <Entry Style="{StaticResource RegistrationEntry}" Text="{Binding Password}" Placeholder="password" IsPassword="True" Margin="0,15,0,0"  />

                    <Button Style="{StaticResource RegistrationButton}" Text="Next" FontAttributes="Bold" FontSize="Small" VerticalOptions="Fill" />

            <ControlTemplate x:Key="LandscapeTemplate">
                <Label Text="Landscape" />

    <ContentView ControlTemplate="{StaticResource PortraitTemplate}" />


Code Behind

Override OnSizeAllocated method of a ContentPage and compare page width to height:

    public partial class RegistrationPage1 : ContentPage
		public RegistrationPage1() => InitializeComponent();

        protected override void OnSizeAllocated(double width, double height)
            base.OnSizeAllocated(width, height);

            ControlTemplate = GetTemplate(width, height);

        ControlTemplate GetTemplate(double width, double height) =>
            (height > width) ? TemplateFrom("PortraitTemplate") : TemplateFrom("LandscapeTemplate");

        ControlTemplate TemplateFrom(string templateName) =>
            Resources[templateName] as ControlTemplate;


Brain dump completed.