ScrollView is getting extended

Question

In my .NET MAUI App, I have a ScrollView which should allow to scroll its content when necessary, e.g. when switched from Portrait orientation to Landscape orientation.

When I start in Portrait orientation it looks like in the following screenshot and is exactly what I want. The green area is restricted to the upper part up to the Bottom-Tabs:

MainPage.xaml

<Grid IgnoreSafeArea="True">
    <Grid RowDefinitions="*, 55">

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

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

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

        </tabs:ViewSwitcher>
            

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

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

                <tabs:BottomTabItem Style="{StaticResource BottomTab}"
                                    IconImageSource="apple_solid.png"
                                    Label="View 2" />

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

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

When I switch to Landscape orientation it does not come out as I expected no matter I did with the the VerticalOptions of the ScrollView (currently also set to FillAndExpand):

In Portrait orientation the green area is restricted and only filled up to the Bottom-Tab. Same I want for the Landscape Orientation. Right now, it also is green behind/below the Bottom-Tab part.

Another problem is that the content of the ScrollView can't be scrolled which tells me that the ScrollView itself seems to be too high.

But why is it calculated correctly in Portrait orientation and not in Landscape? How could I restrict the ScrollView to the area up to the Bottom-Tab and then allow the content to be scrolled?

Answer 1

Thank for the hint from @ToolmakerSteve in comment above regarding "Auto-sized Grid Row":

What seems to work now, was changing the outer Grid of CalculateView.xaml to a Grid with 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>

This, I also tried with and without VerticalOptions="FillAndExpand" and HorizontalOptions="FillAndExpand" and both options seemed to work.