Bug 41312 - my padding value is also applied as margin
Summary: my padding value is also applied as margin
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 2.3.0
Hardware: PC Windows
: --- normal
Target Milestone: ---
Assignee: Paul DiPietro [MSFT]
Depends on:
Reported: 2016-05-25 14:47 UTC by Dbl
Modified: 2017-06-20 13:54 UTC (History)
5 users (show)

Is this bug a regression?: ---
Last known good build:

reproduction project (2.03 MB, application/octet-stream)
2016-05-26 02:52 UTC, Dbl
drawing example (12.68 KB, image/png)
2016-05-26 02:53 UTC, Dbl
samescenarioinwpf (9.95 KB, image/png)
2016-05-27 18:46 UTC, Dbl
wpf example project (30.40 KB, application/octet-stream)
2016-05-27 18:48 UTC, Dbl

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.

Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:

Description Dbl 2016-05-25 14:47:20 UTC
The problem is, that as soon as i use a value for padding it is also being applied as margin. Judging by my code i cannot see why that would possibly be the case. Thus i guess the implementation of margin calculations isn't correct yet.

My layout is like this:

					<RowDefinition Height="Auto"></RowDefinition>
					<RowDefinition Height="*"></RowDefinition>
					<RowDefinition Height="Auto"></RowDefinition>
				<StackLayout Grid.Row="0" Spacing="0" BackgroundColor="Aqua">
					<ContentView Style="{StaticResource ContentViewTappableLabelInDrawer}">
						<controls:EnhancedLabel Style="{StaticResource LabelDrawerListHeader}" Text="FILTER" />
					<controls:EnhancedSwitch Padding="{StaticResource TappableThickness}" Text="Inaktive Standorte anzeigen"
					                         IsToggled="{Binding Path=IsConsideringInactive, Mode=OneWay}" />
					<controls:EnhancedSwitch Padding="{StaticResource TappableThickness}" Text="Wbs Elemente anzeigen"
					                         IsToggled="{Binding Path=IsConsideringWbs, Mode=OneWay}" />
					<controls:EnhancedLabel Style="{StaticResource LabelDrawerListHeader}" Text="{Binding Path=IsConsideringInactive, Mode=OneWay}" />
					<controls:EnhancedLabel Style="{StaticResource LabelDrawerListHeader}" Text="{Binding Path=IsConsideringWbs, Mode=OneWay}" />

				<ContentView Grid.Row="2" Style="{StaticResource ContentViewTappableLabelInDrawer}" extensions:GestureExtensions.TapCommand="{Binding Path=GotoHomeCommand}">
					<controls:EnhancedLabel Style="{StaticResource LabelDrawerListHeader}" Text="HAUPTMENÜ"  />

This is my declaration of EnhancedSwitch:


	public class EnhancedSwitch : TemplatedView
		#region IsToggled

		public static BindableProperty IsToggledProperty = BindableProperty.Create(nameof(IsToggled), typeof(bool), typeof(EnhancedSwitch), default(bool), defaultBindingMode:BindingMode.TwoWay);

		public bool IsToggled
			get { return (bool) GetValue(IsToggledProperty); }
			set { SetValue(IsToggledProperty, value); }

		#endregion IsToggled

		#region Text

		public static BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(EnhancedSwitch), default(string));

		public string Text
			get { return (string) GetValue(TextProperty); }
			set { SetValue(TextProperty, value); }

		#endregion Text

		#region SwitchStyle

		public static BindableProperty SwitchStyleProperty = BindableProperty.Create(nameof(SwitchStyle), typeof(Style), typeof(EnhancedSwitch), default(Style));

		public Style SwitchStyle
			get { return (Style) GetValue(SwitchStyleProperty); }
			set { SetValue(SwitchStyleProperty, value); }

		#endregion SwitchStyle

		#region TextStyle

		public static BindableProperty TextStyleProperty = BindableProperty.Create(nameof(TextStyle), typeof(Style), typeof(EnhancedSwitch), default(Style));

		public Style TextStyle
			get { return (Style) GetValue(TextStyleProperty); }
			set { SetValue(TextStyleProperty, value); }

		#endregion TextStyle

		protected override void OnBindingContextChanged()
			foreach (var child in this.GetChildren())
				SetInheritedBindingContext(child, BindingContext);

		protected override void OnChildAdded(Element child)
			SetInheritedBindingContext(child, BindingContext);

and in app.xaml:

			<Style TargetType="{x:Type controls:EnhancedSwitch}">
					<Setter Property="ControlTemplate">
								<Grid Padding="{TemplateBinding Padding}" Margin="{TemplateBinding Margin}">
										<ColumnDefinition Width="*"></ColumnDefinition>
										<ColumnDefinition Width="Auto"></ColumnDefinition>
									<Label Grid.Column="0" Text="{TemplateBinding Text}" Style="{TemplateBinding TextStyle}"></Label>
									<Switch Grid.Column="1" IsToggled="{TemplateBinding IsToggled}" Style="{TemplateBinding SwitchStyle}" ></Switch>
Comment 1 Peter Collins 2016-05-25 21:27:04 UTC
Hello, could you please attach a small solution which reproduces the behavior you're describing? Also, environment information including the Forms package you're using would be beneficial.
Comment 2 Dbl 2016-05-26 02:52:22 UTC
Created attachment 16105 [details]
reproduction project

project attachment Xamarin.Forms.
Comment 3 Dbl 2016-05-26 02:53:15 UTC
Created attachment 16106 [details]
drawing example
Comment 4 Dbl 2016-05-26 02:59:32 UTC
Hello Peter,

the attached image is the result of the project i have also attached.

switch 1: renders the way i would expect it to
switch 2: margin seems ok, padding appears to be 30
switch 3: padding looks like it's 20. margin seems ok
switch 4: margin seems ok. however i am getting some sort of ghost padding here.

Mind you i'm testing this now from at home - I cannot check android/ios (which however indicated the same flawed layouting in my production project) but i am guessing it's still rendering incorrectly on other platforms.

As you can see on the NormalPage Padding, Margin do seem to work fine on the "NormalPage".

I hope this helps detecting/fixing the rendering issue.
Comment 5 Paul DiPietro [MSFT] 2016-05-27 15:41:08 UTC
If I'm understanding correctly, what's going on is that because the TemplateView inherits from Layout (which itself inherits from a View) which has a Padding value, you're getting a double padding from the layout having a padding as well as the Grid inside of it. Compare the appearance when you use/don't use the padding value on your Grid. Is this correct? Otherwise, highlighting the exact portion of the view's screenshot that looks off by your expectations helps everything be more clear.
Comment 6 Dbl 2016-05-27 18:45:38 UTC
Your explanation of why it renders this way indeed seems correct. I will attach a wpf example of this to indicate the same scenario layed out by wpf. As you can see here, the wpf equivalent of TemplatedView does not behave that way because of inheritance. In WPF, unless the root element of a control template forwards padding/margin values, those values will not be applied. It would only make sense to align the behaviours.

Uploads will follow shortly.
Comment 7 Dbl 2016-05-27 18:46:59 UTC
Created attachment 16122 [details]
Comment 8 Dbl 2016-05-27 18:48:33 UTC
Created attachment 16123 [details]
wpf example project
Comment 9 Dbl 2016-06-03 23:57:37 UTC
is there any more info you require?
Comment 10 Paul DiPietro [MSFT] 2017-06-20 13:54:17 UTC
For upkeep, I don't believe the changes here would be made because they would break existing behavior, so this will be closed.