Xamarin.Forms XAML RelativeLayout: define one height, have the rest filled dynamically

Question

Using Xamarin.Forms and XAML, I need to define a layout for screen sizes of various heights.

Here's the results I'm getting, and the code below it:

(Just for convenience the example code uses Boxes where an Image and StackLayout should go)

   <Grid  
        BackgroundColor="Blue"
        Padding="10">
        <Grid.RowDefinitions>
            <RowDefinition
                Height="1*" />
            <RowDefinition
                Height="8*" />
            <RowDefinition
                Height="1*" />
        </Grid.RowDefinitions>
        <RelativeLayout
            Grid.Row="1"
            BackgroundColor="Yellow">
            <BoxView
                x:Name="whereImageGoes"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5}"
                BackgroundColor="Orange" />

            <BoxView
                x:Name="whereStackLayoutGoesButShouldFillAllYellowAreaUnderIt"
                VerticalOptions="FillAndExpand"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5}"
                BackgroundColor="Green" />
        </RelativeLayout>
    </Grid>

Here's what's going on, and the problem I'm having:

• The blue area is the Grid, the bottommost element.
• The yellow area is the RelativeLayout, filling the Grid Row it's in.
• The orange area is where an image has to be placed, and the size it has to be--a square that's exactly half the width of the layout it's in.
• The green area is where a StackLayout should go, except it should extend downward to cover all the yellow area below it, and this is the key thing: that height will be different on different devices, so it can't be defined using a Factor. [btw I don't know why it has any height at all in this example, but it does]

So... how do I dynamically stretch the StackLayout to fill that lower yellow area while still making sure the image has a consistent ratio of size to the layout's width?

Answer 1

Try this code

    <Grid
        BackgroundColor="Blue"
        Padding="10">
        <Grid.RowDefinitions>
            <RowDefinition
                Height="1*" />
            <RowDefinition
                Height="8*" />
            <RowDefinition
                Height="1*" />
        </Grid.RowDefinitions>

        <StackLayout Spacing="0" Padding="0" Margin="0" Grid.Row="1">
            <RelativeLayout Margin="0" Padding="0" VerticalOptions="Start"
                BackgroundColor="Yellow">
                <BoxView
                    x:Name="whereImageGoes"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5}"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5}"
                    BackgroundColor="Orange" />
            </RelativeLayout>

            <BoxView
                    x:Name="whereStackLayoutGoesButShouldFillAllYellowAreaUnderIt"
                    VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                    BackgroundColor="Green" />
        </StackLayout>

    </Grid>