xamaringridlabelcellstacklayout

How to fix Label in StackLayout Xamarin


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>

Solution

  • 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>