Xamarin.forms: [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.

[shanranm]

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

[TingtingAn]

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