Bug 59383 - VerticalOptions = StartAndExpands not expanding as expected for ListView on Android
Summary: VerticalOptions = StartAndExpands not expanding as expected for ListView on A...
Status: CONFIRMED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 2.4.0
Hardware: PC Windows
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2017-09-11 11:09 UTC by John Hardman
Modified: 2018-02-26 18:34 UTC (History)
3 users (show)

Tags: Android, ListView, VerticalOptions, StartAndExpands, ac
Is this bug a regression?: ---
Last known good build:

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 for Bug 59383 on Developer Community or GitHub if you have new information to add and do not yet see a matching new report.

If the latest results still closely match this report, you can use the original description:

  • Export the original title and description: Developer Community HTML or GitHub Markdown
  • Copy the title and description into the new report. Adjust them to be up-to-date if needed.
  • Add your new information.

In special cases on GitHub you might also want the comments: GitHub Markdown with public comments

Related Links:
Status:
CONFIRMED

Description John Hardman 2017-09-11 11:09:46 UTC
On Android, using XF 2.3.4.270, using a ListView with VerticalOptions set to LayoutOptions.StartAndExpand, the expand does not behave as expected. With more than enough list data to fill the height of the page, on iOS and UWP StartAndExpand will fill the vertical space, but on Android the ListView is not fully expanded.

Add the following code to a XF project, and push an instance of AndroidListViewClippingBugPageView onto the NavigationStack. On Android, the ListView does not expand to fill the space available, even though the list contains more than enough data to do so.


using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace ViewsUsingXamarinForms
{
	class Person
	{
		public Person(string name, DateTime birthday, Color favoriteColor)
		{
			this.Name = name;
			this.Birthday = birthday;
			this.FavoriteColor = favoriteColor;
		}

		public string Name { private set; get; }

		public DateTime Birthday { private set; get; }

		public Color FavoriteColor { private set; get; }
	};

	public class AndroidListViewClippingBugPageView : ContentPage
	{
		public AndroidListViewClippingBugPageView()
		{
			// Define some data.
			List<Person> people = new List<Person>
			{
				new Person("Abigail", new DateTime(1975, 1, 15), Color.Aqua),
				new Person("Bob", new DateTime(1976, 2, 20), Color.Black),
				new Person("Cathy", new DateTime(1977, 3, 10), Color.Blue),
				new Person("David", new DateTime(1978, 4, 25), Color.Fuschia),
				new Person("Eugenie", new DateTime(1979, 5, 5), Color.Gray),
				new Person("Freddie", new DateTime(1980, 6, 30), Color.Green),
				new Person("Greta", new DateTime(1981, 7, 15), Color.Lime),
				new Person("Harold", new DateTime(1982, 8, 10), Color.Maroon),
				new Person("Irene", new DateTime(1983, 9, 25), Color.Navy),
				new Person("Jonathan", new DateTime(1984, 10, 10), Color.Olive),
				new Person("Kathy", new DateTime(1985, 11, 20), Color.Purple),
				new Person("Larry", new DateTime(1986, 12, 5), Color.Red),
				new Person("Monica", new DateTime(1975, 1, 5), Color.Silver),
				new Person("Nick", new DateTime(1976, 2, 10), Color.Teal),
				new Person("Olive", new DateTime(1977, 3, 20), Color.White),
				new Person("Pendleton", new DateTime(1978, 4, 10), Color.Yellow),
				new Person("Queenie", new DateTime(1979, 5, 15), Color.Aqua),
				new Person("Rob", new DateTime(1980, 6, 30), Color.Blue),
				new Person("Sally", new DateTime(1981, 7, 5), Color.Fuschia),
				new Person("Timothy", new DateTime(1982, 8, 30), Color.Green),
				new Person("Uma", new DateTime(1983, 9, 10), Color.Lime),
				new Person("Victor", new DateTime(1984, 10, 20), Color.Maroon),
				new Person("Wendy", new DateTime(1985, 11, 5), Color.Navy),
				new Person("Xavier", new DateTime(1986, 12, 30), Color.Olive),
				new Person("Yvonne", new DateTime(1987, 1, 10), Color.Purple),
				new Person("Zachary", new DateTime(1988, 2, 5), Color.Red)
			};

			// Create the ListView.
			ListView listView = new ListView
			{
				BackgroundColor = Color.White,
				ClassId = "KCI_ListView",
				HasUnevenRows = true,
				WidthRequest = 120,
				HorizontalOptions = LayoutOptions.Fill,
				IsPullToRefreshEnabled = true,
				VerticalOptions = LayoutOptions.StartAndExpand,
				Margin = 0,
				SeparatorColor = Color.White,
				SeparatorVisibility = SeparatorVisibility.None,
				ItemsSource = people,

				ItemTemplate = new DataTemplate(() => new ViewCell
				{
					View = new StackLayout
					{
						HorizontalOptions = LayoutOptions.FillAndExpand,
						InputTransparent = true,
						Margin = 0,
						Padding = 0,
						Spacing = 0,
						VerticalOptions = LayoutOptions.StartAndExpand,
						Children =
						{
							new StackLayout
							{
								HorizontalOptions = LayoutOptions.FillAndExpand,
								InputTransparent = true,
								Padding = new Thickness(15, 12, 15, 12),
								Spacing = 0,
								VerticalOptions = LayoutOptions.StartAndExpand,
								Orientation = StackOrientation.Vertical,
								Children =
								{
									new Label
									{
										HorizontalOptions = LayoutOptions.Start,
										LineBreakMode = LineBreakMode.WordWrap,
										VerticalOptions = LayoutOptions.CenterAndExpand,
										InputTransparent = true,
										AutomationId = "AI_Text",
										BackgroundColor = Color.White,
										Text = "This is the text",
										TextColor = Color.Black,
										FontAttributes = FontAttributes.Bold,
										FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
									},
									new Label
									{
										HorizontalOptions = LayoutOptions.Start,
										LineBreakMode = LineBreakMode.WordWrap,
										VerticalOptions = LayoutOptions.CenterAndExpand,
										InputTransparent = true,
										AutomationId = "AI_Detail",
										BackgroundColor = Color.White,
										Text = "This is a longer piece of text that will hopefully make a problem appear",
										TextColor = Color.Black,
										FontAttributes = FontAttributes.None,
										FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
									},
								} // children
							} // stacklayout
							,
							new ContentView
							{
								BackgroundColor = Color.White,
								Content = new BoxView
								{
									HorizontalOptions = LayoutOptions.FillAndExpand,
									HeightRequest = 1.0,
									VerticalOptions = LayoutOptions.Center,
									BackgroundColor = Color.White, // TODO - bind this
									Color = Color.Silver // TODO - bind this
								},
								HeightRequest = 10,
								HorizontalOptions = LayoutOptions.FillAndExpand,
								VerticalOptions = LayoutOptions.Start
							}
						} // children
					} // stacklayout
				}) // item template
			}; // listview

			StackLayout stackLayout = new StackLayout
			{
				HorizontalOptions = LayoutOptions.FillAndExpand,
				VerticalOptions = LayoutOptions.FillAndExpand,
				Orientation = StackOrientation.Horizontal,
				Children =
				{
					listView,
					new ContentView
					{
						HorizontalOptions = LayoutOptions.FillAndExpand,
						VerticalOptions = LayoutOptions.FillAndExpand,
						BackgroundColor = Color.Silver,
					}
				}
			};

			this.Content = stackLayout;
		}

	} // public class AndroidListViewClippingBugPageView : ContentPage

} // namespace ViewsUsingXamarinForms

