Search code examples
c#htmlxamarinpositionfixed

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


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?


Solution

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