mauisyncfusion

SyncFusion tabView scroll content problem in net Maui

it's simple, the scroll is not working on this easy example and it's driving me crazy

<ContentPage.Content>
<StackLayout>
    <tabView:SfTabView >
        <tabView:SfTabView.Items>
            <tabView:SfTabItem Header="Tab 1">
                <tabView:SfTabItem.Content>
                    <ScrollView BackgroundColor="Yellow" Margin="40" Padding="40">
                        <StackLayout>
                            <StackLayout BackgroundColor="Red" HeightRequest="400">
                                <Label Text="Content 1" VerticalOptions="CenterAndExpand" HeightRequest="400" HorizontalOptions="Center"/>
                            </StackLayout>
                            <StackLayout BackgroundColor="Red" HeightRequest="400" Margin="0,20,0,0">
                                <Label Text="Content 2" VerticalOptions="CenterAndExpand" HeightRequest="400" HorizontalOptions="Center"/>
                            </StackLayout>
                        </StackLayout>
                    </ScrollView>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
        </tabView:SfTabView.Items>
    </tabView:SfTabView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

I'm stuck and don't know what more try

Solution

  • This is by design. A vertically-oriented StackLayout is supposed to render its child elements as much vertical space as possible; The ScrollView inside the StackLayout gets all the space it wants (enough to fill the entire StackLayout). Since the ScrollView's viewport is not vertically constrained or restrained, there's no reason for it to scroll.

    To make it work, you can replace the outer StackLayout with a Grid like below:

    <ContentPage.Content>

    <Grid>
         <tabView:SfTabView >
         ...
            <ScrollView BackgroundColor="Yellow" Margin="40" Padding="40">

               <!--Omitted for brevity>--> 
                    
            </ScrollView>

          ...           
    </Grid>
</ContentPage.Content>