iOS - CollectionView inside of RefreshView does not size correctly

[jamesmontemagno]

Description

Pull down - https://github.com/dotnet-presentations/dotnet-maui-workshop and run Finish project folder on iOS.

Notice that it is spanning of the page and overlapping the buttons.

Steps to Reproduce

Pull down - https://github.com/dotnet-presentations/dotnet-maui-workshop and run Finish project folder on iOS.

Notice that it is spanning of the page and overlapping the buttons.

Version with bug

Release Candidate 3 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS All

Did you find any workaround?

Remove refresh view

Relevant log output

No response

[v-longmin]

Verified repro on iOS 15.4 with VS 17.3.0 Preview 1.0 [32427.505.main]. Repro project:
dotnet-maui-workshop-main.zip

[Hackmodford]

I think I just ran into this issue?
The text in the the collectionview's emptyView is supposed to be centered.

[yairp03]

Any workaround without removing the RefreshView?

[imsam67]

Happening to me as well. I guess the only workaround is to place a button somewhere that allows user to refresh.

[yairp03]

This issue is still labeled sr2... can someone please notice and update it please?

[RonnyRos]

Seems like milestones are completed and released, but issues are left. What happends to the issues that are left? When will they be fixed?

[hunsra]

Similar issue here, plus using a BoxView in the CollectionView.ItemTemplate causes the items to be stretched vertically whenever the RefreshView is pulled up or down. Repro: https://github.com/hunsra/CVinRV. I'm using VS Windows 17.3.0 Preview 5 with the following workloads:

Installed Workload Ids      Manifest Version      Installation Source
--------------------------------------------------------------------------------
maccatalyst                 15.4.442/6.0.400      SDK 6.0.400, VS 17.3.32721.290
maui-android                6.0.424/6.0.400       SDK 6.0.400, VS 17.3.32721.290
runtimes-windows            6.0.7/6.0.300         VS 17.3.32721.290
maui-windows                6.0.424/6.0.400       VS 17.3.32721.290
maui-maccatalyst            6.0.424/6.0.400       VS 17.3.32721.290
maui-ios                    6.0.424/6.0.400       VS 17.3.32721.290
ios                         15.4.430/6.0.400      VS 17.3.32721.290
android                     32.0.447/6.0.400      VS 17.3.32721.290

[brminnick]

On iOS, it appears that .NET MAUI lays out the RefreshView based on the device's Landscape width despite the device being in Portrait orientation. In the video below, we can see the RefreshView ActivityIndicator is partially offscreen on the right.

When the user rotates the device from Portrait to Landscape, the RefreshView indicator is centered properly in approximately the same X-coordinate position on the page as when it was in Portrait. In the video below, after rotating from Portrait to Landscape, the RefreshView ActivityIndicator is centered on the screen in approximately the same location (eg the X Coordinate of the ActivityIndicator is the same as when it was in Portrait).

