CODEWITHSUNDEEP
buttonxamarinxamarin.androidxamarin.formsmargin
j__
j__

Reputation: 63

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

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: enter image description here

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

Upvotes: 3

Views: 7519

Answers (4)

Pavel
Pavel

Reputation: 1

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

Upvotes: 0

LittleFunny
LittleFunny

Reputation: 8375

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());
        }
    }
}

Upvotes: 6

Sven-Michael St&#252;be
Sven-Michael St&#252;be

Reputation: 14750

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

No more border

Upvotes: 7

Rohit Vipin Mathews
Rohit Vipin Mathews

Reputation: 11787

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

Upvotes: 0

Related Questions