How to create UI block in Xamarin.Forms same as position: fixed in HTML?

Question

Here's my attempt using Grid and ScrollView:

<?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="MobApp.TestPage">
<ContentPage.Content>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Label Text="News Header" Grid.Column="0" Grid.Row="0" />

    <ScrollView Grid.Column="0" Grid.Row="1">
        <StackLayout x:Name="NewsItems">
            <StackLayout>
                <Label Text="News 1 Title" />
                <Label Text="News 1 Text" />
            </StackLayout>
            <StackLayout>
                <Label Text="News 2 Title" />
                <Label Text="News 2 Text" />
            </StackLayout>
            <StackLayout>
                <Label Text="News 3 Title" />
                <Label Text="News 3 Text" />
            </StackLayout>
            <StackLayout>
                <Label Text="News 4 Title" />
                <Label Text="News 4 Text" />
            </StackLayout>
            <StackLayout>
                <Label Text="News 5 Title" />
                <Label Text="News 5 Text" />
            </StackLayout>
            <StackLayout>
                <Label Text="News 6 Title" />
                <Label Text="News 6 Text" />
            </StackLayout>
            <StackLayout>
                <Label Text="News 7 Title" />
                <Label Text="News 7 Text" />
            </StackLayout>
        </StackLayout>
    </ScrollView>
</Grid>

But when scrolling on Android 4.4 (API 19) Emulator ScrollView content overlaps Label "News Header". In addition in manuals strongly recommends not use nested ScrollView.

How can I solve this task?

Answer 1

This is probably just a case of the first Grid RowDefinition Height needs to be increased slightly or set to auto (if you don't mind the cyclic calculation hit )

<Grid.RowDefinitions>
    <RowDefinition Height="40" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

And yes do not use nested scrollview it dosn't make sense and will likely behave irrationally

Update

Maybe try changing the VerticalOptions in the scrollview or <Label Text="News Header"

LayoutOptions

Update 2

Also try removing the column on the grid and column specifiers on your controls, i have had weird layout issues before regarding columns

Also try and replace your stack layouts with a grid.

Note : I know these suggestions are hit and miss however sometimes you just need to tweak things until they work unfortunately

Answer 2

A fascinating phenomenon that took me a couple of days of life) The task truly is solved through the Grid + ScrollView, everything works fine from my example. Apparently I had something wrong with the emulators. It all started with how I noticed that the emulator (Nougat 7.1) provided by default after installing Xamarin, displays the scroll as needed. I understood and began to dig. All the emulators that I created (with any api from 4.4 to 7.0) - displayed a scroll with the bug above. To change / copy or recreate the same emulator as provided by default did not work, the emulator manager cursed some kind of error. I digged even deeper, it took a lot of time and nerves, but the result paid off:

1. Updated Android SDK to 26 (latest) version
2. Updated Xamarin Android Emulator Manager to the latest version
3. Enabled the hardware virtualization technology in BIOS
4. Through the SDK package manager for Android, installed HAXM. But in fact, it is not installed, but simply downloaded, you need after that to additionally find it on your computer (I have it in C:\\Program Files (x86)\\Android\\android-sdk\\extras\\intel\\Hardware_Accelerated_Execution_Manager) and run intelhaxm-android.exe
5. Happy end. After that, the emulators I created show all the data correctly.