How can I remove Margin from a Button in Xamarin Forms XAML?

Question

I'm totally new to Xamarin, so please be patient! Somehow Xamarin adds a mysterious Margin to all my Buttons and I don't know how to get rid of it.

Here is my Code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="RockStamp.CameraSearch_Scan">

    <StackLayout Orientation="Vertical" Padding="0" Spacing="0">
      <StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
      <Button  Text="Test" HeightRequest="50" WidthRequest="60" TextColor="#333333" x:Name="btnBack" VerticalOptions="Center" HorizontalOptions="Start" ></Button>
      <Label Text="Scan a..." FontSize="20" FontAttributes="Bold" BackgroundColor="{StaticResource BlueBackColor}" TextColor="White"  VerticalOptions="Start" HorizontalOptions="FillAndExpand" />
    </StackLayout>

    <Label Text="Steady now, we try to detect your..." FontSize="16"  VerticalOptions="Start" HorizontalOptions="Start" />

    <!-- Camera Placeholder -->
    <BoxView  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#eeeeee" ></BoxView>

    <StackLayout Orientation="Horizontal" Padding="0" Spacing="0">
      <Button Text="Cancel" TextColor="#333333" x:Name="btnCancel"  VerticalOptions="Center" HorizontalOptions="FillAndExpand" ></Button>
      <Button Text="Scan now!" TextColor="#333333" x:Name="btnScan"  VerticalOptions="Center" HorizontalOptions="FillAndExpand" ></Button>
    </StackLayout>

  </StackLayout >

</ContentPage>

Here an image:

You can clearly see the space around the Button. Where does it come from - and more important: How can I remove it?

Answer 1

The problem is that the default button background contains this margin. You have to set the BackgroundColor to a color and set the BorderWidth and BorderRadius to zero manually.

<Button
    BackgroundColor="Fuchsia"
    BorderRadius="0"
    BorderWidth="0"
    Text="Test"
    HeightRequest="50"
    WidthRequest="60"
    TextColor="#333333"
    x:Name="btnBack"
    Margin="0"
    VerticalOptions="Start"
    HorizontalOptions="Start" />

Answer 2

You may have fixed the problem :

The way I fixed this is to create a renderer on android to override the button on xamarin.

public class FixedMarginRenderer : ButtonRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            // remove default background image
            Control.Background = null;
            Control.SetBackgroundColor(Element.BackgroundColor.ToAndroid()); 
        }
    }

    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == "BackgroundColor")
        {
            // You have to set background color here again, because the background color can be changed later.
            Control.SetBackgroundColor(Element.BackgroundColor.ToAndroid());
        }
    }
} 

Answer 3

Just to add on to Sven-Michael Stübe's answer .

If none of your buttons require the Margin then create a Style or a custom control in your PCL (eg: MarginLessButton).

Answer 4

Setting BackgroundColor , BorderWidth , and BorderRadius manually does not work anymore. But you can use platform configuration to remove the padding. It is also necessary to remove the shadow otherwise there will be some vertical margin.

Try something like this:

using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;

namespace MyControls
{
    public class ButtonNoMargin : Xamarin.Forms.Button
    {
        public ButtonNoMargin() : base()
        {
           this.On<Android>().SetUseDefaultPadding(false);
           this.On<Android>().SetUseDefaultShadow(false);
        }
    }
}

For more information, see https://github.com/xamarin/Xamarin.Forms/pull/1935