如何修复 StackLayout Xamarin 中的标签

Question

当Label移动到另一行时， Grid会移动。 有一个包含两个Columns和两个Rows的网格。 左边的行是相连的。 他们应该有一个带有图像的BoxView ， BoxView创建一个边框效果。 Image必须在单元格内和BoxView内居中，这也是居中的。 在顶行的右列中，应该有一个带有Label的StackLayout 。 当在Label中放置两行文本时，左列从顶部移动。 我想知道是否甚至可以编辑网格的右侧而不以任何方式影响左侧？ 截图视频中没有这样的问题，按照我做的例子。 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

正如史蒂夫暗示的那样，如果您想在标签移动到另一行时删除移位，您应该将BoxView的VerticalOptions设置为Start 。

代码示例：

   <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

所以我挖掘了真相，原来我的问题是网格的底部空行。

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