Bug 34463 - StackLayout with Grids with Auto RowDefinitions inconsistently update layouts
Summary: StackLayout with Grids with Auto RowDefinitions inconsistently update layouts
Status: RESOLVED FIXED
Alias: None
Product: Forms
Classification: Xamarin
Component: iOS ()
Version: 1.5.0
Hardware: Macintosh Mac OS
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2015-09-30 16:33 UTC by victor.chelaru
Modified: 2017-08-30 18:16 UTC (History)
2 users (show)

Tags: ac, grid, layout
Is this bug a regression?: ---
Last known good build:


Attachments
Buttons overlap, they should not. (35.88 KB, image/png)
2015-09-30 16:33 UTC, victor.chelaru
Details


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:
Status:
RESOLVED FIXED

Description victor.chelaru 2015-09-30 16:33:04 UTC
Created attachment 13149 [details]
Buttons overlap, they should not.

I have reproduced this with a control case (which works properly) and a case which reproduces the bug.

To reproduce the bug:

1. Create a StackLayout. I placed mine in a ScrollView, but I'm not sure if that's required to reproduce teh bug
2. Create a for-loop which adds a grid with a single row that has an "Auto" height
3. Inside each grid, create a Button
4. Assign an event to each of the buttons so that when clicked, the button will increase in height

Expected behavior - the expansion of the buttons should cause the grids to also expand (due to their Auto height row definitions), so that the buttons do not overlap

Actual behavior - The first time a button is clicked, it will expand in size, but it will not shift the buttons under it downward. Clicking on the button again (causing it to expand in size again) results in the buttons shifting down correctly. It seems like only the first click doesn't work right. 

The following code will reproduce the bug:

	    public TestPage()
	    {
			var scrollView = new ScrollView ();
			this.Content = scrollView;
	        var stackLayout = new StackLayout();
			scrollView.Content = stackLayout;

			AddGridStackingTest (stackLayout);

	    }


		private void AddGridStackingTest(StackLayout stackLayout)
		{
			for (int i = 0; i < 10; i++)
			{
				Grid grid = new Grid ();
				grid.RowDefinitions = new RowDefinitionCollection {
					new RowDefinition{Height = GridLength.Auto}
				};
				var button = new Button ();
				button.BackgroundColor = Color.Black;
				button.Text = "Button " + i;
				button.Clicked += HandleButtonClicked;

				grid.Children.Add (button);

				stackLayout.Children.Add (grid);
			}
		}


	    private void HandleButtonClicked(object sender, EventArgs e)
	    {
			var button = sender as Button;
			button.HeightRequest = button.Height + 10;
	    }

The following code will stack correctly (notice that there are no grids in this case, just buttons:

	public class TestPage : ContentPage
	{
	    public TestPage()
	    {
			var scrollView = new ScrollView ();
			this.Content = scrollView;
	        var stackLayout = new StackLayout();
			scrollView.Content = stackLayout;

			AddGridStackingTest (stackLayout);

	    }


		private void AddGridStackingTest(StackLayout stackLayout)
		{
			for (int i = 0; i < 10; i++)
			{
				var button = new Button ();
				button.BackgroundColor = Color.Black;
				button.Text = "Button " + i;
				button.Clicked += HandleButtonClicked;

				stackLayout.Children.Add (button);
			}
		}


	    private void HandleButtonClicked(object sender, EventArgs e)
	    {
			var button = sender as Button;
			button.HeightRequest = button.Height + 10;
	    }
	}

See attached screenshots showing the state of the screen after one click.
Comment 1 victor.chelaru 2015-09-30 16:44:13 UTC
To add more information, it seems like anything causing 2 updates fixes the problem. That is, I changed the HandleButtonClicked method as follows:

	    private void HandleButtonClicked(object sender, EventArgs e)
	    {
			var button = sender as Button;
			button.HeightRequest = button.Height + 11;
			button.HeightRequest--;
	    }

Notice that the button's HeightRequest is set twice. Doing this causes the layout to work properly.
Comment 2 victor.chelaru 2017-03-28 22:34:03 UTC
I don't know if this has been fixed on iOS, but I just tested this with Xamarin Forms 2.3.2.127 on Android 5.1.1 and the bug did not reproduce.
Comment 3 David Ortinau [MSFT] 2017-08-30 18:16:18 UTC
Confirmed fixed on iOS using 2.4.0.269-pre2