CODEWITHSUNDEEP
c#xamarinmobilexamarin.formsscrollview
Martin Rohwedder
Martin Rohwedder

Reputation: 1751

ScrollView Inside another ScrollView in Xamarin Forms

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.

Upvotes: 2

Views: 2252

Answers (2)

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10938

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:

enter image description here

Upvotes: 3

user14090664
user14090664

Reputation:

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,

Upvotes: 3

Related Questions