I'm trying to implement a scrollable Grid in Xamarin Forms. But the Grid is truncated by the layout.

Image of the problem

I reproduced my problem with the code below, in which I have:

Grid -> RelativeLayout -> ScrollView -> Grid
(-> = 'contains')

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="bugs2.MainPage">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Rectangle Grid.Row="0" Fill="Red" WidthRequest="500" HeightRequest="300" HorizontalOptions="Start" />
        <RelativeLayout Grid.Row="1" VerticalOptions="FillAndExpand" >
            <Rectangle Fill="Pink"  WidthRequest="500" HeightRequest="300" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                            RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}" RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=15}"/>
            <ScrollView  VerticalOptions="FillAndExpand" Padding="0" HorizontalOptions="FillAndExpand" Margin="0" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                            RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}" RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=15}">
                <Grid BackgroundColor="Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Rectangle Fill="Orange" WidthRequest="500" HeightRequest="300" HorizontalOptions="Start" />
                    <Label Grid.Row="1" Grid.Column="0" Text="Etiam luctus" TextColor="Black"/>
                    <Label Grid.Row="2" Grid.Column="0" TextColor="Black" FontSize="Caption"  Text="Praesent volutpat, magna in condimentum molestie, nunc turpis ultricies dolor, a pulvinar lorem neque vitae sem. Phasellus ultricies vulputate lorem quis mattis. Sed accumsan sapien nulla, sit amet commodo augue posuere non. Donec gravida pulvinar erat. Nam dictum hendrerit elit, sed dapibus lectus posuere in. Morbi ullamcorper, mi a molestie pulvinar, urna lorem euismod ante, sed condimentum enim elit sit amet augue. Vestibulum aliquam feugiat sapien. " />
                    <Label Grid.Row="3" Grid.Column="0" Text=" Phasellus quis" TextColor="Black"/>
                    <Label Grid.Row="4" Grid.Column="0" TextColor="Black" FontSize="Caption"  Text="Praesent volutpat, magna in condimentum molestie, nunc turpis ultricies dolor, a pulvinar lorem neque vitae sem. Phasellus ultricies vulputate lorem quis mattis. Sed accumsan sapien nulla, sit amet commodo augue posuere non. Donec gravida pulvinar erat. Nam dictum hendrerit elit, sed dapibus lectus posuere in. Morbi ullamcorper, mi a molestie pulvinar, urna lorem euismod ante, sed condimentum enim elit sit amet augue. Vestibulum aliquam feugiat sapien. " />
                </Grid>
            </ScrollView>
        </RelativeLayout>
    </Grid>
</ContentPage>

I would like to be able to see the entire content of the Grid.

Any hints are welcome!

CodePudding user response：

Move the ScrollView outside of the RelativeLayout. This will allow it to manage its interior correctly.

Depending on your ultimate goal, either put it in a new row: Grid.Row="2", or span two rows: Grid.Row="1" Grid.RowSpan="2". Perhaps with a top margin.

Use Grid RowDefinitions="Auto,Auto,*", if you want that inner Grid's row to use all remaining vertical space.

<Grid RowDefinitions="Auto,Auto,*">
    <Rectangle Grid.Row="0" ... />
    <RelativeLayout Grid.Row="1" .../>
    <ScrollView Grid.Row="2" ...>
        <Grid ...</Grid>
    </ScrollView>
</Grid>