[Bug] CollectionView includes additional space at the bottom

[MeikandaNayanar]

Description

CollectionView includes additional space at the bottom

Steps to Reproduce

1. Run the attached sample
2. Click the 'Navigate' button
3. You will see an unwanted space is added at the bottom of the CollectionView with MistyRose color

Expected Behavior

The CollectionView height should end when its child items height ends.

Actual Behavior

The CollectionView vertically expands unnecessary even after its child elements which are populated in its ItemTemplate was ended.

Basic Information

• Version with issue: Xamarin.Forms 4.1.0.483098-pre1
• Last known good version: no
• Android: 8.1
• Nuget Packages: Xamarin.Forms 4.1.0.483098-pre1

Screenshots

https://us.v-cdn.net/5019960/uploads/editor/nq/j2wvmwhpkpa4.png

Reproduction Link

CollectionView.zip

[DPY81]

@MeikandaNayanar I think this is expected behaviour because there is not enough elements to fit your device's screen.

You are using scroll view with a grid which in turn has the second and more rows set as
<RowDefinition Height="*"></RowDefinition>

Later on the rows are set as HeightRequest="150" which means given the Height="*" the most each row will be is 150 units. On smaller screens you wouldn't notice this.

[MeikandaNayanar]

Hi @DPY81

Introduction to my expectation:

1. I have a Grid with two rows of ‘Auto’ and ‘*’ as its respective heights.
2. I am having a Xamarin element (here a CollectionView) in the first row of a Grid. I am expecting this element must exactly fit inside the Grid’s first row - since I have specified the height of the row is specified as ‘Auto’.

Documentation I have referred.
Auto — the height or width is autosized based on cell contents ("Auto" in XAML)
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/creating-mobile-apps-xamarin-forms/summaries/chapter17

The issue I am facing here:

I am expecting the layout to fit any mobile screen without any additional spaces since I have used only one grid with '*' and 'Auto' for its height. I am using the below value to make my image in the desired size (almost square) .

HeightRequest="150"

You can also see, I have added another label with that image (having height of 150). Both were in a stack layout which resides in a DataTemplate of CollectionView . This CollectionView is fit inside the first row of a Grid with height specified as 'Auto'. So I am expecting the collection view to exactly fit the size of the Grid's first row. But here there is additional space. Why? If you say this is the behavior then can you (or anyone) suggest me a way to achieve this?

[Lelelo1]

This is the same as #5942?

[samhouts]

Duplicate of #5942

[EvoPulseGaming]

@samhouts You closed this one referencing a duplicate, and then closed the duplicated referencing this as the duplicate. Apparently the default behavior of collectionview and listview is to take up all the space. There appears no way to disable this. Even on latest preview.

[EvoPulseGaming]

Or at least give us an option to shrink the collectionview if the default is to take up all the space.

If you put collectionview in a scrollview, its will then require scrolling to see anything below the collectionview, even if it would normally fit on a single "page". This prevents me from having a dynamic page that can expand as needed without confusing the user.

[titoleru]

This is not resolved

[Kingamattack]

Any update about this bug?

[flimtix]

Any update about this bug? ~2021

[MohanadObiad]

Hi , I just fix this bug by simple code ...
Ok , first the CollectionView has a ( HeightRequest) property , so if you set the value to this property the bug will be fixed

• If you have a limit number of items you can directly set the value of (HeightRequest="10xxx")
• but if you have unknown number of items in the collection view you binding a dynamic (HeightRequest) value
  HeightRequest="{Binding myvalue}"
  Then in the code behind , first you should calculate the height of a one item and then multiply the number of items by the height
  in my case I calculate the height = 96
  then the myvalue=(number_of_items * 96)
  Note : you should define the property with the model of data to binding it directly
  or you can just use the code behind and set the property directly in the runtime.
  Thank you.