How can I stop Android ScrollViewer to scroll itself to its first button child

Question

I have a pretty simple page with a header, a footer, and scrollable content. My iOS and UWP app seems to work fine. When I enter the page iOS and UWP starts with the ScrollView Scrolled at the top, but Android seems to scroll down until you can see at least one button.

My page looks something like this (Header, big scrollable content and footer):

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid Height="64"
          Background="Blue">
        <TextBlock Text="Header"
                   Margin="20" />
    </Grid>

    <ScrollViewer Grid.Row="1">
        <StackPanel>
            <TextBlock Text="Top"
                       VerticalAlignment="Top"
                       Height="500" />
            
            <TextBlock Text="Content"
                       FontSize="66"
                       Margin="0,0,0,300" />
            <Button Content="button"
                    Margin="0,0,0,300"/>

            <TextBlock Text="Bottom"
                       VerticalAlignment="Bottom" />
        </StackPanel>
    </ScrollViewer>



    <Grid Height="44"
          Background="Green"
          Grid.Row="2">
        <TextBlock Text="Footer"
                   Margin="10" />
    </Grid>

</Grid>

Answer 1

This arises from an interaction between the native Android scroll viewer (which is implicitly nested inside the Xaml ScrollViewer), which tries to scroll elements into view when they receive focus, and the Button, which takes focus when the Page first loads.

As a workaround to disable this behavior, you can use the BringIntoViewOnFocusChange property:

    <ScrollViewer Grid.Row="1"
                  BringIntoViewOnFocusChange="False">
        <StackPanel>
            <TextBlock Text="Top"
                       VerticalAlignment="Top"
                       Height="500" />
            
            <TextBlock Text="Content"
                       FontSize="66"
                       Margin="0,0,0,300" />
            <Button Content="button"
                    Margin="0,0,0,300"/>

            <TextBlock Text="Bottom"
                       VerticalAlignment="Bottom" />
        </StackPanel>
    </ScrollViewer>