Xamarin.forms: [Bug] CollectionView takes too much space/expands vertically

[toomasz]

Description

CollectionView, when places with other controls in for example stackLayout, takes too much space vertically. It should only take as much space as total items height(at least when VerticalOptions="Start" are set)

Steps to Reproduce

1. Run sample

Expected Behavior

CollectionView should only take as much space as sum of it's items

Actual Behavior

CollectionView expads to higher height or takes all space available

Basic Information

• Version with issue: 4.00
• Last known good version: none
• IDE: VS 2017
• Platform Target Frameworks:
  
  
  
  • iOS: Haven't tested
  
  
  • Android: 9.1
  
  
  • UWP: 1803
  
  
• Nuget Packages:
• Affected Devices: All

Screenshots

UWP:

Android:

Reproduction Link

CollectionViewRepro.zip

[samhouts]

Duplicate of #5763

[toomasz]

@samhouts I see its similar to other issue but:

The CollectionView is meant to expand to its available vertical space.

Why is that? I think it should have option not to expand to all available vertical space, like most controls.
It's very common use case, lets say I want to have two lists, one below other and some buttons between them. Without this option it's impossible. Or is there some way?

[hartez]

@samhouts #5763 is a FlexLayout issue.

Also, the current layout behavior of CollectionView is basically the same as what ListView does (always maximally expanding, no matter what the layout options are); we may want to reconsider this for CollectionView. I'd like to reopen this one, at least for now.

(I'm not saying we _will_ change it - just that I'd like to think about it some more.)

[MeikandaNayanar]

I saw this bug report is closed and hence I created a new one few hours ago with my real use case explaining the same issue

[Tragetaschen]

Is there any workaround to tame a CollectionView's vertical extent?

[toomasz]

@Tragetaschen I haven't found one but maybe I'm missing something. @hartez could you advice on how to stop collection view expanding vertically? Is it possible currently?

[Tragetaschen]

I have the CollectionView in a ScrollView+StackLayout.

When the item template has fixed size (i.e. you can use ItemSizingStrategy="MeasureFirstItem"), I have successfully bound HeightRequest to the same object as the ItemsSource with an IValueConverter that basically does

n * itemTemplateHeight 
+ (n-1) * itemSpacing 
+ ε // 1, 2 or something else to accomodate for internal rounding errors

[HobDev]

I able to control the height of CollectionView using AbsoluteLayout.

[EvoPulseGaming]

CollectionView should only take up the space needed to display the items, if we want to take up the entire screen we would specify this as we do with everything else.

[MitchBomcanhao]

having a collection view that only takes the necessary space is a must for me.
I would like to replace some hacky flexlayouts with collectionviews, but the spurious space it adds to the layout makes it useless.

[Alex-111]

Please at least add an option for the user to control the layout.
There are plenty of users out there who need this feature!
At least there is a chance to correct this in the new collectionview control!

[garyng]

If nothing CollectionView-specific features are used, you can get around this by binding to BindableLayout on StackLayout.

[TheCodeSage]

This seems like something that should exist with collection view seeing as you can create a horizontal collection and set the ItemSizingStrategy="MeasureAllItems". I would think the vertical height of the collection view would only be as high as each item. So if a collection view which scrolls horizontally exists at the bottom of a page, it is only taking up the space of the items in view, but instead it just takes over the whole page.

[idchlife]

So basically the only easy way is to hardcode HeightRequest in CollectionView element?

[tomeverin]

I'm doing similar to what @Tragetaschen suggested. Works fine. However not very elegant and would be ideal if VerticalOptions="Start" would work as expected.

[wrkettlitz]

Any work around? why is this still bugged?

[pspeybro]

I would also like to see CollectionView respect the verticalOptions="start".
In my case it is a horizontal CollectionView in a stacklayout in a scrollview and the stacklayout seems to take the height of the screen, even though there is only a limited height needed.

