Xamarin Forms 中另一个 ScrollView 中的 ScrollView

Question

I am developing an app, using Xamarin Forms. In this App I want the user to be able to scroll The entire Page Vertically, but only a part of the page vertically. See this image for a visual reference. I read on the Xamarin ScrollView Documentation, that

ScrollView objects should not be nested. In addition, ScrollView objects should not be nested with other controls that provide scrolling, such as CollectionView, ListView, and WebView.

So, how can I achieve this without nesting two ScrollViews? Thanks in advance for your help.

Answer 1

It's possible to have 2 nested scroll viewers in Xamarin.Forms.

Notice how it says 'scroll viewers should not be nested, this means that it is certainly possible but it is not recommended. I think nested scroll viewers creates a bad user-experience and makes for a clunky app, especially for Xamarin.Forms; but again, here is a demonstration of a nested scroll viewer:

 <ScrollView Orientation="Horizontal">
        <StackLayout Orientation="Vertical">
            <Grid>
            </Grid>
            <ScrollView Orientation="Vertical">
                <Grid>
                </Grid>
            </ScrollView>
        </StackLayout>
    </ScrollView>

I think once you've played around with nested scroll viewers it should be easy for you to implement what you want. I would recommend using a grid with column and row definitions with your desired measurements.

If I've answered your question, please mark this as the correct answer.

Thanks,

Answer 2

According to your screenshot, i make a code sample for your reference.

Xaml:

 <ScrollView Orientation="Vertical">
    <StackLayout Orientation="Horizontal">
        <BoxView BackgroundColor="Blue" WidthRequest="150" />
        <StackLayout Orientation="Vertical">
            <ScrollView Orientation="Horizontal" BackgroundColor="Accent">
                <StackLayout Orientation="Horizontal">
                    <Label
                        HeightRequest="50"
                        Text="A1"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A2"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A3"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A4"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A5"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A6"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A7"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A8"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A9"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="A10"
                        WidthRequest="50" />
                </StackLayout>
            </ScrollView>
            <Label HeightRequest="150" Text="Elem1"  BackgroundColor="Green"/>
            <Label HeightRequest="150" Text="Elem2"  BackgroundColor="Green"/>
            <Label HeightRequest="150" Text="Elem3"  BackgroundColor="Green"/>
            <Label HeightRequest="150" Text="Elem4"  BackgroundColor="Green"/>
            <Label HeightRequest="150" Text="Elem5"  BackgroundColor="Green"/>
            <ScrollView Orientation="Horizontal">
                <StackLayout Orientation="Horizontal">
                    <Label
                        HeightRequest="50"
                        Text="B1"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B2"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B3"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B4"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B5"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B6"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B7"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B8"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B9"
                        WidthRequest="50" />
                    <Label
                        HeightRequest="50"
                        Text="B10"
                        WidthRequest="50" />
                </StackLayout>
            </ScrollView>
        </StackLayout>
    </StackLayout>

</ScrollView>

Screenshot: