Xamarin.forms: Grid with scroll view in it is not scrollable.

[TimVanDenEnden]

Hi,
I am trying to make a grid with one static bar on the top and under it I want the scrollview fill the rest of the page. When I scroll I want the content go under the top bar.

<ContentPage.Content>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="AUTO"/>            
    </Grid.RowDefinitions>

    <ScrollView Grid.Row="0" BackgroundColor="Yellow">
        <StackLayout>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="AUTO"/>  
                    <RowDefinition Height="AUTO"/>  
                </Grid.RowDefinitions>

                <Frame Grid.Row="0" Padding="10" HeightRequest="500" Margin="10">
                    <Label Text="Test1"/>            
                </Frame> 
                <Frame Grid.Row="1" Padding="10" HeightRequest="500" Margin="10">
                    <Label Text="test2"/>            
                </Frame> 

            </Grid>
        </StackLayout>
    </ScrollView>

    <StackLayout Grid.Row="0">
        <Frame Padding="30">
            <Label Text="Title of page"/>            
        </Frame>            
    </StackLayout>

</Grid>
</ContentPage.Content>

[mohammedwed]

The markup seems to be way over complicated for such a simple view!

StackLayout by default tries to fill the height of its container, but since the grid row height is set to Auto, the grid wants the StackLayout to determine the height, and the StackLayout is waiting for the grid row to specify height in order to render itself.

You also have both the ScrollLayout and the StackLayout positioned at row 0 of the main grid.

I would use only one grid as a container and specify the height of its first row, and set the second row height to * so it can take the rest of the screen, and position the ScrollView in the second row.

You can also refer to the Grid documentation for further details:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid

I hope this helps.

[TimVanDenEnden]

This image above show what I wanna achieve.

When I disable the top bar I can scroll it when I enable it I can not scroll it why is that?

[FedorSulaev]

```
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Frame Grid.Row="0">
        <!-- Header -->
    </Frame>

    <ScrollView Grid.Row="1">
        <Grid>
            <!-- Scrollable content -->
        </Grid>
    </ScrollView>

</Grid>

```

[TimVanDenEnden]

@FedorSulaev Hey thank you for the code above it works 😃, Do you also maybe know how I can get the circle button flying above the scroll view at fixed position like in my image?

[FedorSulaev]

You can put it inside the main grid inside row 1 after the scroll view and it will be on the top.

[TimVanDenEnden]

@FedorSulaev I will like to have it in the right bottom corner. So when you scroll it stays at the right corner.

[FedorSulaev]

@TimVanDenEnden You'll need to set alignment and margins on the button
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-options

[StephaneDelcroix]

@TimVanDenEnden looks like you got your question answered. closing

[TimVanDenEnden]

Yheaa got it working sorry I totally forgot to say thank you.