iosmaui

MAUI: The behavior of the UICollectionViewFlowLayout is not defined because: the item height must be less than the height of the UICollectionView


In my MAUI app, using .NET 9.0, I use a CollectionView to display a collection of items each comprised of an Image within a Border. On iOS, at runtime, I get the error message:

The behavior of the UICollectionViewFlowLayout is not defined because:
2025-01-12 09:41:31.160276-0600 ... the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
2025-01-12 09:41:31.160489-0600 ... Please check the values returned by the delegate.
2025-01-12 09:41:31.160885-0600 ... The relevant UICollectionViewFlowLayout instance is <Microsoft_Maui_Controls_Handlers_Items_ListViewLayout: 0x103b49fc0>, and it is attached to <Microsoft_Maui_Controls_Handlers_Items_MauiCollectionView: 0x1053c3800; baseClass = UICollectionView; frame = (0 0; 124 55); clipsToBounds = YES; autoresize = W+H; gestureRecognizers = <NSArray: 0x600000cccc60>; backgroundColor = UIExtendedGrayColorSpace 0 0; layer = <CALayer: 0x6000004bd420>; contentOffset: {0, 0}; contentSize: {0, 0}; adjustedContentInset: {0, 0, 0, 0}; layout: <Microsoft_Maui_Controls_Handlers_Items_ListViewLayout: 0x103b49fc0>; dataSource: <Microsoft_Maui_Controls_Handlers_Items_ReorderableItemsViewController_1: 0x105339200>>.
2025-01-12 09:41:31.161159-0600 ... Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.

Even though the error is generated, the UI looks fine. Nonetheless, I'm concerned this will come back to bite me if it doesn't get fixed. I found several posts regarding this error, but none are MAUI related, and the solutions don't seem applicable to a MAUI app.

Here is the CollectionView...

<CollectionView x:Name="SnowSourceCV" Margin="0,10,0,0" ItemsLayout="HorizontalList" HorizontalOptions="Center"
            HeightRequest="{OnPlatform 60, iOS=55}" WidthRequest="{OnPlatform iOS=124}" ItemsSource="{Binding Source={x:Static vm:WaxItVM.SnowSourceButtons}}"
            SelectionMode="Single" SelectedItem="{Binding SelectedSnowSourceButton}" SelectionChanged="OnInputButtonSelectionChanged">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <custom_components:SnowConditionInputButton/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Here is custom_components:SnowConditionInputButton:

    <Border x:Name="waxItVBorder" StrokeShape="RoundRectangle 10" StrokeThickness="3"
            HeightRequest="{OnPlatform 55, iOS=50}" WidthRequest="{OnPlatform 55, iOS=50}" Margin="8,0,8,0" Padding="5">
        <Image Source="{Binding IconFileName}" VerticalOptions="Fill" HorizontalOptions="Fill" >
            <Image.Behaviors>
                <mct:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource Black},Dark={StaticResource White}}"/>
            </Image.Behaviors>
        </Image>
    </Border>

I tried changing the Border HeightRequest to 10 (very small), I tried commenting out the Image within the Border, I tried expanding the HeightRequest of the CollectionView to 100. Nothing I do seems to eliminate the error.

One behavior that's strange is that when the CollectionView contains more than 2 items, the error only appears twice.

I tried to "Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger." per the runtime suggestion but Visual Studio doesn't appear to have the capability to do this.

Any suggestions for fixes would be greatly appreciated. Perhaps this is a MAUI bug?

Thank you.


Solution

  • This issue may relate to the known GitHub issue, [Bug] CollectionView items are not being displayed with a corresponding error messsage in the output.

    As hartez said, this issue comes from AutoLayout.

    So the workaround is to set

    ItemSizingStrategy="MeasureFirstItem"
    

    or to use a Task.Delay (which is not great) to populate the data after the animation has completed.

    Hope it helps!