CollectionView not scrolling inside a StackLayout or without setting HeightRequest

[justcivah]

Description

If the items inside an ObservableCollection are too many for a CollectionView to display, they can't be scrolled if the CollectionView is inside a StackLayout.

Steps to Reproduce

1. Create a new MAUI project;
2. Add a StackLayout and inside a CollectionView;
3. Bind the ItemSource of the CollectionView to a property in the MVVM with many items;
4. Voilà, you now can't scroll the CollectionView. But if you change the StackLayout into a Grid, or if you add a HeightRequest to the CollectionView (voilà again) you now can scroll it.

Version with bug

6.0.400

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 12

Did you find any workaround?

The only way to scroll them is set the HeightRequest property to the CollectionView or change the StackLayout into a Grid.

Thats the buggy code:
<StackLayout> <CollectionView ItemsSource="{Binding Monkeys}"> <CollectionView.ItemTemplate> <DataTemplate> <Label Text="{Binding Title}" /> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </StackLayout>

But if you add the HeightRequest property to the CollectionView it works fine:
<StackLayout> <CollectionView ItemsSource="{Binding Monkeys}" HeightRequest="200" > <CollectionView.ItemTemplate> <DataTemplate> <Label Text="{Binding Title}" /> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </StackLayout>

And if you add change the StackLayout into a Grid it still works fine:
<Grid> <CollectionView ItemsSource="{Binding Monkeys}"> <CollectionView.ItemTemplate> <DataTemplate> <Label Text="{Binding Title}" /> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </Grid>

Relevant log output

No response

[rmarinho]

This is by design, it's a change on behavitor for Xamarin.Forms to MAUI. Please use a grid.

Thanks

[imsam67]

I have my CollectionView inside a Grid and it's still not scrolling.

[justcivah]

I have just discovered that if you put a CollectionView inside a Grid, set the RowDefinition property, ad assign the CollectionView to the first row of the Grid, it doesn't scroll anymore.

[justcivah]

I have my CollectionView inside a Grid and it's still not scrolling.

Can you show your code?

[imsam67]

That's exactly what I have. Grid with RowDefinitions="*" ColumnDefinitions="*" and the CollectionView is in that row. And if wrap the CollectionView with a ScrollView, it starts to scroll but the whole alignment and width for the Grid get messed up. Yesterday I tweeted this to see if there's a workaround and got no responses. Here's my tweet that shows a screenshot of what it looks like if I use a ScrollView around the CollectionView https://twitter.com/SamUresin/status/1551809788148715522?s=20&t=lNQVNDwUgDAv6MA-5_A03g

[imsam67]

Is there a workaround? This has been a show stopper for us.

You asked for my code. It looks like this:

<Grid
   RowDefinitions="*"
   ColumnDefinitions="*">

       <CollectionView
            Grid.Row="0"
            Grid.Column="0">
           ...
       </CollectionView>

</Grid>

And this is what it looks like if I wrap the CollectionView with a ScrollView:

<Grid
   RowDefinitions="*"
   ColumnDefinitions="*">

   <ScrollView
       Grid.Row="0"
       Grid.Column="0">

       <CollectionView>
           ...
       </CollectionView>

   </ScrollView>

</Grid>

[justcivah]

I haven't found anything yet, but as soon as i find something i'll let you know. Anyway I think that this issue shouldn't be closed.

[imsam67]

No, it shouldn't be closed and there are quite a few duplicate ones anyway -- including the one I opened over a month ago: #8097

Someone mentioned setting the HeightRequest for the CollectionView in a duplicate issue. Trying it now on a real device. I'll post what I see in a few minutes

[imsam67]

Does it work?

[justcivah]

Is there a workaround? This has been a show stopper for us.

You asked for my code. It looks like this:

<Grid
   RowDefinitions="*"
   ColumnDefinitions="*">

       <CollectionView
            Grid.Row="0"
            Grid.Column="0">
           ...
       </CollectionView>

</Grid>

And this is what it looks like if I wrap the CollectionView with a ScrollView:

<Grid
   RowDefinitions="*"
   ColumnDefinitions="*">

   <ScrollView
       Grid.Row="0"
       Grid.Column="0">

       <CollectionView>
           ...
       </CollectionView>

   </ScrollView>

</Grid>

That's exactly what I did. The only workaround is set the HeightRequest property to the CollectionView. That's all i know.

[justcivah]

Does it work?

Yea, with the HeightRequest it works even with the StackLayout. This makes no sense...

[imsam67]

Yes, I can confirm that with setting the HeightRequest for the CollectionView, scrolling works again. So my code is exactly like I posted earlier with the addition of HeightRequest:

<Grid
   RowDefinitions="*"
   ColumnDefinitions="*">

       <CollectionView
            Grid.Row="0"
            Grid.Column="0"
            HeightRequest="750">
           ...
       </CollectionView>

</Grid>

[justcivah]

The problem is that with different devices, you can't have a default HeightRequest. I don't know if that "workaround" could even be considered a workaround

[imsam67]

I agree. That's why I set the HeightRequest to a large number, thinking it'll overflow anyway but that vertical overflow is probably less of a concern in my particular case.

Bottom line, this issue needs to be fixed sooner rather than later.

[imsam67]

Also, maybe this issue is closed because it's one of many duplicates :-) I opened mine on June 15th and it's still open #8097

[justcivah]

@rmarinho closed this as "that's not a bug, it's the way it should be". But since we have found that a CollectionView in a Grid with the RowDefinition / ColumnDefiniton property does not work as it should, I think this could be a bug.