Content inside layout panel not scrolling

Question

Say I have a simple Windows 10 UWP app

<Page
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    <!-- etc -->
    >

    <Grid>

        <ListView>
            <TextBlock Text="Sample text"/>
            <TextBlock Text="Sample text"/>
            <TextBlock Text="Sample text"/>
            <!-- & many more -->
        </ListView>

    </Grid>

</Page>

The large number of ListView items causes it to overflow and scroll, as expected:

However, if I need to add another control as a sibling of the ListView, like so (replacing the Grid with a StackPanel for simplicity)

<Page...>

    <StackPanel>

        <ListView>
            <TextBlock Text="Sample text"/>
            <TextBlock Text="Sample text"/>
            <TextBlock Text="Sample text"/>
            ...
        </ListView>

        <StackPanel>
            <TextBlock Text="StackPanel at the bottom"/>
            <Button Content="Click me"/>
        </StackPanel>

    </StackPanel>

</Page>

then the scrollbar disappears and the ListView isn't scrollable anymore. The content just gets clipped / cut off past the bottom of the window.

What's going on here and how can I make it scroll again?

Answer 1

The key to this is the ScrollViewer control. The reason ListViews and GridViews can scroll in the first place is because they have a ScrollViewer built in.

When you place a ListView inside a parent layout panel (e.g. a StackPanel or a Grid row), if the ListView height is greater than the viewport, the parent panel becomes the full height of the ListView. But StackPanel doesn't implement ScrollViewer so it can't scroll, and you end up with a StackPanel extending off the bottom edge of the viewport.

The fix is simple: put the parent layout panel in question inside a ScrollViewer

<Page...>

    <ScrollViewer VerticalScrollBarVisibility="Auto"> <!--default is "Visible"-->
        <StackPanel>

            <ListView>
                <TextBlock Text="Sample text"/>
                <TextBlock Text="Sample text"/>
                <TextBlock Text="Sample text"/>
                ...
            </ListView>

            <StackPanel>
                <TextBlock Text="StackPanel at the bottom"/>
                <Button Content="Click me"/>
            </StackPanel>

        </StackPanel>
    </ScrollViewer>

</Page>

---

ScrollViewer API reference - MSDN