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.

Solution 1

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:

<?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="ResponsiveLayout.StackLayoutPageXaml"
Title="Stack Photo Editor - XAML">
    <ContentPage.Content>
        <StackLayout Spacing="10" Padding="5" Orientation="Vertical"
        x:Name="outerStack"> <!-- can change orientation to make responsive -->
            <ScrollView>
                <StackLayout Spacing="5" HorizontalOptions="FillAndExpand"
                    WidthRequest="1000">
                    <StackLayout Orientation="Horizontal">
                        <Label Text="Name: " WidthRequest="75"
                            HorizontalOptions="Start" />
                        <Entry Text="deer.jpg"
                            HorizontalOptions="FillAndExpand" />
                    </StackLayout>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="Date: " WidthRequest="75"
                            HorizontalOptions="Start" />
                        <Entry Text="07/05/2015"
                            HorizontalOptions="FillAndExpand" />
                    </StackLayout>
                    <StackLayout Orientation="Horizontal">
                        <Label Text="Tags:" WidthRequest="75"
                            HorizontalOptions="Start" />
                        <Entry Text="deer, tiger"
                            HorizontalOptions="FillAndExpand" />
                    </StackLayout>
                    <StackLayout Orientation="Horizontal">
                        <Button Text="Save" HorizontalOptions="FillAndExpand" />
                    </StackLayout>
                </StackLayout>
            </ScrollView>
            <Image  Source="deer.jpg" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

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.

Solution 2

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App.Views.TestPage">
    <ContentPage.Content>
        <StackLayout x:Name="OuterStackLayout">
            <StackLayout>
                <!-- Inner stack layout 1 -->
            </StackLayout>
            <StackLayout>
                <!-- Inner stack layout 2 -->
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

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.

Comments

[Tony]

I know that UWP has this, but I am also curious to know if Xamarin currently supports this.

[SushiHangover]

solution wich only uses the xaml : There is no layout that does that, you could write one of course or handle it in code-behind but you ruled that out.

[Neuxz]

@Tony Can you give me a a doc or some reference for the uwp? Maybe I can adapt it.

[Tony]

UWP Adaptive UI XAML msdn.microsoft.com/en-us/magazine/mt590974.aspx

[Neuxz]

Thanks very much! Too bad that there is no xaml only variant.

[Diego Rafael Souza]

I agree with it. But keep in mind that XAML is a markup language, you can't programming everything on it, unfortunately. I recomend you to see this presentation of Charles Pretzold at Xamarin Evolve 2016 that helped me a lot! It's an amazing approach about XAML. I became a fan after to watch this.