How to fix Label in StackLayout Xamarin-CodePudding

When the Label moves to another line, the Grid shifts. There is a grid with two Columns and two Rows. The left rows are connected. They should have a BoxView with an image, the BoxView creates a border effect. The Image must be centered inside the cell and inside the BoxView, which is also centered. In the right column of the top row, there should be a StackLayout with a Label. When two lines of text are placed in the Label, the left column is shifted from the top. I'm wondering if it's even possible to edit the right part of the grid without affecting the left in any way?

CodePudding user response：

So I dug into the truth, it turns out my problem was the empty bottom row of the grid.

<ContentPage.Content>
    <Grid rainbow:DebugRainbow.ShowColors="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="80"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Margin="10" VerticalOptions="Start">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <BoxView Color="Red" HeightRequest="218" WidthRequest="153" HorizontalOptions="Center" VerticalOptions="Center" Grid.RowSpan="2"/>
            <Image Source="book_casino" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HeightRequest="198" WidthRequest="133" HorizontalOptions="Center" VerticalOptions="Center" Aspect="AspectFit"/>
            <StackLayout Grid.Column="1">
                <Label Text="AAAAAAAAAAAAAAAAAAA" FontSize="18" FontAttributes="Bold"/>
            </StackLayout>
            <Grid>
                <StackLayout Grid.Column="1" Grid.Row="1">
                    <Label Text="aaaaa" FontSize="18" FontAttributes="Bold"/>
                </StackLayout>
            </Grid>
        </Grid>
        <Image Source="book_casino" Grid.Row="2"/>
    </Grid>
</ContentPage.Content>