Search code examples
xamlwin-universal-appscrollviewerpivotitem

Scrollview inside pivot item doesn't full scroll


Hello I have this Page XAML. The problem its that the text inside each PivotItem doesn't scroll correctly, just scroll a bit but no to the end. Pivot works correctly, you can flip Items Horizontally. How can i achieve the correct behavior on the scrolls?

<StackPanel>
<Pivot>
    <PivotItem>
        <ScrollViewer VerticalScrollMode="Enabled">
            <StackPanel Margin="0,0,12,0">
                <TextBlock HorizontalAlignment="Left" 
                               TextWrapping="WrapWholeWords"
                               Foreground="#5D5B5D" 
                               FontWeight="Light" 
                               TextAlignment="Justify" 
                               Margin="0,0,12,0" 
                               Padding="0,0,4,0" 
                               Text="Change for this a very large text so it can scroll!!! "></TextBlock>
                <Button Content="OK"
                            HorizontalAlignment="Center" 
                            Margin="0,18" 
                            Padding="42,4"></Button>
            </StackPanel>
        </ScrollViewer>
    </PivotItem>
    <PivotItem>
        <ScrollViewer VerticalScrollMode="Enabled">
            <StackPanel Margin="0,0,12,0">
                <TextBlock HorizontalAlignment="Left" 
                               TextWrapping="WrapWholeWords"
                               Foreground="#5D5B5D" 
                               FontWeight="Light" 
                               TextAlignment="Justify" 
                               Margin="0,0,12,0" 
                               Padding="0,0,4,0" 
                               Text="Change for this a very large text so it can scroll!!! "></TextBlock>
                <Button Content="OK"
                            HorizontalAlignment="Center"
                            Margin="0,18" 
                            Padding="42,4"></Button>
            </StackPanel>
        </ScrollViewer>
    </PivotItem>
</Pivot>


Solution

  • From your code I saw that you use a StackPanel outside of the Pivot control, and you didn't set the orientation property, so by default the StackPanel stacks items vertically from top to bottom in the order they are declared. This will influence the Vertical-scroll-mode ScrollViewer inside of it.

    A ScrollViewer works when its content's size bigger than the ScrollViewer's size, when a ScrollViewer is inside of a StackPanel, it has no limit of size, the size will fit the child inside of it, so can't a ScrollViewer work correctly.

    In this case, you can change the StackPanel outside of your Pivot to Grid, it will solve the problem, or you can give your ScrollViewers a limit height like <ScrollViewer VerticalScrollMode="Enabled" Height="300">, this can also solve the problem.