When the user then rotates back from Landscape to Portrait, the RefreshView ActivityIndicator` is properly centered on the screen.

Screenshot

Ignore the "Demo Mode" text.

I'm working with support to activate my purchase of ScreenFlow 😇

[yairp03]

@brminnick thank you for clarifying this

[NonameMissingNo]

Can you try if a workaround like this would work?

#if IOS
list.WidthRequest = App.Current.Windows[0].Page.Width;
#endif

(Where list is obviously the name of the refreshview in this case)

[brminnick]

I confirmed that setting RefreshView.WidthRequest and RefreshView.MaximumWidthRequest does not fix the problem.

Neither of the following work-arounds fix the issue. In both scenarios, the RefreshView ActivityIndicator appears in the same location.

Scenario 1 Set RefreshView.WidthRequest

Does not work; .NET MAUI lays out RefreshView using landscape width instead of portrait width

WidthRequest = DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density

Scenario 2: Set RefreshView.MaximumWidthRequest

Does not work; .NET MAUI lays out RefreshView using landscape width instead of portrait width

MaximumWidthRequest = DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density

[SophisticatedConsulting]

Also have this issue... multiple distortions to a CollectionView inside a RefreshView:

1. With 1 item in the CollectionView, the item indents so only half of the item (a Border) is visible
2. With multiple items, 2 items are shown on the same line (the second only just visible on the edge of the display)
3. When all items displayed, the Margin on the right hand side is not applied (the item goes off the edge of the display)

[jpett]

I think I found a workaround for now (on 6.0.400):

• Create a custom control (I named it ListContainer) derived from ContentView
• Create a ControlTemplate, placing the RefreshView inside
• Inside the RefreshView place a ContentPresenter

<ControlTemplate x:Key="ListContainerTemplate">
    <RefreshView IsRefreshing="{TemplateBinding IsRefreshing}" Command="{TemplateBinding RefreshDataCommand}">
        <ContentPresenter></ContentPresenter>
    </RefreshView>
</ControlTemplate>

If you now use ListContainer instead of the RefreshView the content seems to be sized correctly.

<custom:ListContainer RefreshDataCommand="{Binding RefreshData}" IsRefreshing="{Binding IsRefreshing}">
  <CollectionView .../>
</custom:ListContainer>

[hunsra]

@jpett how did you associate the template with the control?

[jpett]

Hi @hunsra, you can apply the template using a style rule like so:

<Style TargetType="custom:ListContainer">
  <Setter Property="ControlTemplate" Value="{StaticResource ListContainerTemplate}" />
</Style>

But you could also set it explicitly for a component instance, see https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/controltemplate for details. :)

[imsam67]

Any chance this is one of the "quality improvements" that made it into the .NET 7 version of MAUI?

I think this is a pretty important issue and am surprised that we still have to use workarounds to have this fundamental functionality in our apps.

[samirgcofficial]

Any updates on this issue ? Till today ?

[samirgcofficial]

Finally found out the solution which works for me.
<RefreshView> <Grid><CollectionView></CollectionView></Grid></RefreshView>
Enjoy :)

[7702244]

Finally found out the solution which works for me.
<RefreshView> <Grid><CollectionView></CollectionView></Grid></RefreshView>
Enjoy :)

Thank you for the elegant and quick solution! It's surprising that Microsoft has not been able to fix this bug for several releases.

[VWilcox2000]

This is still happening with 7.058. I am going to try the work-around of using Grid as per @dan-SLT , thanks for that tip. I've converted number of stacks to grids to work around other layout issues.

[DDHSchmidt]

Can confirm this is still an issue with 7.0.59.
Since I see no linked PullRequest I wonder what was the base for closing this Issue?

[jbfranklin]

It is still broken in 7.0.59 please reopen this bug. The workaround to wrap it around the grid breaks all other platforms.

[kramer-e]

Yes, this is still broken, why is this issue closed?

[ghost]

Hello lovely human, thank you for your comment on this issue. Because this issue has been closed for a period of time, please strongly consider opening a new issue linking to this issue instead to ensure better visibility of your comment. Thank you!

[justcivah]

I noticed that this issue has been marked as "closed", even though it has not been resolved. I'm disappointed that after 9 months, this issue has not been addressed and fixed. I understand that there are many requests, but this issue is still present and negatively impacting the functionality of the product.

[hartez]

Sorry folks, I honestly thought that #11357 had fixed this because when I followed the repro steps, the repro app was working just fine. Turns out the repro app had been updated to add a workaround to the bug.

Reopening this now.

[FM1973]

@hartez
Please, please make the fix available for .net 7 and don´t provide it just for .net 8 and backport it.
There are people who want to release their apps now and not in autumn 2023.
Thanks for your hard work!!! Really!!!

[justcivah]

When can we (finally) expect a fix for this bug?

[bmclane]

It looks like this should fix it - #14302

[fgiacomelli]

still present and solved with @samirgcofficial workaround

[ghost]

Hello lovely human, thank you for your comment on this issue. Because this issue has been closed for a period of time, please strongly consider opening a new issue linking to this issue instead to ensure better visibility of your comment. Thank you!

[rmarinho]

@fgiacomelli this fix wasn't release yet, should be in the next net8 preview4

[imsam67]

So, this issue won't be addressed for those of us who will target .net 7 until .net 8 is officially released in November?

[Syed-RI]

Can we not backport the fix @rmarinho ?

[rmarinho]

It's marked as suggested to backport, but we didn't reach to talk about this one yet.

[FM1973]

@rmarinho
This bug exists almost a year like some other major bugs.
Please start solving problems users have right now, instead of implementing fixes for a framework version which will be available for production in a couple of months.

[imsam67]

@FM1973 is EXACTLY right and this is not a minor issue with minimum impact. In my experience, CollectionView is the buggiest yet one of the most important controls of all.

[Hackmodford]

This bug is the reason I don’t have confidence in .Net MAUI