Xamarin.forms: [Enhancement] Padding on Buttons

[samhouts]

Rationale

Buttons do not currently have a Padding property, forcing some users to create hacks, custom renderers, or effects to achieve the desired layout.

Implementation

Add bindable property to Button & make Button implement IPaddingElement:

public static readonly BindableProperty PaddingProperty = PaddingElement.PaddingProperty;

Renderers will need to be updated accordingly.

Expected Result

Android

• Button has no padding by default.
• Altering the Padding on a Button will change the size of the Button relative to the position of the Text.

iOS

See Android

UWP

See Android

Implications for CSS

Button will now support padding.

Backward Compatibility

Since we are adding new properties, there should be no compatibility problems as long as:

1. We ensure that an Button's padding defaults to 0, as is the expected behavior now,
2. We ensure that any Effects or Custom Renderers that may have been created to produce this behavior take precedence over any values that we set, to the best of our ability.
3. We ensure that this does not conflict with the new TextAlignment properties on Buttons.

Third party renderers will need to be updated to ensure that this functionality is officially supported.

Difficulty : Medium

[llevera]

I'm keen to take this on, having recently been in need of this and am aware of common work arounds to check the compatibility of coexisting with

[llevera]

@davidortinau Just confirming I am looking at this one

[llevera]

This appears an excellent basis for this change https://stackoverflow.com/a/36067371

[andreinitescu]

I wish more controls have padding...

[jassmith]

@llevera just confirming you are still looking into this :) If not we can move it back to the ready for work column

[arevellfraedom]

Yep, still working on it (ableit sporadically). First PR shouldn't be far away

[jassmith]

Awesome thanks!

[jerone]

Some logic for elements with padding has already been setup up in https://github.com/xamarin/Xamarin.Forms/pull/1276, where it is implemented in Frame, Layout and Page.

Wondering if IPaddingElement should/could be extended to all View/VisualElement's... to be in sync with Margin.

[jassmith]

Not everything needs a padding. What does the padding a Switch do? You mgiht think it makes sense to just generate blank space around the switch, but thats more of a Margin job. Margins work externally to the control, but there is nothing internal to a switch on which the Padding could work...

[andreinitescu]

@jassmith The same thing which UWP's Padding property does on ToggleSwitch. I think the best explanation is in the remarks of the Control's Padding property:

Each control might apply this property differently based on its visual template. This property only affects a control whose template uses the Padding property as a parameter. On other controls, this property has no effect

Of course, Xamarin has no template for Switch but I think the idea should be similar. Padding on some Xamarin Forms control could just not do anything.

I wish in Xamarin Forms Padding property was on View. I still remember the dark old days when there was no Margin on controls and everyone (I swear, not me!) was wrapping controls in a ContentView.

[llevera]

This is a little devil's advocate, but surely the padding of any control would be apparent if a background colour is set (and can be applied in a reasonable way)?

[llevera]

BTW, this change is relatively simple except for the fact that image buttons are implemented by manipulating the insets/paddings (in non-trivial ways, esp for Android). So doing this change while maintaining that functionality is the hard bit.

[andreinitescu]

By the way, this guy things the same, albeit it's a very old article back in the dark days when Margin didn't exist on View (_shrugging_) http://blog.tpcware.com/2014/09/xamarin-xaml-vs-microsoft-xaml-the-devil-is-in-the-details/

[llevera]

@jassmith It's time I withdrew from this issue. I'm not going to be able to find the time to finish this.

[weitzhandler]

Regarding Button in Android, this is a total annoyance and a must - there is no way to get rid of the annoying padding on Android. See #2220.
But I'd wish Padding to be added to View rather than just to Button.

I also opened a UserVoice suggesion before discovering this post.

[weitzhandler]

@paymicro I can add the required work to UWP if you want me to.

[weitzhandler]

Thank you @paymicro, @samhouts, and @rmarinho you guys are awesome ❤️

[Goldstrike]

Does this work in the latest published version?
I've tested it but I still not get a Padding parameter...

[TFreudi1]

It is still not working, please Reopen it

VS 2017 15.8.2

gives
Unhandled Exception:

Xamarin.Forms.Xaml.XamlParseException: Position 24:21. Cannot assign property "Padding": Property does not exists, or is not assignable, or mismatching type between value and property

[weitzhandler]

1. U sure you updated Xamarin.Forms package in your projects?
2. Try cleaning solution and obj folders before rebuild

[TFreudi1]

I did all this, Xamarin.Forms Version is 3.1.0.697729, but there is no "Padding" parameter in Button.

[TFreudi1]

I did all this, I have Xamarin.Forms version 3.1.0.697729, VS 2017 15.8.2, just created a new App and still intellisense did’nt suggest Padding and I get an exception if I use it.

Von: Shimmy [mailto:[email protected]]
Gesendet: Samstag, 1. September 2018 18:23
An: xamarin/Xamarin.Forms [e-mail]
Cc: TFreudi1 [e-mail]; Comment [e-mail]
Betreff: Re: [xamarin/Xamarin.Forms] [Enhancement] Padding on Buttons (#1702)

1. U sure you updated Xamarin.Forms package in your projects?
2. Try cleaning solution and obj folders before rebuild

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/xamarin/Xamarin.Forms/issues/1702#issuecomment-417870435 , or mute the thread https://github.com/notifications/unsubscribe-auth/AEhQaY2UMqe3K8qURdjqUc13J_4P3-Exks5uWrRtgaJpZM4RuyYa . https://github.com/notifications/beacon/AEhQaa0ANiSqrYInQay6VQNxaUokq2OMks5uWrRtgaJpZM4RuyYa.gif

[arevellfraedom]

This issue was closed, not merged. The actual change that implemented this is https://github.com/xamarin/Xamarin.Forms/pull/2426 which will be included in 3.2

[TFreudi1]

Well OK, in Xamarin.Forms 3.2 Pre it works like charme, thank you guys, good work.

[charlesroddie]

Padding doesn't work on Android. Even if set to Thickness(0.), padding is very large on Android.

Others have encountered the same issue: https://stackoverflow.com/a/44615878/4903561

[Tommigun1980]

I am unable to remove padding around buttons, even when setting Padding to 0. My use case is to have a font image button inside a chip. I have for now added explicit width and height requests to it, but it will probably break if the user has non-standard font size accessibility turned on.

How does one remove all padding from a button? I do want to use a button instead of a label with a tap listener, because I do want the other benefits of a button (automatic dimming when tapped etc).

Thank you!

[Tommigun1980]

@samhouts Ping in case this gets lost in the shuffle :)