Is a Grid inside a StackLayout working by design?

[riccardominato]

I have stumbled across a particular behavior while trying to define a custom control built using a Grid inside of it.
It worked well until I put this control as one of the children of a [Vertical/Horizontal]StackLayout.

I managed to reproduce the issue, but it's so basic stuff that it made me think that it's actually working by design, even though it's a weird behavior for me.

Basically, putting a Grid inside a StackLayout overrides the Rows/Columns size constraints set on RowDefinitions/ColumnDefinitions attribute. So that even if two rows have * height, you could actually find them to be different.

Here is a super simple repro:

<VerticalStackLayout>
    <Grid
        RowDefinitions="*, *">
        <ContentView
            Grid.Row="0"
            BackgroundColor="Blue">
            <Label
                TextColor="White"
                Text="First row of the grid" />
        </ContentView>
        <ContentView
            Grid.Row="1"
            HeightRequest="50"
            BackgroundColor="Red">
            <Label
                TextColor="White"
                Text="Second row of the grid" />
        </ContentView>
    </Grid>
    <Label
        Text="Not grid" />
</VerticalStackLayout>

and this is the resulting view:

The docs say:

The size and position of child views within a StackLayout depends upon the values of the child views' HeightRequest and WidthRequest properties, and the values of their HorizontalOptions and VerticalOptions properties.

But aren't RowDefinitions sizes a height request?

[Dreamescaper]

Sounds like a bug to me.

[riccardominato]

It seemed so to me too. But being this such a basic example, I would like to have a feedback from someone from the team.
I would be available to fill an issue, if it's the case.

[stephenquan]

The HeightRequest of your Grid is undefined because it's placed inside a VerticalStackLayout. So, The Grid's height is controlled by the children's height. However the children's height is controlled by the Grid height. So, there is no clear definition of the Grid's height.

[riccardominato]

I agree on the HeightRequest not being set for the Grid component. But the children (both of them) height is clearly defined.
For the second it's because a HeightRequest is explicitely defined, for the first it's because the Grid constraints state that the two rows must have equal height.
So the graphical engine has all the information to both satisfy Grid constraints and StackLayout spacing.
If this is by design, it means that Grid constraints can be overridden if placed in a StackLayout, and this is quite a strange behavior to me.

[stephenquan]

What happen was without the StackLayout, when the Grid was placed on the page, the page was setting the Grid's height to the entire page. When put inside a StackLayout, this does not happen, if you want the ContentPage height to still be in effect you will have to bind the Grid's HeightRequest to the ContentPage's height.

The StackLayout allows for the content to have different height and not be bound by the StackLayout or the ContentPage it is in. This is how it works when the StackLayout is placed inside of a ScrollView. It pushes the responsibility to the children to size themselves.

With the Grid, since it doesn't know what its height is, the RowDefinition=",", I suspect it is behaving as the HeightRequest is 0 or undefined. And, therefore, allocating MinimumHeightRequest of 0 to both of your ContentView of which both your ContentView exceeds so, that's why it appears it just wrapping to your ContentView height unevenly.