Xamarin Forms如何消除两个Grid元素之间的布局间隙

问题原因 #

两个Grid之间的间隙是外层StackLayout的默认子元素间距导致的，Xamarin.Forms中StackLayout的Spacing属性默认值为6，该优先级高于子元素的Margin设置，所以你给两个Grid设置Margin="0"也不会生效。

解决方法 #

方案1（最推荐）：直接修改外层StackLayout的间距

给外层StackLayout添加Spacing="0"属性即可：

<StackLayout x:DataType="auctions:AuctionViewModel" Spacing="0">
    <!-- 原有内部代码不变 -->
</StackLayout>

方案2：用负Margin抵消间距（适合不想修改全局StackLayout间距的场景）

给两个相邻Grid其中一个添加负的底部/顶部Margin抵消默认间距：

<!-- 给第一个Grid加负的底部Margin -->
<Grid BackgroundColor="#444" Padding="2" Margin="0,0,0,-6">

或者

<!-- 给第二个Grid加负的顶部Margin -->
<Grid BackgroundColor="#222" Padding="10,5" Margin="0,-6,0,0">

方案3：替换布局容器

将外层StackLayout替换为Grid，把两个Grid分别放在Grid的两行中，Grid默认的行间距为0，不会出现额外间隙：

<Grid x:DataType="auctions:AuctionViewModel">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" BackgroundColor="#444" Padding="2" Margin="0">
        <!-- 原有第一个Grid的内容 -->
    </Grid>
    <Grid Grid.Row="1" BackgroundColor="#222" Padding="10,5" Margin="0">
        <!-- 原有第二个Grid的内容 -->
    </Grid>
</Grid>

额外排查点 #

如果修改后仍有间隙，可以检查你定义的NoStyle按钮样式是否设置了额外的Margin/Padding，导致第一个Grid被撑出额外的底部边距。

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