[Enhancement] Make all default spacings / margins zero

[sthewissen]

Summary

The current out of the box controls in Xamarin.Forms have a lot of odd defaults set when it comes to their positioning/sizing. RowSpacing on Grid, Padding on Frame to name just two, but it all feels rather arbitrarily chosen. Personally I would opt for default values of zero on all of these.

API Changes

This would require changing the default values on all of these.

Intended Use Case

When positioning elements and tinkering with design, you tend to have to tweak a lot of these things and explicitly set them to zero to get your design to match in pixel-perfect fashion. To me it feels more natural that setting a value to influence position/size should always explicitly mean something, instead of resetting a default value.

Obviously, doing this in Xamarin.Forms will absolutely obliterate backwards compatibility, but I feel like starting fresh with MAUI definitely would be a nice opportunity to at least consider it.

[Nirmal4G]

The defaults are all zero. Only the styles set them to optimal values. It's always been that way since WPF till UWP!

[sthewissen]

Ok, so the technical default might already be zero (I haven't checked), but even if they are, these styles you mention happen somewhere outside of my app. I don't set these values so to me as a user they are considered defaults.

The problem I have with these "optimal values" is that it's very unclear what I should expect. If there's a random margin somewhere that you can't explain by looking at your own code you will have to go through all the controls to figure out which odd default is causing it. There's no easy way of knowing all of these defaults except digging into framework code.

If everything is zero by default you know exactly what might be causing any layouting issues because you must've explicitly set it somewhere in your own code. It's not going to be some magic value set by the platform that you don't know about.

Also, the fact that it's been that way in WPF or UWP isn't really relevant here. This is a separate framework that lets you target those platforms. It doesn't mean it has to "do what those platforms do" by default. You could perhaps add an opt-in option to "set optimal defaults" but to be honest I would just make people set actual values for things they want to change.

Things like this also apply to e.g. Frame having a shadow by default 😅

[GalaxiaGuy]

The defaults aren't all 0. Spacing on StackLayout for example defaults to 6.

maui/System.Maui.Core/StackLayout.cs

Line 12 in c7e2c55

public static readonly BindableProperty SpacingProperty = BindableProperty.Create(nameof(Spacing), typeof(double), typeof(StackLayout), 6d,

[dhindrik]

I agree that it should be zero, it can be very confusing that that are not. Especially when we are talking about Spacing.

[Nirmal4G]

@GalaxiaGuy Then, they really should move all these to style definitions.

[ChaseFlorell]

I can't put enough positive emoji's on this thread. Almost all of my apps look like this

<Style TargetType="Layout" x:Key="Wrapper" ApplyToDerivedTypes="True">
    <Setter Property="Margin" Value="0" />
</Style>
<!-- -->
<Grid Style="{StaticResource Wrapper}"></Grid>

For compatibility for legacy migrated apps, they might need something like

System.MAUI.SetFlags("Layout_UseLegacySpacing");

[dhindrik]

I don't think we should add "Legacy flags". One of the reasons to not call it Xamarin.Forms are that it will be easier to make breaking changes. So I think most people will be more ok with breaking changes when they migrate to MAUI.

[ChaseFlorell]

I don't think we should add "Legacy flags". One of the reasons to not call it Xamarin.Forms are that it will be easier to make breaking changes. So I think most people will be more ok with breaking changes when they migrate to MAUI.

This is definitely a fair point, but they did say on the stream that we could do a Find/Replace on the namespace and it would be easy to migrate.

Changing something like this would of course break everyone's layouts.

[PureWeen]

No Legacy Flags!! No Legacy Flags!! No Legacy Flags!!
I am a fan of figuring out and establishing margins/padding rules

I would also like it if native padding propagated to the cross platform elements or all padding was just additive/subtractive.

Right now it's a bit random whether setting padding just replaces or not.

For example the LabelRenderer just replaces padding

SetPadding(
				(int)Context.ToPixels(Element.Padding.Left),
				(int)Context.ToPixels(Element.Padding.Top),
				(int)Context.ToPixels(Element.Padding.Right),
				(int)Context.ToPixels(Element.Padding.Bottom));

Whereas the button is additive.

var defaultPadding = _preserveInitialPadding && _defaultPaddingPix.HasValue
				? _defaultPaddingPix.Value
				: new Thickness();

			view.SetPadding(
				(int)(Context.ToPixels(padding.Left + adjustment) + defaultPadding.Left),
				(int)(Context.ToPixels(padding.Top + adjustment) + defaultPadding.Top),
				(int)(Context.ToPixels(padding.Right + adjustment) + defaultPadding.Right),
				(int)(Context.ToPixels(padding.Bottom + adjustment) + defaultPadding.Bottom));

Combing through margin/padding etc.. to make it more consistent I think is a great idea!!

[ChaseFlorell]

No Legacy Flags!! No Legacy Flags!! No Legacy Flags!!

RELAX SHANE!!!!!!!!! 😂 It's more the idea that if you change this thing, and tell users "it's as easy as find/replace" to migrate, then you're going to piss people off.

There needs to be a sold approach to bridging the gap OR you just tell people, migrated layouts will be buggered because we got it wrong in Forms.

[dhindrik]

I think it is relevant that native padding is propagated. But additive seems odd to me. I have been frustrated with padding for buttons many times.

And maybe padding and spacing should be handled differently. I very often use to set spacing to zero.

[ChaseFlorell]

I have been frustrated with padding for buttons many times.

Button padding in Forms is infuriating. I needed to add a hyperlink style button but still wanted to maintain the platform specific background effects when touched... iOS does it by default, and Android is next to impossible... not to mention that the button is all UPPERCASE text by default.

I personally like how Flutter is giving you the power to choose the style and then make it consistent across all platforms. Perhaps we could have a base design system that the user chooses, and then they can style from there?

// use the material design system as a base starting point
System.MAUI.Visual.Material.Init();

// user the cupertino design system as a base starting point
System.MAUI.Visual.Cupertino.Init(); // or maybe HIG.Init();

// use the windows / uwp / ??? design system as a base starting point
System.MAUI.Visual.Windows.Init();

[saint4eva]

Fluent

[J-Swift]

I thumbs downed a comment upstream (re: No Legacy Flags) and just wanted to provide context:

I feel pretty strongly that its important to provide affordances like legacy flags will provide to ensure that the cost and impact of migration is minimized. If you really want to have a successful shift of the entire XF ecosystem, then the initial cost has to be as low as possible. Once v1 hits then sure phase out the legacy flags over time in future releases, but dont let idealism get in the way of pragmatism.

As far as this specific issue goes, 100% agree that not having things be 0-valued by default has caused me a lot of frustration when implementing designs. In a way, its similar to why reset.css is used so often.