CollectionView, the footer moves to the bottom of the page when the empty view or empty view template is enabled #24997
Conversation
jfversluis
added
the
area-controls-collectionview
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
| App.Tap("RemoveButton"); | ||
| App.Tap("RemoveButton"); | ||
| // Here we check for dynamic Emptyview and Footer proper proper alignment in view it should not be at the bottom of screen. | ||
| VerifyScreenshot(); |
There was a problem hiding this comment.
On iOS the snapshot seems to be correct:
However, on Android, the items still appear. It should not happen after tapping the remove button.
There was a problem hiding this comment.
On iOS the snapshot seems to be correct:
However, on Android, the items still appear. It should not happen after tapping the remove button.
The fix for this issue is associated with PR 24830, we can get the correct image once the mentioned PR is merged
There was a problem hiding this comment.
It was merged, we can rebase this PR
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
/rebase |
github-actions
bot
force-pushed
the
fix-24966
branch
from
e5564e2
to
a1c7c89
Compare
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
/rebase |
… page when the empty view or empty view template is enabled
github-actions
bot
force-pushed
the
fix-24966
branch
from
a1c7c89
to
b487c7b
Compare
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
|
||
| if (_emptyViewFormsElement is not null) | ||
| { | ||
| emptyViewHeight = (nfloat)_emptyViewFormsElement.Measure(CollectionView.Frame.Width, double.PositiveInfinity).Request.Height; |
There was a problem hiding this comment.
For this can you cast _emptyViewFormsElement as an IView first before measuring? This won't be necessary once we're on net9 but for now it's still useful.
There was a problem hiding this comment.
I've updated the code based on your feedback. Could you please review it and let me know if there are any concerns?
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
|
||
| [Test] | ||
| [Category(UITestCategories.CollectionView)] | ||
| public void CollectionViewFooterMovestoBottomWithEmptyvieworEmptyviewTemplate() |
There was a problem hiding this comment.
Since updating to .NET 9 and enabling CollectionViewHandler2 in the iOS testing projects, we’re encountering UI test failures due to layout differences between CollectionViewHandler(with our custom fix in .NET 8) and CollectionViewHandler2. In the updated handler, the empty view is positioned incorrectly, overlapping the header, which alters the expected UI layout and causes screenshot comparison failures in tests.
The previous alignment fix for the empty view does not work with CollectionViewHandler2 due to differences in rendering flow. We are currently working on fixing this issue to ensure similar behavior to CollectionViewHandler for consistent UI rendering across versions.
A separate issue has been created to track progress: #25606,
|
/rebase |
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
Root Cause
Android: The issue occurred when using HeaderTemplate and FooterTemplate in a CollectionView. The footer template was not arranged properly after switching from an empty view to an item view. This was because the empty view incorrectly occupied the entire available space, pushing the footer to the bottom of the screen. The incorrect behavior stemmed from the UpdateEmptyViewSize method, which did not properly measure and adjust the size of the empty view, especially when using templates. The footer template was never created because the RecyclerView did not allocate space for it due to the wrong measurement of the empty view.
Description of Change
The fix involved updating the UpdateEmptyViewSize method to accurately measure the height of the empty view, whether it was a direct IView or a DataTemplate. By ensuring the correct height was set for the RecyclerView, we allowed the footer template to be rendered correctly. This change ensures that the empty view does not take up the entire available space, and the footer can appear as expected when transitioning between item views and empty views.
Fix done at Items/ItemsViewHandler.Android.cs
Root Cause
iOS: The issue arose when Header, Footer, and EmptyView is used in collectionview. The DetermineEmptyViewFrame method was not properly calculating the frame for the EmptyView, resulting in the EmptyView taking up available amount of space. This caused footer view move to the bottom of the screen.
Description of Change
The fix involved updating the DetermineEmptyViewFrame method in the ItemsViewController class to accurately measure the height of the EmptyView element using _emptyViewFormsElement.Measure(). Additionally, in the StructuredItemsViewController, a check was added to ensure that if an EmptyView is present, the base DetermineEmptyViewFrame method is called to maintain consistent sizing logic. By ensuring the correct frame is set for the EmptyView, the issues with Footer were resolved, preventing the EmptyView from taking up all available space.
Fix done at Items/iOS/ItemsViewController.cs , Items/iOS/StructuredItemsViewController.cs.
Issues Fixed
Fixes #24966
Fixes #11847 (Android)
Tested the behaviour in the following platforms
Screenshots
iOS:
Android: