[iOS] - ScrollView getting extended over available space within Grid with RowDefinitions="Auto"

[MAUIoxo]

Description

As discussed in https://stackoverflow.com/questions/77013139/scrollview-is-getting-extended, I have a ScrollView within a Grid with RowDefinitions="Auto".

When the App is in Portrait orientation, the height of the ScrollView fits into the available space above the Bottom-Tab which is what is expected and wanted.

In case the app is turned from Portrait orientation to Landscape orientation, the ScrollView is getting extended too much, so that it overlaps the available space and is actually behind the Bottom-Tab on iOS (see Screenshots). On Android it does not overlap the Bottom-Tab.

On both platforms, the ScrollView does not scroll in Landscape orientation, which tells me that it is getting extended so , that the ScrollView actually does not scroll its content.

Nevertheless, the expectation is that the ScrollView still stays within the space above the Bottom-Tab and when the available space gets too small for the ScrollView in Landscape orientation, it allows to scroll its content.

View1.xaml

<Grid RowDefinitions="Auto">

    <!--Just a Background Image and a LinearGradient-->
    <views:BackgroundImageView x:Name="BackgroundImage" VerticalOptions="Start"/>

    <ScrollView Grid.Row="0" VerticalOptions="FillAndExpand" Background="Green">
        <StackLayout>
            <Label Text="Label 1"/>
            <Label Text="Label 2"/>
            <Label Text="Label 3"/>
            <Label Text="Label 4"/>
            <Label Text="Label 5"/>
            <Label Text="Label 6"/>
            <Label Text="Label 7"/>
            <Label Text="Label 8"/>
            <Label Text="Label 9"/>
            <Label Text="Label 10"/>
            <Label Text="Label 11"/>
            <Label Text="Label 12"/>
            <Label Text="Label 13"/>
            <Label Text="Label 14"/>
            <Label Text="Label 15"/>
            <Label Text="Label 16"/>
            <Label Text="Label 17"/>
            <Label Text="Label 18"/>
            <Label Text="Label 19"/>
            <Label Text="Label 20"/>
            <Label Text="Label 21"/>
            <Label Text="Label 22"/>
            <Label Text="Label 23"/>
            <Label Text="Label 24"/>
            <Label Text="Label 25"/>
            <Label Text="Label END"/>
        </StackLayout>
    </ScrollView>

</Grid>

MainPage.xaml

The ContentView View1 is embedded in the MainPage like this

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:ScrollViewGettingExtendedApp.Pages.Views"
             xmlns:viewModels="clr-namespace:ScrollViewGettingExtendedApp.ViewModels"
             xmlns:tabs="http://sharpnado.com"
             x:DataType="viewModels:MainPageViewModel"
             x:Class="ScrollViewGettingExtendedApp.Pages.MainPage"
             Title="Main Page">


    <!-- Style for BottomTabs -->
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="BottomTab" TargetType="tabs:BottomTabItem">
                <Setter Property="SelectedTabColor" Value="{StaticResource DarkOrange1}" />
                <Setter Property="FontFamily" Value="OpenSansExtraBold" />
                <Setter Property="UnselectedLabelColor" Value="{StaticResource Black}" />
                <Setter Property="UnselectedIconColor" Value="{StaticResource Black}" />
                <Setter Property="IconSize" Value="24" />
                <Setter Property="LabelSize" Value="14" />
            </Style>
        </ResourceDictionary>
        <viewModels:View1ViewModel x:Key="View1ViewModel" />
    </ContentPage.Resources>


    <Grid IgnoreSafeArea="True">
        <Grid x:Name="MainPageViewGrid" RowDefinitions="*, 55">

            <!-- Switcher to switch between the different Views -->
            <tabs:ViewSwitcher x:Name="ContentViewSwitcher"
                               Grid.Row="0"
                               Animate="True"
                               SelectedIndex="{Binding SelectedViewModelIndex, Mode=TwoWay}">

                <tabs:DelayedView x:TypeArguments="views:View1"
                                  BindingContext="{Binding Source={StaticResource View1ViewModel}}"
                                  AccentColor="{StaticResource Gray100}"
                                  Animate="True"                              
                                  UseActivityIndicator="True" />

                <tabs:DelayedView x:TypeArguments="views:View2"
                                  BindingContext="{Binding Source={viewModels:View2ViewModel}}"
                                  AccentColor="{StaticResource Gray100}"
                                  Animate="True"
                                  UseActivityIndicator="True" />

            </tabs:ViewSwitcher>
                

            <!-- Bottom-Tabs -->
            <tabs:TabHostView Grid.Row="1"
                              BackgroundColor="White"
                              Orientation="Horizontal"
                              TabType="Fixed"
                              SelectedIndex="{Binding Source={x:Reference ContentViewSwitcher}, Path=SelectedIndex, Mode=TwoWay}">

                <tabs:TabHostView.Tabs>
                    
                    <!-- Tab: View 1 -->
                    <tabs:BottomTabItem Style="{StaticResource BottomTab}"
                                        IconImageSource="dotnet_bot.png"
                                        Label="View 1"
                                        Margin="5, 0, 0, 0"/>

                    <!-- Tab: View 2 -->
                    <tabs:BottomTabItem Style="{StaticResource BottomTab}"
                                        IconImageSource="dotnet_bot.png"
                                        Label="View 2" />

                </tabs:TabHostView.Tabs>
            </tabs:TabHostView>
        </Grid>
        
    </Grid>
    

