Xamarin.Forms - Detect orientation & adjust page

Question

I'd like to know the orientation of the device (Android, iOS & Windows Phone) at the time I'm building up my page. The page is having a grid with 3 columndefinitions and should have 5 columndefinitions as soon as the orientation got changed to landscape.

        Grid grid = new Grid
        {

            HorizontalOptions = LayoutOptions.Fill,
            VerticalOptions = LayoutOptions.Fill,
            RowSpacing = 15,
            ColumnSpacing = 15,
            Padding = new Thickness(15),
            ColumnDefinitions = 
            {
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
            }
        };

        for (int i = 0; i < 12; i++)
        {
            Image img = new Image()
            {
                Source = "ButtonBlue.png"
            };
            //if(DependencyService.Get<IDeviceInfo>().IsPortraitOriented())
            //{ 
                grid.Children.Add(img, i % 3, i / 3);
            //}
            //else
            //{
            //    grid.Children.Add(button, i % 5, i / 5);
            //}
        }

        this.Content = new ScrollView
        {
            Orientation = ScrollOrientation.Vertical,
            Content = grid
        };

So here I added 12 images to test my code. The page is looking good in portrait-orientation and is having a lot of space between columns if the device is in landscape-orientation.

I'm also trying to use dependency injection to retrieve the information. The DependencyService is doing his job, but I don't have any success retrieving the orientation of the device...

Answer 1

In xamarin.forms, you can get notification from android part by using MessageCenter. 1.In Shared Project

public partial class MyPage : ContentPage
{   
    public MyPage ()
    {
        InitializeComponent ();

        Stack = new StackLayout
        {
            Orientation = StackOrientation.Vertical,
        };
        Stack.Children.Add (new Button { Text = "one" });
        Stack.Children.Add (new Button { Text = "two" });
        Stack.Children.Add (new Button { Text = "three" });

        Content = Stack;

        MessagingCenter.Subscribe<MyPage> (this, "Vertical", (sender) =>
        {
            this.Stack.Orientation = StackOrientation.Vertical;
            this.ForceLayout();
        });
        MessagingCenter.Subscribe<MyPage> (this, "Horizontal", (sender) =>
        {
            this.Stack.Orientation = StackOrientation.Horizontal;
            this.ForceLayout();
        });

    }
    public StackLayout Stack;
}

2.In Android Project

[Activity (Label = "XamFormOrientation.Android.Android", MainLauncher = true, ConfigurationChanges = global::Android.Content.PM.ConfigChanges.Orientation | global::Android.Content.PM.ConfigChanges.ScreenSize)]
public class MainActivity : AndroidActivity
{
    protected override void OnCreate (Bundle bundle)
    {
        base.OnCreate (bundle);

        Xamarin.Forms.Forms.Init (this, bundle);

        SetPage (App.GetMainPage ());
    }
    public override void OnConfigurationChanged (global::Android.Content.Res.Configuration newConfig)
    {
        base.OnConfigurationChanged (newConfig);

        if (newConfig.Orientation == global::Android.Content.Res.Orientation.Portrait) {
            MessagingCenter.Send<MyPage> (null, "Vertical");
        } else if (newConfig.Orientation == global::Android.Content.Res.Orientation.Landscape) {
            MessagingCenter.Send<MyPage> (null, "Horizontal");
        }
    }
}

Answer 2

I solved a similar problem and find it on great post which maybe helpfull for you (see hyperlink below).

In shortcut : Find out orientation by

Page.Width < Page.Height 

and use this information in constructor of ContentPage (or other) when creating page

http://www.sellsbrothers.com/Posts/Details/13740