如何修復 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>