How to fix Label in StackLayout Xamarin

Question

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? Screenshot There is no such problem in the video, following the example of which I make. https://youtu.be/tMdHE4UROFg?t=2631

<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>
        <Image Source="book_casino" Grid.Row="2"/>
    </Grid>
</ContentPage.Content>

Answer 1

Just as Steve implied, if you want to remove the shift when label move to another line, you should set the VerticalOptions of the BoxView to Start .

Code Sample:

   <BoxView
                    x:Name="BookBorderBoxView"
                    Grid.RowSpan="2"
                    HeightRequest="218"
                    HorizontalOptions="Center"
                  
                    VerticalOptions="Start"
                    WidthRequest="153"
                    Color="Red" />

                <Image  Source="XamarinLogo"
                        Grid.Row="0" 
                        Grid.Column="0" 
                        Grid.RowSpan="2" 
                        HeightRequest="220" 
                        WidthRequest="133" 
                        HorizontalOptions="Center" 
                        VerticalOptions="Start" 
                        Aspect="AspectFit"/>
            
            <StackLayout Grid.Column="1">
                <Label Text="AAAAAAAAAAAAAAAAAA" 
                       FontSize="18" 
                       FontAttributes="Bold"/>
            </StackLayout>

Answer 2

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>