A workaround would also be appreciated while awaiting a fix.

[Keflon]

The following CollectionView is in an Auto row and displays a narrow __horizontally__ scrolling collection of strings. The required height is minimal. The height of the CollectionView fills the screen on my Nexus 5 phone.
If that's expected behaviour so be it, but it doesn't make much sense to me.

<CollectionView Grid.Row="3" ItemsSource="{Binding Categories}" ItemsLayout="HorizontalList" VerticalOptions="Start">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding Text}"/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Xamarin rocks! Here seems as good a place as any to say thank you and keep up the good work! :)

[Inrego]

I too am really looking forward to a change on how this works. Why would a horizontal list take up full height of a page? Also if used for showing just a few items vertically, you can't show anything below it, without the user having to scroll almost a full empty page.

Basically, CollectionView is currently designed with the assumption that it will be the only view on a page. That just doesn't hold true for real-life apps.

[Inrego]

Until then, I guess the "workaround" is to use StackLayout with BindableLayout instead of CollectionView. That just has terrible performance on longer lists, so it's not a great solution either.

[pspeybro]

Until then, I guess the "workaround" is to use StackLayout with BindableLayout instead of CollectionView. That just has terrible performance on longer lists, so it's not a great solution either.

Inrego, one way to work around it is to wrap a StackLayout (for example) around the Collectionview and bind the HeightRequest of the StackLayout to a property in the viewmodel that calculates the required height based on some things (contents of the CollectionView items).

Not ideal but it worked in my case.

[Inrego]

Until then, I guess the "workaround" is to use StackLayout with BindableLayout instead of CollectionView. That just has terrible performance on longer lists, so it's not a great solution either.

Inrego, one way to work around it is to wrap a StackLayout (for example) around the Collectionview and bind the HeightRequest of the StackLayout to a property in the viewmodel that calculates the required height based on some things (contents of the CollectionView items).

Not ideal but it worked in my case.

I'm just speculating, but calculating the height of each item would also yield not so good performance on large lists. Of course, this is only a problem when the list is smaller than the page, so I could do the calculation only if there's not enough items to fill the page.

But then again, looks like it might be solved soon. And it'll be a while before my app hits production. So I can live with the bad performance of StackLayout until then I think.

But still good to have the options here for others to see.

[AmrAlSayed0]

@pspeybro How would you go about calculating the height of the displayed items? If I have set a fixed height on the template then maybe I can use that, but what if it is not? Is there a way to access the displayed views so I can write a behavior (maybe?) that can adjust the height when the ItemSource changes?

[pspeybro]

@pspeybro How would you go about calculating the height of the displayed items? If I have set a fixed height on the template then maybe I can use that, but what if it is not? Is there a way to access the displayed views so I can write a behavior (maybe?) that can adjust the height when the ItemSource changes?

@AmrAlSayed0 , in my case, I was adding extra rows (users) in vertical stacklayout that was inside de collectionview DataTemplate (while collectionview has horizontal orientation).
A user can click something to add an extra user. In my viewmodel, when an extra row is added, I also trigger the OnPropertyChanged of a Height property that calculates the required height, based on the number of users. This Height property is bound to the HeightRequest of a Stacklayout that contains the horizontal collectionview.

Not very pretty, but it works for me...

[ndastur]

Any news on this. Starting using the collectionview and hit upon this almonst straight away. Then found this more than year old bug issue. It really doesn't make much sense from a layout POV to expand like this

[Nerves82]

This is a +1,000 for me. It seems insane that the collection view is so single use. I can't do something so simple as have a label under my list be cause the list (even if it only has a fe items in it) is huge! It makes the collection view nearly worthless. This needs to be fixed!

[Johanna-Victoria]

Every component containing HorizontalOptions and VerticalOption should expand and fill according to value set. It doesn't make sense that a component is overriding these values.
I would really like to see that the properties remains for CollectionView and the components size can be adjusted by the size of the collection.