Xamarin.Forms dynamic layout depending on screen orientation or size

Question

Did Xamarin.Forms already contain a control/layout which orders it's content depending on the screen orientation or size?

What I want: Two stacklayouts which are ordered horizontal, if the screen got enough space. When the Screen changes, so that the screen got not enough horizontal-space, the two stacklayouts should be ordered vertical.

I don't want to do it in code behind.

I search for an solution which only uses the xaml.

user_8093394 · Answer

I guess you can't achieve this using ONLY XAML. Certainly, you will need some c# code. The XAML on Xamarin.Forms is designed to be responsive, and you often define the view properties in a relative mode (instead of absolute).

You can see an example of the behavior you want at this topic where we can see a screen changing the orientation of the StackLayout according to the device orientation (you can use it as your guideline to write your own layout component)

The screen on portrait mode:

The screen on landscape mode:

That is accomplished with the following XAML:

Some C# is used to change the orientation of outerStack based on the orientation of the device:

protected override void OnSizeAllocated (double width, double height){
    base.OnSizeAllocated (width, height);
    if (width != this.width || height != this.height) {
        this.width = width;
        this.height = height;
        if (width > height) {
            outerStack.Orientation = StackOrientation.Horizontal;
        } else {
            outerStack.Orientation = StackOrientation.Vertical;
        }
    }
}

I hope it help you.

user_2249175 · Answer

As far as I know this is not possible. I did basically exactly what you want 'manually'. It's not too hard, though. First of all, you'll have to wrap your stack layouts in another StackLayout

Next, you'll have to override OnSizeAllocated and set the outer OuterStackLayout.Orientation according to your screen orientation

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

    if (SizeHasChanged(width, height)) // elided, just compare width, height with the stored values
    {
        StoreSize(width, height); // store in private members

        if (IsLandscape)
        {
            this.OuterStackLayout.Orientation = StackOrientation.Horizontal;
        }
        else
        {
            this.OuterStackLayout.Orientation = StackOrientation.Vertical;
        }
    }
}

public bool IsLandscape => _width > _height;

Maybe you'll have to fiddle around with the horizontal options of the inner StackLayouts a bit - or other layout parameters, but basically this should do.

user_17471824 · Answer

Option #1 'Orientation States' - Portrait & Landscape. Use 'OrientationStates' inside visual state manager like so:

Inside .XAML File

With an added 'OnSizeAllocated()' function in CodeBehind like so:

Inside .XAML.CS File

public partial class RegisterPage : ContentPage
{
    public RegisterPage()
    {
        InitializeComponent();
    }

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

        var state = (width > height) ? "Landscape" : "Portrait";

        // Call the 'Portrait' & 'Landscape' States in .XAML File
        VisualStateManager.GoToState(myGrid, state);
        VisualStateManager.GoToState(firstStackLayout, state);
        VisualStateManager.GoToState(secondStackLayout, state);
    }
}

[OR]

Option #2 The magic bullet - Your ONLY .XAML File solution to that problem.

'Orientation Triggers' - Portrait & Landscape.

Use 'OrientationStateTriggers' inside 'State Triggers' in Visual State like so:

Inside .XAML File

Xamarin.Forms dynamic layout depending on screen orientation or size

3 Answers