Removing spacing between Xamarin.Forms Grid Cells - xamarin

Question

I am struggling with removing spacing between grid cells. I have tried using ColumnSpacing="0" and RowSpacing = "0",however it does not make grid spaceless.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamarinPradmenys.CalculatorPage">
<AbsoluteLayout>
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,0.25" AbsoluteLayout.LayoutFlags="All" >
<Label x:Name="live" FontSize="20"/>
<Label x:Name="rez" FontSize="15"/>
</StackLayout>
<Grid RowSpacing="0" ColumnSpacing="0" AbsoluteLayout.LayoutBounds="0,1,1,0.75" AbsoluteLayout.LayoutFlags="All">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0" Text="mc" />
<Button Grid.Column="1" Grid.Row="0" Text="m+"/>
<Button Grid.Column="2" Grid.Row="0" Text="m-"/>
<Button Grid.Column="3" Grid.Row="0" Text="mr"/>
<Button Grid.Column="0" Grid.Row="1" Text="C"/>
<Button Grid.Column="1" Grid.Row="1" Text="/"/>
<Button Grid.Column="2" Grid.Row="1" Text="X"/>
<Button Grid.Column="3" Grid.Row="1" Text="Del"/>
<Button Grid.Column="0" Grid.Row="2" Text="7"/>
<Button Grid.Column="1" Grid.Row="2" Text="8"/>
<Button Grid.Column="2" Grid.Row="2" Text="9"/>
<Button Grid.Column="3" Grid.Row="2" Text="-"/>
<Button Grid.Column="0" Grid.Row="3" Text="4"/>
<Button Grid.Column="1" Grid.Row="3" Text="5"/>
<Button Grid.Column="2" Grid.Row="3" Text="6"/>
<Button Grid.Column="3" Grid.Row="3" Text="+"/>
<Button Grid.Column="0" Grid.Row="4" Text="1"/>
<Button Grid.Column="1" Grid.Row="4" Text="2"/>
<Button Grid.Column="2" Grid.Row="4" Text="3"/>
<Button Grid.Column="3" Grid.Row="4" Grid.RowSpan="2" Text="="/>
<Button Grid.Column="0" Grid.Row="5" Text="%" />
<Button Grid.Column="1" Grid.Row="5" Text="0"/>
<Button Grid.Column="2" Grid.Row="5" Text=","/>
</Grid>
</AbsoluteLayout>
</ContentPage>
That I get is:
As you can see there are spaces between every row and column. Do you have any suggestions?
Do you have anything what could help me?

Answer 1

Because material design, each button has shadows but if you add a background colour, you'll see its true size :
Code
<Page.Resources>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="#d6d7d7" />
</Style>
</Page.Resources>
<AbsoluteLayout>
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,0.25" AbsoluteLayout.LayoutFlags="All">
<Label x:Name="live" FontSize="20" />
<Label x:Name="rez" FontSize="15" />
</StackLayout>
<Grid
AbsoluteLayout.LayoutBounds="0,1,1,0.75"
AbsoluteLayout.LayoutFlags="All"
ColumnSpacing="0"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
Grid.Row="0"
Grid.Column="0"
Text="mc" />
<Button
Grid.Row="0"
Grid.Column="1"
Text="m+" />
<Button
Grid.Row="0"
Grid.Column="2"
Text="m-" />
<Button
Grid.Row="0"
Grid.Column="3"
Text="mr" />
<Button
Grid.Row="1"
Grid.Column="0"
Text="C" />
<Button
Grid.Row="1"
Grid.Column="1"
Text="/" />
<Button
Grid.Row="1"
Grid.Column="2"
Text="X" />
<Button
Grid.Row="1"
Grid.Column="3"
Text="Del" />
<Button
Grid.Row="2"
Grid.Column="0"
Text="7" />
<Button
Grid.Row="2"
Grid.Column="1"
Text="8" />
<Button
Grid.Row="2"
Grid.Column="2"
Text="9" />
<Button
Grid.Row="2"
Grid.Column="3"
Text="-" />
<Button
Grid.Row="3"
Grid.Column="0"
Text="4" />
<Button
Grid.Row="3"
Grid.Column="1"
Text="5" />
<Button
Grid.Row="3"
Grid.Column="2"
Text="6" />
<Button
Grid.Row="3"
Grid.Column="3"
Text="+" />
<Button
Grid.Row="4"
Grid.Column="0"
Text="1" />
<Button
Grid.Row="4"
Grid.Column="1"
Text="2" />
<Button
Grid.Row="4"
Grid.Column="2"
Text="3" />
<Button
Grid.Row="4"
Grid.RowSpan="2"
Grid.Column="3"
Text="=" />
<Button
Grid.Row="5"
Grid.Column="0"
Text="%" />
<Button
Grid.Row="5"
Grid.Column="1"
Text="0" />
<Button
Grid.Row="5"
Grid.Column="2"
Text="," />
</Grid>
</AbsoluteLayout>

