Question

我正在尝试使用XAML创建一个简单的选项卡控件。一切都很好，但是应该扩展选项卡底线的底部BoxView是在网格单元的顶部绘制的。如何将其移动到网格单元的底部？我有一个红色的箭头指向应该在底部的行（BoxView）。

您可以看到我有VerticalOptions = End，但是它什么也没做。它总是画在顶部。

<Grid HorizontalOptions="FillAndExpand" Margin="10,0,10,0">
    <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <BoxView Grid.Row="0" 
                    Grid.Column="0" 
                    Grid.ColumnSpan="3" 
                    BackgroundColor="Gray" 
                    HeightRequest="1" 
                    Margin="0,20,0,0"
                    VerticalOptions="End"
                    />
        <BoxView Grid.Column="0"
                    BackgroundColor="Gray" />
        <BoxView Grid.Column="0"
                    Margin="1,1,0,0"
                    BackgroundColor="White" />
        <Label Grid.Column="0"
                HorizontalTextAlignment="Center"
                Text="Run Tickets" />
        <BoxView Grid.Column="1"
                    BackgroundColor="Gray" />
        <BoxView Grid.Column="1"
                    Margin="1,1,0,1"
                    BackgroundColor="White" />
        <Label Grid.Column="1"
                HorizontalTextAlignment="Center"
                Text="Readings" />
        <BoxView Grid.Column="2"
                    BackgroundColor="Gray" />
        <BoxView Grid.Column="2"
                    Margin="1,1,1,1"
                    BackgroundColor="White" />
        <Label Grid.Column="2"
                HorizontalTextAlignment="Center"
                Text="Adjustments" />
    </Grid>

Answer 1

我运行了您发布的确切代码，但我发现该行没有问题。 iOS和Android（设备）都在网格底部显示该行。

使用红色，因此可以被注意到。

可以看出问题在于，该行位于其余行的后面。要解决此问题，您只需要将行声明移到网格的最后。

<Grid HorizontalOptions="FillAndExpand" Margin="10,0,10,0">
    <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <BoxView Grid.Column="0"
                    BackgroundColor="Gray" />
        <BoxView Grid.Column="0"
                    Margin="1,1,0,0"
                    BackgroundColor="White" />
        <Label Grid.Column="0"
                HorizontalTextAlignment="Center"
                Text="Run Tickets" />
        <BoxView Grid.Column="1"
                    BackgroundColor="Gray" />
        <BoxView Grid.Column="1"
                    Margin="1,1,0,1"
                    BackgroundColor="White" />
        <Label Grid.Column="1"
                HorizontalTextAlignment="Center"
                Text="Readings" />
        <BoxView Grid.Column="2"
                    BackgroundColor="Gray" />
        <BoxView Grid.Column="2"
                    Margin="1,1,1,1"
                    BackgroundColor="White" />
        <Label Grid.Column="2"
                HorizontalTextAlignment="Center"
                Text="Adjustments" />

        <BoxView Grid.Row="0" 
                    Grid.Column="0" 
                    Grid.ColumnSpan="3" 
                    BackgroundColor="Red" 
                    HeightRequest="1" 
                    Margin="0,20,0,0"
                    VerticalOptions="End"
                    />
</Grid>

上面的结果将是这样的：

在您的示例中，我看到您的底线有20边距（顶部），如果这是有意的，并且您希望框与底线之间有20的分隔线。我将底线移到网格的第二行，然后删除RowSpacing。

类似这样的东西：

<Grid HorizontalOptions="FillAndExpand"          
      RowSpacing="0"
      Margin="10,0,10,0">
    <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <BoxView Grid.Column="0"
                    BackgroundColor="Gray" />
        <BoxView Grid.Column="0"
                    Margin="1,1,0,0"
                    BackgroundColor="White" />
        <Label Grid.Column="0"
                HorizontalTextAlignment="Center"
                Text="Run Tickets" />
        <BoxView Grid.Column="1"
                    BackgroundColor="Gray" />
        <BoxView Grid.Column="1"
                    Margin="1,1,0,1"
                    BackgroundColor="White" />
        <Label Grid.Column="1"
                HorizontalTextAlignment="Center"
                Text="Readings" />
        <BoxView Grid.Column="2"
                    BackgroundColor="Gray" />
        <BoxView Grid.Column="2"
                    Margin="1,1,1,1"
                    BackgroundColor="White" />
        <Label Grid.Column="2"
                HorizontalTextAlignment="Center"
                Text="Adjustments" />
        <BoxView Grid.Row="1"
                 Grid.ColumnSpan="3" 
                 BackgroundColor="Gray" 
                 HeightRequest="1" 
                 Margin="0,20,0,0"
                 VerticalOptions="End" />
</Grid>

会是这样的：

希望这会有所帮助。-

Answer 2

我尝试了您的代码，但是没有这样的问题。我进行了一些修改，您可以检查效果是否满足您的要求：

<Grid HorizontalOptions="FillAndExpand" Margin="10,0,10,0" ColumnSpacing="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <BoxView Grid.Column="0"
                BackgroundColor="Gray" />
        <BoxView Grid.Column="0"
                Margin="1,1,0,1"
                BackgroundColor="White" />

        <Label Grid.Column="0"
            HorizontalTextAlignment="Center"
            Text="Run Tickets" />
        <BoxView Grid.Column="1"
                BackgroundColor="Gray" />
        <BoxView Grid.Column="1"
                Margin="1,1,0,1"
                BackgroundColor="White" />
        <Label Grid.Column="1"
            HorizontalTextAlignment="Center"
            Text="Readings" />
        <BoxView Grid.Column="2"
                BackgroundColor="Gray" />
        <BoxView Grid.Column="2"
                Margin="1,1,1,1"
                BackgroundColor="White" />
        <Label Grid.Column="2"
            HorizontalTextAlignment="Center"
            Text="Adjustments" />
</Grid>

Xamarin表单-将BoxView移至单元格底部

2 个答案: