CollectionView in RefreshView is not showing in VerticalStackLayout but is showing in StackLayout

[janseris]

Description

I have a CollectionView to which I want to add refresh capability. Having the CollectionView wrapped in a VerticalStackLayout and adding RefreshView around it, it no longer appears on screen. When the same is done StackLayout is used, it is appearing.

Note: When RefreshView is not used, the CollectionView works in VerticalStackLayout correctly.

Steps to Reproduce

1. Change <VerticalStackLayout> to <StackLayout> in LoginPage.xaml on line 19
2. The CollectionView is no longer showing

Link to public reproduction project repository

https://github.com/janseris/MauiRefreshViewVerticalStackLayoutBug Note: there is Task.Delay(4000) in UserService which mocks loading the data. Because of that, loading will take 4 seconds.

Version with bug

7.0 (current)

Last version that worked well

7.0 (current)

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 12 (but probably all)

Did you find any workaround?

No response

Relevant log output

No response

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 2.0. Repro on Android 13.0-API33 with below Project: DynamicMenu.zip

[JaixTim]

Similar issues replicated using the RefreshViewDemo from the official .NET MAUI Samples and simply changing the StackLayout in the MainPage.xaml to a VerticalStackLayout. That demo is using a FlexLayout, nested inside a ScrollView instead of a CollectionView but has the same result of not showing the content in both Android and iOS simulator (iPhone 14 iOS 16.4)

Changing the ScrollView / FlexLayout to just a CollectionView means iOS at least shows the content of the CollectionView (albeit without the correct bounds) but there is still no pull-to-refresh functionality.

Android will not even show the CollectionView content when nested inside a RefreshView that is nested inside a VerticalStackLayout (and hence there is no pull-to-refresh functionality).

Generally, we're having a lot of issues with layouts being nested and no longer behaving the same as they did in XF which is frustrating, especially when the new VerticalStackLayout is recommended as better performing than the old StackLayout. We are stripping back the number of nested layers for layouts, but we can only go so far before we loose the layout design from the existing XF app.

[Redth]

In this repro "DynamicMenu", I see that there's a hierarchy like this:

VerticalStackLayout -> RefreshView -> Frame -> CollectionView

A few suggestions:

1. Try using a Border instead of a Frame, the Frame can have some strange interactions since it's a compatibility control and Border is the recommendation going forward.

2. Placing a CollectionView inside of a VerticalStackLayout is generally something we recommend against. The problem is, the CollectionView will want to grow to the full height of its content which means it's going to measure every item, negating the performance benefits of its virtualization.

If you aren't concerned with how many items might be in your collectionview, you might instead try using a bindable layout to display these items.

[janseris]

Placing a CollectionView inside of a VerticalStackLayout is generally something we recommend against.

Can you please add this to official documentation if it's not there as an important point or moreover to the C# docs in Visual Studio on the specific UI Control?

If performance is only the difference (I read multiple times that VerticalStackLayout should be used instead of general StackLayout because it's optimized to do the Vertical thing), why doesn't it work at all instead of working slowlier? That is unexpected.

btw. see my note on that:

Note: When RefreshView is not used, the CollectionView works in VerticalStackLayout correctly.

If it's not intended to be used and it doesn't work, maybe add a big warning or a runtime exception which will force developer to not use it because it wouldn't work anyway? (because if it doesn't work but it should, the developer will spend lots of hours figuring out what's wrong on his side while the problem is in the Controls)

If you aren't concerned with how many items might be in your collectionview, you might instead try using a bindable layout to display these items.

So I should not use CollectionView at all?

[LeoJHarris]

I am also having the same issue but my layout does not include a VerticalStackLayout

ContentView Trigger => Grid toolkit:StateContainer.CurrentState => Grid toolkit:StateView.StateKey => Grid => Grid =>RefreshView => CollectionView

As soon as I take out the RefreshView from the view hierarchy the collection displays properly.