Need a way to place a <ScrollView/> over an <Image/> in Xamarin layout XAML

Question

I have the need for a scrollview on top of a background image. I found a number of recommendations to use a , making the image the first element. What I end up with is:

<ContentPage>
    <ContentPage.Content>
        <RelativeLayout Padding="0">
            <Image Aspect="AspectFill" Source="Background" />
            <ScrollView>
                <!-- Various components -->
            </ScrollView>
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

Using the above, I get a screen that looks correct, but the ScrollView doesn't scroll.

Am I missing something? Or does anyone have an alternative to the layout above? The background needs to be fixed and not scroll with the other elements on "top" of it.

Answer 1

It turns out there is a way to do this such that the two main requirements (fixed background, scrollable elements) are met.

Instead of using RelativeLayout, use a Grid. The following layout works as needed...

<ContentPage>
    <ContentPage.Content>
        <!-- Use a Grid, rather than a RelativeLayout -->
        <Grid Padding="0">
            <Image Aspect="AspectFill" Source="Background" />
            <ScrollView>
                <!-- Various components -->
            </ScrollView>
        </Grid>
    </ContentPage.Content>
</ContentPage>