UWP ScrollViewer and StackPanels don't work properly

Question

The UWP ScrollViewer element isn't scrolling at all with my StackPanel . I've tried Grid s and the row definitions but that didn't work either. Here is my current XAML.

GIF showing scrolling not working properly

<Page
    x:Class="Thunderstorm.Pages.Home"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Thunderstorm.Pages"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <ScrollViewer VerticalScrollBarVisibility="Auto" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <StackPanel x:Name="Weather"
                        Background="LightBlue"
                        Height="500"
                        MaxHeight="750"
                        VerticalAlignment="Top" 
                        Padding="10,0,0,0">
                <TextBlock Text="25℉" Style="{ThemeResource HeaderTextBlockStyle}" FontSize="85" Margin="25,25,0,0" MaxWidth="500" HorizontalAlignment="Left"/>
            </StackPanel>
            <StackPanel>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
                <TextBlock Text="Scroll test string to overflow"/>
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
</Page>

(I apologize if this is a stupid question - I'm new to UWP development, also disregard me explicitly defining font size on the TextBlock )

Answer 1

I am unable to reproduce your problem, not even when I place the page in a navigation view as in the GIF example.

I suspect, that there is a parent element that is allowing the content to grow to any size possible. You can test this yourself in a blank project. When you put the XAML you posted in a blank project, the scrolling will work as expected.

When you put the ScrollViewer in a StackPanel or Grid with RowHeight="Auto" , it will not scroll, as the parent "offered" it any space it requires. And the GIF actually proves that - see that the scrollviewer's bottom is cropped (the arrow down is not visible) - that is because something up the hierarchy is letting it to grow to any size it wants.

Does the ScrollViewer have any parent? And if not, how do you display the page in the NavigationView ? If my suggestion does not help, please post the NavigationView XAML as well.

Answer 2

The frame I was calling navigate on was inside of a stackpanel and I never noticed it until now. I removed the stackpanel and scrolling worked with my original code.