即使在应用间距和填充之后，Xamarin Form 也会在 BoxView 和 Button 之间保留空间

Question

我在 Xamarin 表单中有以下 ContentPage。它有一个网格。我已经为网格申请了ColumnSpacing="0" RowSpacing="0" Padding="0"。我已经为 BoxView 和 Button 申请了Margin="0"。 BoxView 和 Button 之间仍然有空间。

避免这种不必要的间距的最佳方法是什么？

XAML

<Grid x:Name="controlGrid" ColumnSpacing="0" RowSpacing="0" Padding="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="4*" />
        <RowDefinition Height="4*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>


    <!--Row 1-->
    <views:SKCanvasView PaintSurface="OnSecondPainting"  Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
    </views:SKCanvasView>

    <!--Row 2-->
    <Grid x:Name="secondGrid"  Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ColumnSpacing="0" RowSpacing="0" Padding="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" />
        <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Green" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/>
        <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/>
        <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Orange" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/>

        <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Crimson" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" />
        <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Cyan" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/>
        <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/>
        <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Orange" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/>


        <Button x:Name="ClickMe1" Text="ClickMe 1" Grid.Row="0" Grid.Column="0"  Margin="0" />
        <Button x:Name="ClickMe2" Text="ClickMe 2" Grid.Row="0" Grid.Column="1" Margin="0" />
    </Grid>

</Grid>

截图

Answer 1

按钮具有默认填充。因此，当您尝试将按钮对齐在一起时，总会有空间。要么你必须给 -ve 边距，否则你必须使用带有手势的 stacklayout/boxview 而不是按钮来执行点击命令。

检查一下：

        <Grid x:Name="controlGrid" ColumnSpacing="0" RowSpacing="0" Padding="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="4*" />
            <RowDefinition Height="4*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!--Row 2-->
        <Grid x:Name="secondGrid"  Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ColumnSpacing="0" RowSpacing="0" Padding="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" />
            <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Green" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/>
            <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/>
            <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Orange" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/>

            <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Crimson" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" />
            <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Cyan" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/>
            <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/>
            <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Orange" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/>
            <StackLayout  Grid.Row="0"  Grid.Column="0" HorizontalOptions="FillAndExpand" Margin="1" VerticalOptions="FillAndExpand" BackgroundColor="Gray">
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding Button1Command}"/>
                </StackLayout.GestureRecognizers>
                <Label Text="Click Me1" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
            </StackLayout>
            <StackLayout Grid.Row="0"  Grid.Column="1" HorizontalOptions="FillAndExpand" Margin="1" VerticalOptions="FillAndExpand"  BackgroundColor="Gray">
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding Button1Command}"/>
                </StackLayout.GestureRecognizers>
                <Label Text="Click Me2"  HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
            </StackLayout>
        </Grid>
    </Grid>