Xamarin Forms - XAML - ScrollView contents overflows parent layout

Question

I have a sample page that has an outer grid with 3 rows. first and last (top and bottom) are my Header and Footer sections and in the middle, I have a StackLayout which then has a Frame (for color) which then has a ScrollView and inside of it another StackLayout.

The most inner StackLayout has many items that need to be scrolled, however, my challenge is that the inner items inside a ScrollView->StackLayout are not being constrained by the bounds of its parent and just overflow on top of my header and footer.

Strangely enough, this has just started happening, it used to work just fine and I don't know what changed. Code wise, it's identical... I'm at a loss, please help... Below is my XAML

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Pro4Soft.MobileDevice.Plumbing.Screens.TestPage"
             VerticalOptions="FillAndExpand">
    <ContentView.Content>
        <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Label x:Name="Title" Grid.Row="0" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" FontAttributes="Bold" FontSize="Large">TEST PAGE</Label>
            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="1">
                <Frame BackgroundColor="LightYellow" BorderColor="LightYellow" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="5">
                    <ScrollView x:Name="Scroller">
                        <StackLayout x:Name="Container" Orientation="Vertical" Padding="1">
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                            <Label Text="SUMMY TEXT"></Label>
                        </StackLayout>
                    </ScrollView>
                </Frame>
            </StackLayout>
            <StackLayout x:Name="ControlsContainer" Orientation="Horizontal" Grid.Row="2" HeightRequest="50" HorizontalOptions="FillAndExpand">
                <Button Text="Some btn"/>
            </StackLayout>
        </Grid>
    </ContentView.Content>
</ContentView>

And here is a screenshot of what's going on

DUMMY TEXT OVERFLOWING PARENT COMPONENTS

enter image description here

jai jai · Accepted Answer · 2020-11-05T17:46:18

I checked your code and it's working fine. ScrollView is working fine. Please see below screenshot.

Clean the project and delete bin/obj folder and try again.

Xamarin Forms - XAML - ScrollView contents overflows parent layout

2 Answers