</ContentPage>

Steps to Reproduce

No response

Link to public reproduction project repository

https://github.com/MAUIoxo/ScrollViewExtended_17291

Version with bug

7.0.92

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

No response

Did you find any workaround?

A workaround was to use RowDefinitions="*"

<Grid RowDefinitions="*">

    <!--Just the Background Image and the LinearGradient-->
    <views:BackgroundImageView x:Name="BackgroundImage" VerticalOptions="Start"/>

    <ScrollView Grid.Row="0" x:Name="ScrollView" Background="Green">
        <StackLayout>
            <Label Text="Label 1"/>
            <Label Text="Label 2"/>
            <Label Text="Label 3"/>
            <Label Text="Label 4"/>
            <Label Text="Label 5"/>
            <Label Text="Label 6"/>
            <Label Text="Label 7"/>
            <Label Text="Label 8"/>
            <Label Text="Label 9"/>
            <Label Text="Label 10"/>
            <Label Text="Label 11"/>
            <Label Text="Label 12"/>
            <Label Text="Label 13"/>
            <Label Text="Label 14"/>
            <Label Text="Label 15"/>
            <Label Text="Label 16"/>
            <Label Text="Label 17"/>
            <Label Text="Label 18"/>
            <Label Text="Label 19"/>
            <Label Text="Label 20"/>
            <Label Text="Label 21"/>
            <Label Text="Label 22"/>
            <Label Text="Label 23"/>
            <Label Text="Label 24"/>
            <Label Text="Label 25"/>
            <Label Text="Label END"/>
        </StackLayout>
    </ScrollView>

</Grid>

Relevant log output

No response

[ToolmakerSteve]

FYI: See comments in related StackOverflow thread. https://stackoverflow.com/questions/77013139/scrollview-is-getting-extended

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0. This issue repro on iOS 16.4 .NET 7, but not repro on iOS 16.4 .NET 8 and Android 13.0-API33 with below Project: ScrollViewGettingExtendedApp.zip

[ghost]

Hi @MAUIoxo. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[MAUIoxo]

Does .NET 8 already come with the version you mentioned above in your sentence "Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0". As far as I know, .NET 8 has not been released so far. So, using Visual Studio Enterprise 17.8.0 Preview 1.0 also includes .NET 8 Preview or is this something I have to download and install from somewhere separately? Please, if possible provide the links where I can download the version of VS and the version of .NET Framework that I should use to reproduce

[MAUIoxo]

Tested my project with VS 17.8 (Preview) using .NET 7 and .NET 8: .NET 7: issue can still be reproduced .NET 8: could not reproduce the issue regarding layouting. But, ScrollView still does not scroll in this example which tells me it is actually to high - you can decide if this is the expected behavior on Grid with RowDefinitions="Auto" or if we would expect that the Height is determined by what is available and then it means the ScrollView should scroll its content when getting too small

[jfversluis]

@MAUIoxo if I understand you correctly this is resolved in .NET 8?

[MAUIoxo]

The issue mentioned in the subject yes. Regarding this it can be closed in my opinion.

Another issue was that it did not scroll and this was telling me that the ScrollView is actually too high. I do not know if this is the expected behavior here on a Grid with RowDefinitions="Auto"? Maybe it’s a different issue and we should close this with this subject

[davidortinau]

This happens on 8.0.40 also, but I think it has to do with the nesting of views and overall sizing of the tree.

The tree with what I think are the Sharpnado types is ContentPage > Grid (Auto) > Grid (*) > Grid (Auto) > ContentView > ContentView > Grid (Auto) > ScrollView > StackLayout.

If I do ContentPage > Grid (Auto) > ScrollView > StackLayout it scrolls on rotation.

[MAUIoxo]

Thanks for the information and finding out!

So, would you say it is another/different issue or something that can systematically be avoided by not doing certain things? I know, complex layouts should be reduced. But, I thought this is more due to performance reasons.

How are sizes normally calculated? Starting from outer to inner? So, the size of the outmost element is calculated based on the screen size and the children based on the sizes available for all of them and how it should be displayed based on the criteria specified by the layout managers?