Content inside layout panel not scrolling - layout

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

Answer 2

Going to add more context to binaryfunt's answer: It depends on the layout logic of the panel you're using!
To note beforehand: ListView internally has it's own ScrollViewer by default.
When laying out it's children, a Grid will typically tell its children they should fit inside the bounds the grid. In the case of the ListView, it's happy to do this, and it's own internal ScrollViewer handles it's children scrolling.
StackPanel on the other hand tells its children they have virtually infinite space to layout in in it's stacking direction - so your ListView has no idea it has to constrain itself to the height of your StackPanel because the StackPanel does not tell it do so and so the ListView never needs to use it's own ScrollViewer as it thinks it has infinite space.
Now, put a StackPanel in a ScrollViewer by itself doesn't help - if you put that ScrollViewer inside a StackPanel you have the same problem as the ListView does - it thinks it has infinite space and so never needs to scroll it's content. But, put the ScrollViewer in a Grid and the grid will give the ScrollViewer a defined size to layout in, and so anything inside the ScrollViewer will now scroll if it get's too big.
Put a ListView inside this StackPanel inside this ScrollViewer? The ListView still thinks it has infinite space and so never needs to use its own scroller, BUT it's also disables and virtualization and performance enhancements the ListView would normally have, as they rely on it's interal ScrollViewer actually being put a too use.
(binaryfunt's XAML answer will work.)