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.

[SophisticatedConsulting]

The workaround suggested by @samirgcofficial works for iOS and does not affect Android but it completely messes up the WinUI layout (worse than the original iOS issue). Please can this be prioritised?

[imsam67]

This solution actually no longer works due to the fact that when CollectionView is used with RefreshView, the whole app now freezes. This was not the case before I switched to .NET 7.

[jamesmontemagno]

Try -> <RefreshView><ContentView><CollectionView/></ContentView></RefreshView>

[imsam67]

@jamesmontemagno Thank you for trying but this approach only addresses the layout issue. There's still a problem with freezing. Interestingly, when I did this, the whole app doesn't freeze but looks like the refresh operation or at least the activity indicator seems stuck -- see image below. This screenshot is about a minute after I refreshed the CollectionView and the indicator is still frozen i.e. not spinning. I am, however, able to go to other tabs/pages and app seems to function OK. Just not the CollectionView with RefreshView.

[hartez]

This is fixed in the upcoming service release.

[dan-SLT]

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

Thank you!! This works.

[Syed-RI]

This is fixed in the upcoming service release.

Which version? @hartez

[richard-einfinity]

This still appears to be an issue in Maui 7.0.58 @hartez

[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!

[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!

[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.