[Bug] [iOS] RefreshView draws behind CollectionView Header

[janschoelchAtOK]

Description

When using a RefreshView and wrap a CollectionView with header in it, the RefreshView draws behind the CollectionView header on iOS.
This leads to unwanted behaviour, for instance: CollectionView in some cases scrolls out of screen bounds (as it scrolls up too far after refreshing).

Steps to Reproduce

I just re-used and adjusted the Xamarin.Forms CollectionView Demo to reproduce the issue.

1. Open the attached Solution
2. Navigate to "Pull to Refresh using RefreshView -> Vertical List"
3. Pull the CollectionView down to refresh

Expected Behavior

The RefreshView should draw above the CollectionView header.

Actual Behavior

The RefreshView draws behind the CollectionView header on iOS.

Basic Information

• Version with issue: Tested on Xamarin.Forms 4.3.0.908675
• Last known good version: N/A
• IDE: Tested on Visual Studio Professional 2019
• Platform Target Frameworks:
  • iOS: 11.0
  • Android: 9.0
  • UWP: N/A
• Android Support Library Version: N/A
• Nuget Packages: Xamarin.Forms 4.3.0.908675
• Affected Devices: Tested on iPhone 8 running iOS 13.1.3 and Huawei P Smart + (2019) running Android 8.1.

Screenshots

The screencasts were made on Emulators (iPhone 8 iOS13, Google Nexus 5X Android 8.1).

iOS

Android

Reproduction Link

CollectionViewHeader.zip

[rmayrink]

Same issue here on iOS. CollectionView with Header and RefreshView.

[memsranga]

I think the proper wording should be Header drawn above refreshview.
The same occurs for empty view also #7457

[huyjack178]

What is the progress of this issue? My project can not be completed because of this bug

[Flaviocrtt]

Same problem here, it makes space for activity indicator on the top of all, but it appears ignoring the header.

[jsauve]

I am also experiencing this in 4.4.0.991220-pre3. I have a large header at the top of my CollectionView. The CollectionView element is the root element of my ContentPage.Content. When performing a pull-to-refresh gesture, the RefreshView's ActivityIndicator is rendered above (y-axis) the CollectionView's "cells" and below (y-axis) the CollectionView's Header.

Since the point of using Header is for above-collection-view-cells content (per Jason Smith's Evolve 2016 talk), and because that implicitly suggests that CollectionView will be used as the root element of a page, then I would expect RefreshView's ActivityIndicator control to render above the CollectionView Header (above (y-axis) the outermost UI element of CollectionView).

Issue present on both iOS and Android.

My workaround will be to use an absolutely positioned ActivityIndicator of my own over (z-axis) the CollectionView to indicate loading activity. This is not ideal since I'd prefer to maintain UX consistency by taking advantage of RefreshView, but in its current rendering implementation, I won't be able to do that.

[jsauve]

I'll try to take a look at the existing renderer, make a fix, and submit a PR.

[raver99]

Because I needed this to work, I came up with a workaround that does the job, at least for my project.

It involves replicating the RefreshViewRenderer, adding some Xamarin Forms internal helper methods (just a few, really) and adding one line to fix it.
The fix is extending the bounds of the UIRefreshView with content offset of the scrollviewer.

I didn't really have the time to investigate all the layouting that happens here, I suspect some Autolayout constraints.
Extending the bounds is one way to fix it, probably not the real fix of the issue.

Here is the gist of my workaround
You can find it by looking at the "todo"

Hope it helps

[LuoyeAn]

Hi everyone, any soultion here? I got the same issue.

[jamesmontemagno]

Same here today, it looks just as if the RefreshView is being added to the main CollectionView content and not including the Header above it.

[daniVerz]

Same here! Funny that after any minor change and Hot Reload it renders the header right.
Any hope? I have to release a new version...

[xleon]

Same here with XF 4.7.0.1260. RefreshView is not usable in iOS with a Header.
More problems (artefacts) come into place when the page does not use a Navigation bar (NavigationPage.HasNavigationBar="False")

[alexmartinezm]

C'mon guys, we can have this fixed before MAUI, can't we?

[xamiell]

Having the Same problem.

Xamarin.Forms 4.8.0.1560
Visual Studio for Mac 8.8 build 2913

[luismts]

This is kind of annoying. Is there a workaround at least?

cc @hartez @jsuarezruiz @rmarinho

[xamiell]

Hi, any update?

[giuseppenovielli]

Same problem, please fix it. I can't use CollectionView with header and still using ListView!!!! Please prioritize!!

@jsuarezruiz Please prioritize this bug, is very blocker, i can't use CollectionView!

Thanks!!

[Nelo-cool]

Because I needed this to work, I came up with a workaround that does the job, at least for my project.

It involves replicating the RefreshViewRenderer, adding some Xamarin Forms internal helper methods (just a few, really) and adding one line to fix it.
The fix is extending the bounds of the UIRefreshView with content offset of the scrollviewer.

I didn't really have the time to investigate all the layouting that happens here, I suspect some Autolayout constraints.
Extending the bounds is one way to fix it, probably not the real fix of the issue.

Here is the gist of my workaround
You can find it by looking at the "todo"

Hope it helps

Thanks! This is a workaround. it really works!

[Outtake]

How is this not fixed yet? Would really like to start using collectionview any time soon.
Sadly the workaround from @raver99 doesn't work for me.

[xamiell]

@Outtake same here, doesn't work for me too.
Production apps :'(

[giuseppenovielli]

@jsuarezruiz @hartez @samhouts i can't use CollectionView with header with this bug!! Please give also only a feedback. Thanks! Collectionview is great! I love horizontal, grid, vertical layout all into one API 😃

[jsuarezruiz]

The issue will be fixed by #13773
I have marked it as an important fix to consider to include in the next release.

[Outtake]

@jsuarezruiz thanks

[giuseppenovielli]

@jsuarezruiz
Thank you so much!! Perfect!! :)

[xamiell]

Thanks @jsuarezruiz!

[matteovelati]

Is this bug solved? I'm having the same problem

[giuseppenovielli]

@matteovelati yes there is a pullrequest, thanks @jsuarezruiz, but must be added to a new xamarin.forms' release.

[matteovelati]

@giuseppenovielli is there a way to include the fix in my project in the meanwhile?

[giuseppenovielli]

@matteovelati check this pullrequest

https://github.com/xamarin/Xamarin.Forms/pull/13773/files

Clone Xamarin.Forms github project and edit manually files update by pullrequest

Use your Xamarin.Forms local clone, with bug fixed to build your app.