Answer 2

You could do this via custom renderer.
MyButton.cs
public class MyButton : Button
{
}
MyButtonRenderer.cs
[assembly: ExportRenderer(typeof(MyButton), typeof(MyButtonRenderer))]
namespace XamarinDemo.Droid
{
public class MyButtonRenderer : Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer
{
public MyButtonRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.Background = null;
Control.SetBackgroundColor(Android.Graphics.Color.Gray);
}
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == "BackgroundColor")
{
Control.SetBackgroundColor(Android.Graphics.Color.Gray);
}
}
}
}
Xaml
<AbsoluteLayout>
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,0.25" AbsoluteLayout.LayoutFlags="All">
<Label x:Name="live" FontSize="20" />
<Label x:Name="rez" FontSize="15" />
</StackLayout>
<Grid
AbsoluteLayout.LayoutBounds="0,1,1,0.75"
AbsoluteLayout.LayoutFlags="All"
ColumnSpacing="0"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<local:MyButton
Grid.Row="0"
Grid.Column="0"
Text="mc" />
<local:MyButton
Grid.Row="0"
Grid.Column="1"
Text="m+" />
<local:MyButton
Grid.Row="0"
Grid.Column="2"
Text="m-" />
<local:MyButton
Grid.Row="0"
Grid.Column="3"
Text="mr" />
<local:MyButton
Grid.Row="1"
Grid.Column="0"
Text="C" />
<local:MyButton
Grid.Row="1"
Grid.Column="1"
Text="/" />
<local:MyButton
Grid.Row="1"
Grid.Column="2"
Text="X" />
<local:MyButton
Grid.Row="1"
Grid.Column="3"
Text="Del" />
<local:MyButton
Grid.Row="2"
Grid.Column="0"
Text="7" />
<local:MyButton
Grid.Row="2"
Grid.Column="1"
Text="8" />
<local:MyButton
Grid.Row="2"
Grid.Column="2"
Text="9" />
<local:MyButton
Grid.Row="2"
Grid.Column="3"
Text="-" />
<local:MyButton
Grid.Row="3"
Grid.Column="0"
Text="4" />
<local:MyButton
Grid.Row="3"
Grid.Column="1"
Text="5" />
<local:MyButton
Grid.Row="3"
Grid.Column="2"
Text="6" />
<local:MyButton
Grid.Row="3"
Grid.Column="3"
Text="+" />
<local:MyButton
Grid.Row="4"
Grid.Column="0"
Text="1" />
<local:MyButton
Grid.Row="4"
Grid.Column="1"
Text="2" />
<local:MyButton
Grid.Row="4"
Grid.Column="2"
Text="3" />
<local:MyButton
Grid.Row="4"
Grid.RowSpan="2"
Grid.Column="3"
Text="=" />
<local:MyButton
Grid.Row="5"
Grid.Column="0"
Text="%" />
<local:MyButton
Grid.Row="5"
Grid.Column="1"
Text="0" />
<local:MyButton
Grid.Row="5"
Grid.Column="2"
Text="," />
</Grid>
</AbsoluteLayout>