Xamarin Forms Relative Layout won't stack

Question

With the following code:

<ScrollView Orientation="Vertical" Padding="0">
            <RelativeLayout BackgroundColor="Red" Padding="0">
                <BoxView Color="Blue" WidthRequest="100" HeightRequest="100" 
                RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}" 
                RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
            </RelativeLayout>
            <RelativeLayout BackgroundColor="Green" Padding="0">
                <BoxView Color="Yellow" WidthRequest="100" HeightRequest="100" 
                RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}" 
                RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
            </RelativeLayout>
        </ScrollView>

But for some reason, instead of stacking, each new relative layout takes up the whole screen like this:

enter image description here

Why won't they stack up vertically? Stack layouts would normally only take vertically or horizontally the combined height of their children, but this doesn't happen with relative layouts. What am I missing?

Artur Shamsutdinov Artur Shamsutdinov · Accepted Answer · 2015-05-24T09:48:13

Try this layout. I added StackLayout in ScrollView and VerticalOptions="Start" for RelativeLayouts.

<?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="TestChat.ChatPage">
    <ContentPage.Content>
<ScrollView Orientation="Vertical" Padding="0">
    <StackLayout>
            <RelativeLayout BackgroundColor="Red" Padding="0" VerticalOptions="Start">
                <BoxView Color="Blue" WidthRequest="100" HeightRequest="100" 
                RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}" 
                RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
            </RelativeLayout>
            <RelativeLayout BackgroundColor="Green" Padding="0" VerticalOptions="Start">
                <BoxView Color="Yellow" WidthRequest="100" HeightRequest="100" 
                RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}" 
                RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" />
            </RelativeLayout>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

Xamarin Forms Relative Layout won't stack

1 Answers