// eof
Comment 1 John Hardman 2017-09-11 12:17:58 UTC
Additionally, again on Android, even FillAndExpand does not provide the expected result.
Comment 2 Paul DiPietro [MSFT] 2017-09-12 14:15:58 UTC
Updating to reflect that the issue is apparent on 2.4.0-pre2 as well using the provided code.
Comment 3 John Hardman 2018-02-26 18:34:56 UTC
I believe the following code is probably caused by the same bug, although not using a ListView.

If the ToolbarExperimentPageView page is pushed onto the navigation stack, on a typical narrow device in portrait orientation, the result is the same on Android, iOS and UWP. However, in landscape orientation (or when the width increases sufficiently), iOS and UWP show green in the middle of the bar, but Android doesn't - it shows yellow at the right-hand end. I would expect Android to behave the same as iOS and UWP in this scenario, but it seems the layout algorithm differs.


using Xamarin.Forms;

namespace ViewsUsingXamarinForms
{
    public class ToolbarExperimentPageView : ContentPage
    {
        public ToolbarExperimentPageView()
        {
            BoxView temporaryBoxView1 = new BoxView
            {
                BackgroundColor = Color.Aquamarine,
                Color = Color.AntiqueWhite,
                HeightRequest = 44.0,
                WidthRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start
            };

            BoxView temporaryBoxView2 = new BoxView
            {
                BackgroundColor = Color.Black,
                Color = Color.Brown,
                HeightRequest = 44.0,
                WidthRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start
            };

            BoxView temporaryBoxView3 = new BoxView
            {
                BackgroundColor = Color.Crimson,
                Color = Color.Coral,
                HeightRequest = 44.0,
                WidthRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start
            };

            StackLayout navigationButtonsStackLayout = new StackLayout
            {
                BackgroundColor = Color.Violet,
                Spacing = 1.0,
                Padding = new Thickness(1.0, 1.0),
                HeightRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start,
                Orientation = StackOrientation.Horizontal,
                Children =
                {
                    temporaryBoxView1,
                    temporaryBoxView2,
                    temporaryBoxView3,
                }
            };

            //BoxView boxView = new BoxView
            //{
            //    BackgroundColor = Color.Indigo,
            //    Color = Color.Blue,
            //    Margin = 0,
            //    HeightRequest = 44.0,
            //    HorizontalOptions = LayoutOptions.FillAndExpand,
            //    VerticalOptions = LayoutOptions.Start
            //};

            BoxView temporaryBoxView4 = new BoxView
            {
                BackgroundColor = Color.Aquamarine,
                Color = Color.AntiqueWhite,
                HeightRequest = 44.0,
                WidthRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start
            };

            BoxView temporaryBoxView5 = new BoxView
            {
                BackgroundColor = Color.Black,
                Color = Color.Brown,
                HeightRequest = 44.0,
                WidthRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start
            };

            BoxView temporaryBoxView6 = new BoxView
            {
                BackgroundColor = Color.Crimson,
                Color = Color.Coral,
                HeightRequest = 44.0,
                WidthRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start
            };

            BoxView temporaryBoxView7 = new BoxView
            {
                BackgroundColor = Color.Aquamarine,
                Color = Color.AntiqueWhite,
                HeightRequest = 44.0,
                WidthRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start
            };

            BoxView temporaryBoxView8 = new BoxView
            {
                BackgroundColor = Color.Black,
                Color = Color.Brown,
                HeightRequest = 44.0,
                WidthRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start
            };

            BoxView temporaryBoxView9 = new BoxView
            {
                BackgroundColor = Color.Crimson,
                Color = Color.Coral,
                HeightRequest = 44.0,
                WidthRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start
            };

            BoxView temporaryBoxView10 = new BoxView
            {
                BackgroundColor = Color.Aquamarine,
                Color = Color.AntiqueWhite,
                HeightRequest = 44.0,
                WidthRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start
            };

            BoxView temporaryBoxView11 = new BoxView
            {
                BackgroundColor = Color.Black,
                Color = Color.Brown,
                HeightRequest = 44.0,
                WidthRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start
            };

            BoxView temporaryBoxView12 = new BoxView
            {
                BackgroundColor = Color.Crimson,
                Color = Color.Coral,
                HeightRequest = 44.0,
                //WidthRequest = 44.0,
                HorizontalOptions = LayoutOptions.Start,
                VerticalOptions = LayoutOptions.Start
            };

            StackLayout functionalButtonsStackLayout = new StackLayout
            {
                BackgroundColor = Color.Violet,
                Padding = new Thickness(1.0, 1.0),
                Spacing = 1.0,
                HeightRequest = 44.0,
                HorizontalOptions = LayoutOptions.EndAndExpand,
                VerticalOptions = LayoutOptions.Start,
                Orientation = StackOrientation.Horizontal,
                Children =
                {
                    temporaryBoxView4,
                    temporaryBoxView5,
                    temporaryBoxView6,
                    temporaryBoxView7,
                    temporaryBoxView8,
                    temporaryBoxView9,
                    temporaryBoxView10,
                    temporaryBoxView11,
                    temporaryBoxView12,
                }
            };

            StackLayout toolbarHorizontalStackLayout = new StackLayout()
            {
                BackgroundColor = Color.Green,
                HeightRequest = 44.0,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.Start,
                Orientation = StackOrientation.Horizontal,
                Spacing = 0,
                Padding = 0,
                Children =
                {
                    navigationButtonsStackLayout,
                    //boxView,
                    functionalButtonsStackLayout,
                }
            };

            ScrollView toolbarScrollView = new ScrollView()
            {
                BackgroundColor = Color.Yellow,
                HeightRequest = 44.0,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.Start,
                Orientation = ScrollOrientation.Horizontal,
                Content = toolbarHorizontalStackLayout
            };

            StackLayout toolbarStackLayout = new StackLayout
            {
                BackgroundColor = Color.Orange,
                HeightRequest = 44.0,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.Start,
                Orientation = StackOrientation.Horizontal,
                Children =
                {
                    toolbarScrollView
                }
            };

            StackLayout pageStackLayout = new StackLayout
            {
                BackgroundColor = Color.Red,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Orientation = StackOrientation.Vertical,
                Children =
                {
                    toolbarStackLayout
                }
            };

            BackgroundColor = Color.White;
            Content = pageStackLayout;
        }

    } // public class ToolbarExperimentPageView : ContentPage

} // namespace ViewsUsingXamarinForms

// eof