Fixed CollectionView's HeaderTemplate is not rendering in iOS and MacCatalyst platform. #27466
Conversation
Fixed CollectionView Header is not rendering in iOS and Mac platform
Fixed HeaderFooterStringWorks
Test case enabled for HeaderFooterStringWorks
|
Hey there @KarthikRajaKalaimani! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed. |
karthikraja-arumugam
added
the
partner/syncfusion
Indentation issue resolved.
jsuarezruiz
added
area-controls-collectionview
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
| @@ -15,7 +15,6 @@ public CollectionViewHeaderAndFooterTests(TestDevice device) | |||
| { | |||
| } | |||
|
|
|||
| #if TEST_FAILS_ON_IOS && TEST_FAILS_ON_CATALYST // Header not rendering issue: https://github.com/dotnet/maui/issues/27177 | |||
| [Test] | |||
| [Category(UITestCategories.CollectionView)] | |||
| public void HeaderFooterStringWorks() | |||
There was a problem hiding this comment.
Pending snapshots:
Already available in the latest build. Could you commit the images?
There was a problem hiding this comment.
Pending snapshots:
Already available in the latest build. Could you commit the images?
@jsuarezruiz I mistakenly enabled all the test cases in HeaderAndFooter.cs, which resulted in unnecessary snapshots being generated. I've reverted those changes and now only enabled the test case relevant to this issue, which does not require a snapshot. Could you please review the changes and let me know if you have any concerns?
|
/rebase |
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
There was a problem hiding this comment.
This looks good!
I put the CV inside a grid on the issue so it's not hidden by the notch.
The changes here are basically just reverting the changes here https://github.com/dotnet/maui/pull/21812/files#diff-3aafb0e01895bc2a4eb5a498ef5a511ce5482284956febfb20d3a04908ecab67R173-R174 for some scenarios.
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
|
Hi. @PureWeen |
No, can you log a bug And just validate this isn't something that regressed on iOS? |
Issue Details:
Test Case 1 : CollectionViewHeaderTemplateAndFooterTemplateDontWork failed in iOS and Catalyst platform.
Description:
The HeaderTemplate is not visible in the collection view when a button is directly assigned to the HeaderTemplate property of the CollectionView.
Code example :
The Button is directly load to HeaderTemplate of the CollectionView.
<CollectionView.HeaderTemplate> <DataTemplate> <Button HorizontalOptions="Center" Margin="12,24" Text="Add Item" AutomationId="AddItem" Clicked="AddItem" /> </DataTemplate> </CollectionView.HeaderTemplate>Test Case 2 : HeaderFooterStringWorks failed in iOS and Catalyst platform.
Description : The footer string is not visible in the collection view when both the header and footer strings are set.
Code Example :
<CollectionView x:Name="CollectionView" Header="Just a string as a header" Footer="This footer is also a string"> </CollectionView>Root Cause:
Test case 1 :
By default, the UIButton is wrapped in a WrapperView, meaning the PlatformView of the button is the WrapperView. However, when accessing the renderer.PlatformView in the Realize method of the TemplateHelpers class, the incorrect PlatformView is returned. It should return the WrapperView, not the UIButton. As a result, the UIButton is removed from the WrapperView and added as a subview of the CollectionView. Once added, the button’s cross-platform measurement is skipped during layout calculation because, while measuring the WrapperView, the subview’s size is 0.
Test case 2 :
In the HeaderFooterStringWorks test sample, the string is directly assigned to the Header and Footer properties of the CollectionView . In the Maui source code, while positioning the header and footer, the height is get from the formsElement height. If the formsElement is null, the height is set to 0. In this case, the formsElement was null, resulting in the header and footer having a height of 0.
Description of Change:
Test case 1 :
To resolve this, I called the renderer.ToPlatform() method in the Realize method of the TemplateHelpers class. The ToPlatform() method ensures that if the view handler has a container view (the WrapperView), it returns that; if not, it returns the correct PlatformView. This ensures that the WrapperView is added as a subview of the CollectionView and that the button’s cross-platform measurement is not skipped during the layout calculation.
Test case 2 :
The fix introduces a conditional check: if the Header or Footer is a View, it uses _headerViewFormsElement or _footerViewFormsElement (converted to platform-specific view) for height calculation. For string or template-based headers/footers, it continues to use _headerUIView or _footerUIView.
This approach ensures accurate height measurements for all types of headers and footers, particularly addressing the issue with dynamically added View-based items, while maintaining correct functionality for string and template-based options.
Tested the behavior in the following platforms.
Test Case:
Enabled the CollectionViewHeaderTemplateAndFooterTemplateDontWork and HeaderFooterStringWorks test cases across all platforms.
Reference:
N/A
Issues Fixed:
Fixes #27177 #27264
Screenshots
Test Case 1 :
Test Case 2 :