[iOS] CollectionView takes up huge vertical space

[BlagoCuljak]

Description

We are developing MAUI app, and we use CollectionView constantly. However, on iOS, every collection view takes up huge vertical space, just like this. Android looks good.

Here is the sample: CollectionViewDemos.zip

Steps to Reproduce

Start the app, and click on one view in menu. Android looks fine, iPhone had huge problem with lower number of items in CollectionView.

Version with bug

6.0.408 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15

Did you find any workaround?

None at the moment, you can set MaximumHeight, but it just gets ugly then, and not all items are displayed, and you need to scroll inside that small MaxHeight window.

Relevant log output

No response

[jfversluis]

Please add the repro as a GitHub repository, thank you!

[ghost]

Hi @BlagoCuljak. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[BlagoCuljak]

Please add the repro as a GitHub repository, thank you!

Hi @jfversluis, thanks for your comment, here you will find github repo. https://github.com/BlagoCuljak/CollectionViewIOSheight

[Adelzu]

I can confirm the issue, present on iOS. Android works well.

[andrijankara]

Can confirm same issue on iOS, Android works OK!

[dhindrik]

I can see the same problem in the horizontal direction. The screenshot is from a mac catalyst app.

[ganeshachary]

Facing same issue with ios, works fine in Android - MAUI ios My collection view is inside a Frame which is inside a ScrollView. Any solution or workaround

[PureWeen]

Related https://github.com/dotnet/maui/issues/7315

[BaumTom]

I'am also facing the same issue on MAUI for iOS. Is there any chance that this issue will be fixed in the near future?

[EmberLynn]

I am experiencing the exact same issue. I have nested collection views and each of them renders in a huge amount of space (only on iOS).

If anyone has any resources on how to possibly dynamically size the items and the CollectionView itself, I'd love to know because the current "built-in" functionality is completely broken.

[BaumTom]

My workaround so far is to replace the CollectionView with a (Vertical)StackLayout with BindableLayout.ItemsSource. The CollectionView is not usable at all for me.

[BlagoCuljak]

I am experiencing the exact same issue. I have nested collection views and each of them renders in a huge amount of space (only on iOS).

If anyone has any resources on how to possibly dynamically size the items and the CollectionView itself, I'd love to know because the current "built-in" functionality is completely broken.

Well, I named this thread "[iOS] CollectionView takes up huge vertical space; this makes almost impossible to use MAUI" and I feel your pain. I just don't know what people at Microsoft think how this works. It was 3 months since my issue, and no luck what so ever.

[EmberLynn]

My workaround so far is to replace the CollectionView with a (Vertical)StackLayout with BindableLayout.ItemsSource. The CollectionView is not usable at all for me.

Thanks for the suggestion. I was also thinking about giving ListView a try, too.

[EmberLynn]

I am experiencing the exact same issue. I have nested collection views and each of them renders in a huge amount of space (only on iOS). If anyone has any resources on how to possibly dynamically size the items and the CollectionView itself, I'd love to know because the current "built-in" functionality is completely broken.

Well, I named this thread "[iOS] CollectionView takes up huge vertical space; this makes almost impossible to use MAUI" and I feel your pain. I just don't know what people at Microsoft think how this works. It was 3 months since my issue, and no luck what so ever.

This is a massive issue and takes away the entire "one size fits all" problem that Microsoft is trying to solve with MAUI. They've released MAUI into production, yet it is still plagued with bugs that make certain use cases impossible to solve. They suggest you use CollectionView above ListView, but that isn't helpful when the CollectionView's behavior doesn't come close to matching Android's. I have to fiddle around with multiple views, render in iOS to see if it looks okay, and then render back in Android to see if it looks okay there.

[akhanalcs]

I also have the same issue. Any updates?

[manitra]

hi,

Just to confirm I have the same issue.

The reason why I can't replace the child CollectionView is the Span=X grid layout which is damn useful with our big 7" phone screens !

[nebula2]

just not funny anymore...

[victorsigga]

I'm having the same issue here, visual studio for mac 17.4 . Can you guys give us some feedback on this ? @jfversluis Could you please help us ? This is a critical issue and it's happening from a long time

[EmberLynn]

