如何在XAML同一行放置多个元素并消除横竖布局间隙

解决方案 #

导致间隙的核心原因是XAML中Grid控件默认自带非0的列间距/行间距，你可以按以下步骤修改：

• 给外层Grid显式设置ColumnSpacing="0"和RowSpacing="0"，关闭默认的单元格间距
• 把BoxView的VerticalOptions从FillAndExpand改为Fill，避免多余的自动空间分配
• 可以额外给两个Label设置Margin="0"，关闭Label的默认外边距

修改后的完整代码如下：

<Grid Margin="0" ColumnSpacing="0" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label x:Name="utente" Padding="10, 0, 0, 0" Margin="0" Grid.Row="0" Grid.Column="0" Text="Profilo + icona" FontSize="Large" TextColor="White"></Label>
    <Label x:Name="lblClick" Padding="0, 0, 10, 0" Margin="0" Grid.Row="0" Grid.Column="2" Text="Logout" FontSize="Large" HorizontalOptions="End" TextColor="White">
    </Label>
    <BoxView Grid.Row="0" Grid.Column="1" Margin="0" BackgroundColor="White" HorizontalOptions="Fill" VerticalOptions="Fill"></BoxView>
</Grid>

如果修改后还有间隙，可以把RowDefinition的Height从*改为Auto或者固定数值（比如Height="40"），进一步固定行高避免自适应导致的空隙。

内容的提问来源于stack exchange，提问作者user16937336