Xamarin Forms device orientation

Question

Im working on a Forms app and Im just wondering if someone could help me with device orientation and rotation.

Basically at the moment i have three rows of image buttons. What i want to do is when the device is rotated to landscape, then all of the buttons will all be displayed on one horizontal line instead of 3 vertical rows.

What would be the best approach for this? I know in Android you just create another xml layout file and just reference that, is there a similar way to do that in Xamarin Forms and XAML?

I will provide my MainPage.xaml below:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"            x:Class="MyApp_Crossplatform.Views.MainPage"
             Title="App"
             BackgroundColor="White">
  <ContentPage.Content>
    <StackLayout Padding="10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Vertical">
      <!--Main container layout-->
      <StackLayout VerticalOptions="Fill" HorizontalOptions="Center" Orientation="Vertical">
        <!--Layout for each menu component-->
        <StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand" Orientation="Horizontal">
          <Image
            x:Name="btnSocial"
            Source="imgsocial.png"
            WidthRequest="100"
            HeightRequest="100"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"/>
          <Image
            x:Name="btnCareer"
            Source="imgcareer.png"
            WidthRequest="100"
            HeightRequest="100"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"/>
        </StackLayout>
        <StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand" Orientation="Horizontal">
          <Image
            x:Name="btnSchedule"
            Source="imgschedule.png"
            WidthRequest="100"
            HeightRequest="100"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"/>
          <Image
            x:Name="btnContact"
            Source="contact.png"
            WidthRequest="100"
            HeightRequest="100"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"/>
        </StackLayout>
        <StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand" Orientation="Horizontal">
          <Image
            x:Name="btnDetails"
            Source="imgdetails.png"
            WidthRequest="100"
            HeightRequest="100"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"/>
        </StackLayout>
      </StackLayout>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

If anyone can help that would be great.

This is explained in depth here: developer.xamarin.com/guides/xamarin-forms/user-interface/… — Sven-Michael Stübe

Jason Jason · Accepted Answer · 2016-04-19T17:08:23

Forms doesn't have a OnRotation event (yet) - but you can achieve something similar by using OnSizeAllocated

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height); //must be called

    if (width > height) {
      // landscape
    } else {
      // portrait
    }
}

you could then change the orientation of your StackLayout from Horizontal to Vertical as needed.

Orientation in Forms is discussed in more detail here.

Xamarin Forms device orientation

1 Answers