Alive.TabPageControl inner content doesn't scroll

How-to Discussions
1

Here’s my TabPageControl (which is inside my components folder in the root of my app repo:

<Page ux:Class="MarketSubMenu" Dock="Top">
    <Alive.TabPageControl>
        <Alive.TabPage Label="Inicio">
            <NormalProductListing />
        </Alive.TabPage>

        <Alive.TabPage Label="Menú">
            <NormalProductListing />
        </Alive.TabPage>

        <Alive.TabPage Label="Combos">
            <NormalProductListing />
        </Alive.TabPage>

        <Alive.TabPage Label="Promos">
            <NormalProductListing />
        </Alive.TabPage>

        <Alive.TabPage Label="Postres">
            <NormalProductListing />
        </Alive.TabPage>

        <Alive.TabPage Label="Extras">
            <NormalProductListing />
        </Alive.TabPage>
    </Alive.TabPageControl>
</Page>

The <NormalProductListing /> is another component defined as follows:

<Page ux:Class="NormalProductListing" Background="#FFF">
    <Panel>
        <WhileEmpty Items="{trending}">
            <LoadingIndicator ThemeColor="{data.market.color}" />
        </WhileEmpty>
        <WhileString Value="{showTrending}" Equals="1">
            <Title Value="Lo mas vendido" FontSize="20" Color="#333" Background="#fff" Alignment="Top" Font="Roboto" Margin="0, 15, 0, 0" TextAlignment="Center"></Title>
            <ScrollView Margin="0, 60, 0, 0" Alignment="Default" Background="#FFF">
                <StackPanel>
                    <ScrollView>
                        <Panel Alignment="Top">
                            <ColumnLayout ColumnCount="1" />
                            <Each Items="{trending.items}">
                                <Panel Margin="3">
                                    <StackPanel>
                                            <Image Url="{thumbnailImage}" Width="40%" Alignment="Center" />
                                            <Title Value="{name}" FontSize="16" TextWrapping="Wrap" TextAlignment="Center" Color="#333" Alignment="Center"></Title>
                                            <Title Value="Lps. {salePrice}" FontSize="18" TextAlignment="Center" TextWrapping="Wrap" Alignment="Center" Color="#85bb65"></Title>
                                    </StackPanel>
                                    <Clicked>
                                        <RaiseUserEvent EventName="ProductClicked">
                                            <UserEventArg Name="product" StringValue="{itemId}" />
                                            <UserEventArg Name="market" StringValue="diprova" />
                                        </RaiseUserEvent>
                                    </Clicked>
                                </Panel>
                            </Each>
                        </Panel>
                    </ScrollView>
                </StackPanel>
            </ScrollView>
        </WhileString>
    </Panel>
</Page>

By itself, the NormalProductListing component can scroll downwards by itself which is what is intended, but when placed inside the TabPageControl it won’t scroll down.

Any idea why this is happening? I tried wrapping a <ScrollView></Scrollview> around the NormalProductListing component to see if that got it scrolling but still won’t scroll.

Any ideas would be appreciated, here’s a screenshot of it in action:

image

Don’t mind the titles or the items, those are just demo data from Walmart’s API to test stuff. As you can see, when I try to scroll the section where the products are, it just won’t scroll down, it will attempt to scroll but definitely won’t go down, it will return to its original position.

2

This one’s a classic. Don’t put a ScrollView in a StackPanel.

1 Like