`StackLayout` in `RefreshView` expands outside of the screen bounds

[AndreasReitberger]

Description

I'm using a RefreshView inside a Grid. As child it's using a ScrollView with an underling VerticalStackLayout.

<!-- Main Content -->
    <Grid
        RowSpacing="0"
        RowDefinitions="Auto,*,Auto"
        >
        <!-- Header -->
        <StackLayout      
                Padding="16,8"
                Spacing="0"
                CompressedLayout.IsHeadless="true"
                >
            <!-- Title  -->
            <Label
                    Margin="16,8"
                    FontFamily="{StaticResource MontserratSemiBold}"
                    Text="{x:Static localization:Strings.HeadlineOverview}"
                    TextColor="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray100}}"
                    HorizontalTextAlignment="Start" 
                    Style="{StaticResource HeadlineLabelStyle}"
                    />
            <BoxView />
        </StackLayout>

        <!-- KlipperState -->
        <RefreshView 
            Grid.Row="1"
            IsRefreshing="{Binding IsRefreshing}" 
            Command="{Binding RefreshPageCommand}"
            >
            <ScrollView>
                <VerticalStackLayout>
                    <!-- Overall state -->
                    <Border
                            Style="{StaticResource PanelCardViewBorderStyle}"
                            >
                        <!-- Some content... -->                      
                    </Border>

                    <!-- Toolhead -->
                    <Border
                            IsVisible="{Binding IsPrinterOnline}"
                            Style="{StaticResource PanelCardViewBorderStyle}"
                            HeightRequest="130"
                            >                   
                        <!-- Some content... -->      
                    </Border>

                    <!-- Last print -->
                    <Border
                            IsVisible="False"
                            Style="{StaticResource PanelCardViewBorderStyle}"
                            >                        
                        <!-- Some content... -->      
                    </Border>

                    <!-- Temperature history -->
                    <Border
                            IsVisible="{Binding IsPrinterOnline}"
                            HeightRequest="400"
                            Style="{StaticResource PanelCardViewBorderStyle}"
                            >                  
                        <!-- Some content... -->      
                    </Border>
                </VerticalStackLayout>
            </ScrollView>
        </RefreshView>

        <!-- Tag line -->
        <StackLayout 
                IsVisible="{Binding IsPrinterOnline, Converter={StaticResource BooleanReverseVisibilityConverter}}"
                Grid.Row="2" 
                BackgroundColor="{AppThemeBinding Light={StaticResource Gray100}, Dark={StaticResource Gray900}}"
                >
            <BoxView />
            <Button
                    Margin="20,6,20,4"
                    Command="{Binding RestartServiceCommand}"
                    CommandParameter="firmware"
                    Text="{x:Static localization:Strings.ButtonRestartFirmware}"
                    Style="{StaticResource RoundedLongButtonStyle}"
                    />
            <Button
                    Margin="20,4,20,20"
                    Command="{Binding RestartServiceCommand}"
                    CommandParameter="klipper"
                    Text="{x:Static localization:Strings.ButtonRestartKlipper}"
                    Style="{StaticResource RoundedLongButtonStyle}"
                    />
        </StackLayout>
    </Grid>

However the content is outside of the screen, and that's why the scrolling doesn't work.

If I drag the screen, I can see the end of the content. However I'm not able to scroll into it.

Steps to Reproduce

1. Create a new Maui app and rebuild the structure above
2. Add some content so that the screen is overloaded
3. Try to scroll

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, I was not able test on other platforms

Affected platform versions

iOS 15

Did you find any workaround?

Not yet, even setting a fixed Height for the StackLayout did not help.

Relevant log output

No response

[realchrisparker]

I would like to add, that this is also happening with a refreshview inside of a grid that contains a collectionview within the refreshview. CollectionView within a grid without a refreshview works fine.

[AndreasReitberger]

This is still a problem and keeping me from releasing. Any news on that one? @jfversluis @PureWeen @Eilon Same happening if it is a Grid inside of the ScrollView

Thank you for your efforts!

[japarson]

Hi @AndreasReitberger,

Can you help me understand what this comment means?

If I drag the screen, I can see the end of the content. However I'm not able to scroll into it.

What are you not able to scroll to? Is it the <!-- Tag line --> section at the end with the buttons?

Please try running the app with .NET 7. If that doesn't work, try to repro this in a fresh app and attach it here.

Thank you, James

[AndreasReitberger]

@japarson On iOS you can drag the current view a little up and down, even if there is no ScrollView. If you release the touch, the page goes back to its original boundaries. You can compare the two screenshots in my first post above. The second screenshot was made, while touching the screen and dragging it a little bit up (while holding the touch). So I were able to see where the page actually would end.

What are you not able to scroll to? Is it the <!-- Tag line --> section at the end with the buttons?

No, this area is invisible. The last chart is cut off. The first screenshot shows the page how it is and the second one, how it should look like. I'll try it with the latest Net7 version and report back.

Thank you!

[criistii]

I am having the exact same problem, but in a grid. Grid > ScrollView > VerticalStackLayout. Unable to release because of this. Is there a workaround or an ETA for the fix?

[japarson]

I am having the exact same problem, but in a grid. Grid > ScrollView > VerticalStackLayout. Unable to release because of this. Is there a workaround or an ETA for the fix?

Hi @criistii, I'm sorry that this is interrupting your release. There are two things you can do to help me resolve this issue:

1. Test if this issue reproduces on .NET 7.
2. If it does repro on .NET 7, please upload a MAUI app that repros the bug so that I can more easily find the solution.

Thank you, James

[AndreasReitberger]

Hi @AndreasReitberger,

Can you help me understand what this comment means?

If I drag the screen, I can see the end of the content. However I'm not able to scroll into it.

What are you not able to scroll to? Is it the <!-- Tag line --> section at the end with the buttons?

Please try running the app with .NET 7. If that doesn't work, try to repro this in a fresh app and attach it here.

Thank you, James

I just tried it with the latest net7 version and it seems to work for me now.

[criistii]

ScrollBug.zip @japarson here is a working demo of the bug. Context: I am migrating an old Xamarin project. The customer wants a custom navigation header that was handling the safe area. Because of that, I am using NavigationPage.SetHasNavigationBar(this, false). This was working in the Xamarin project, but has issues in Maui. I already tried IgnoreSafeArea on the top level grid.

[Zhanglirong-Winnie]

Verified this issue with Visual Studio Enterprise 17.8.0 Preview 1.0. Can repro on iOS platform with sample project. ScrollBug.zip

[MrMacvos]

@Zhanglirong-Winnie Your GIF shows exactly that what is happening in my app also, but then in the Android emulator.

<ContentPage ....>
    <ScrollView>
        <VerticalStackLayout Margin="0,20,0,0">
            <RefreshView Refreshing="reportsView_Refreshing" Margin="0,20,0,0">
                <CollectionView x:Name="reportsView"
                    <CollectionView.Header>
                        <Grid ColumnDefinitions="1*, 5*, 2*, 0.5*, 0.5*" BackgroundColor="{StaticResource color_LightGrey}">
                        ... boxviews
                        ... labels
                        </Grid>
                    </CollectionView.Header>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid ColumnDefinitions="1*, 5*, 2*, 0.5*, 0.5*"
                                    RowDefinitions="70"
                                    Margin="0,0,0,1"
                                    Background="{AppThemeBinding Light=White, Dark=Black}">
                                 ... boxviews
                                 ... labels
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                    <CollectionView.Footer>
                        <Grid></Grid>
                    </CollectionView.Footer>
                </CollectionView>
            </RefreshView>
         </VerticalStackLayout>
    </ScrollView>
</ContentPage>