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

user_14329765 0
Viewed 60

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>
uwp-scrollviewer uno-platform xaml
1 Answers

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>
user_19020580
Related