My workaround so far is to replace the CollectionView with a (Vertical)StackLayout with BindableLayout.ItemsSource. The CollectionView is not usable at all for me.

Wanted to give an update that this is what I had to do to get my group of objects to render nicely on the screen. I first attempted to use ListView but found that its behvaiour and performance were far worse than CollectionView. So, as you mentioned, I used BindableLayouts instead.

[KieranMaclagan]

Ran into this as well when using CarouselView. Only workaround I found was to set the MaximumHeightRequest on it.

[Lazareena]

Same here. Had to set the GridRowDefinition to a fix height on IOS as a workaround.

[MarMarIV]

I have same problem on iOS platform with CarouselView. Android platform is ok

[AdamBebko]

This is a pretty big issue in my app too. My layouts need to be hardcoded, which really prevents making them pretty. Hopefully a fix comes out soon!

[jpsaccount]

Also having this issue on my IOS MAUI app

[EdwardMcFlurry]

Instead of opening a new issue, has this issue being fixed especially on iOS.

[progrish]

This issue very soon must be solved

[HobDev]

The CarouselView and CollectionView both have this issue due to which it takes up huge amount of space on iOS. The only workaround is to give it a fix size or use bindable layout.

[TheDev51]

in this old post : https://github.com/dotnet/maui/issues/6605 [@espenrl] (https://github.com/espenrl) commented [on Oct 19, 2022] solve a part of the problem with a behavior as follow

for a complete solution that work in StackLayout, VerticalStackLayout, SchrollView, ... I add a border arround the CollectionView to force the computation of height (and use of behavior) before container height determination.

It save my project !!!

<CollectionView.Behaviors>
   <views:IOSFixInfiniteHeightCollectionView />
</CollectionView.Behaviors>

    /// <summary>
    /// iOS CollectionView size calculation
    /// https://github.com/dotnet/maui/issues/6605
    /// </summary>
    public sealed class IOSFixInfiniteHeightCollectionView : Behavior<CollectionView>
    {
        private void CollectionViewOnSizeChanged(object? sender, EventArgs e)
        {
#if IOS
            if (sender is not CollectionView collectionView)
            {
                throw new InvalidOperationException();
            }
            if (collectionView.Handler?.PlatformView is not UIKit.UIView uiView)
            {
                throw new InvalidOperationException();
            }

            var uiCollectionView = uiView.Subviews
                .OfType<UIKit.UICollectionView>()
                .Single();

            const double emptyViewRequiredHeight = 50;
            const double additionalHeight = 20; // this is needed or else the collection view will be truncated
            var calculatedHeight = (double)uiCollectionView.CollectionViewLayout.CollectionViewContentSize.Height;
            var height = additionalHeight + calculatedHeight;
            collectionView.MaximumHeightRequest = Math.Max(emptyViewRequiredHeight, height);
#endif
        }

        protected override void OnAttachedTo(CollectionView bindable) => bindable.SizeChanged += CollectionViewOnSizeChanged;
        protected override void OnDetachingFrom(CollectionView bindable) => bindable.SizeChanged -= CollectionViewOnSizeChanged;
    }

[AlexeyStarkov]

Both CollectionView and CarouselView are derived from ItemsView. So I assume the source of the problem is related to ItemsView.

[ThoHensler]

Same issue occurs with CarourselView. But I cannot find a similar workaround as above with tweaking MaximumHeightRequest in OnSizeChanged.

Code to reproduce: Main ContentPage like this:

<VerticalStackLayout>
        <Label Text="Label1"></Label>
        <CarouselView ItemsSource="{Binding Items}" Loop="false" IndicatorView="indicatorView">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding Name}" BackgroundColor="LightGray"></Label>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <IndicatorView x:Name="indicatorView" HorizontalOptions="Center"></IndicatorView>
        <Label Text="Label2"></Label>
    </VerticalStackLayout>

public partial class MainPage : ContentPage
{
    public class Item
    {
        public string Name { get; set; }
    }

    public ObservableCollection<Item> Items { set; get; }

    public MainPage()
	{
        Items = new ObservableCollection<Item>();
        Items.Add(new Item() { Name = "Item1" });
        Items.Add(new Item() { Name = "Item2" });
        Items.Add(new Item() { Name = "Item3" });
        InitializeComponent();
        BindingContext = this;
    }
}