Button/label inside grid gets incorrect height (Xamarin)

Question

I have two buttons inside a grid, one of them containing a longer text which does not fit on one line. The button with the long text seems to get an incorrect height and some of the text is invisible. From what I can see, the height is the one it would have needed if it was using the full width of the screen (comparison with a button outside the grid). Labels seem to behave in a similar manner.

Here is the code:

<?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="App1.MainPage">

    <StackLayout>
        <Button Text="1 line" />
        <Button Text="Word1 Word2 Word3 Word4 Word5 Word6 Word7 Word8 Word9 Word10 Word11 Word12 Word13 Word14 Word15 Word16 Word17 Word18 Word19 Word20" />
        <Grid BackgroundColor="Cyan">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button Grid.Row="0" Grid.Column="0" Text="1 line" />
            <Button Grid.Row="0" Grid.Column="1" Text="Word1 Word2 Word3 Word4 Word5 Word6 Word7 Word8 Word9 Word10 Word11 Word12 Word13 Word14 Word15 Word16 Word17 Word18 Word19 Word20" />

            <Label Grid.Row="1" Grid.Column="0" BackgroundColor="Green" Text="1 line" />
            <Label Grid.Row="1" Grid.Column="1" BackgroundColor="Magenta" Text="Word1 Word2 Word3 Word4 Word5 Word6 Word7 Word8 Word9 Word10 Word11 Word12 Word13 Word14 Word15 Word16 Word17 Word18 Word19 Word20" />
        </Grid>
    </StackLayout>

</ContentPage>

And here is the result:

Am I missing something in the grid definition to make the elements in it be measured correctly?

Answer 1

Try adding Button inside StackLayout

<StackLayout>
    <Button Text="1 line" />
    <Button Text="Word1 Word2 Word3 Word4 Word5 Word6 Word7 Word8 Word9 Word10 Word11 Word12 Word13 Word14 Word15 Word16 Word17 Word18 Word19 Word20" />
    <Grid x:Name="grid" BackgroundColor="Cyan">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <StackLayout Grid.Row="0" Grid.Column="0">
            <Button x:Name="btn1"  Text="1 line" VerticalOptions="Start"/>
        </StackLayout>
        <StackLayout Grid.Row="0" Grid.Column="1">
            <Button x:Name="btn2" Grid.Row="0" Grid.Column="1" Text="Word1 Word2 Word3 Word4 Word5 Word6 Word7 Word8 Word9 Word10 Word11 Word12 Word13 Word14 Word15 Word16 Word17 Word18 Word19 Word20 Word21 Word22 Word23 Word24" SizeChanged="btn2_SizeChanged" VerticalOptions="Start"/>
        </StackLayout>
        <Label Grid.Row="1" Grid.Column="0" BackgroundColor="Green" Text="1 line" />
        <Label Grid.Row="1" Grid.Column="1" BackgroundColor="Magenta" Text="Word1 Word2 Word3 Word4 Word5 Word6 Word7 Word8 Word9 Word10 Word11 Word12 Word13 Word14 Word15 Word16 Word17 Word18 Word19 Word20" />
    </Grid>
</StackLayout>

And in code-behind

private void btn2_SizeChanged(object sender, EventArgs e)
{
    grid.RowDefinitions[0].Height = (sender as Button).Height;
}

Note : You can do same for the Label in second row