Xamarin Form retains space between BoxView and Button even after applying spacing and padding

Question

I have following ContentPage in Xamarin Forms. It has a grid. I have applied ColumnSpacing="0" RowSpacing="0" Padding="0" for grid. And I have applied Margin="0" for BoxView and Button. Still there is space between BoxView and Button.

What is the best way to avoid this unwanted spacing?

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>

Screenshot

Answer 1

Button has a default padding.So there will be space always when you try to align buttons together. Either you have to give -ve margin or else instead of button you have to use stacklayout/boxview with gesture for tap commands.

Check this:

        <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>