ScrollViewer not working with StackPanel

Question

Left side of my page I have a vertical StackPanel with the following elements:

• 1 TextBlock
• 1 vertical StackPanel with multiple elements that fills the available space

I am trying to make the second StackPanel scrollable with a ScrollViewer element but with no success. If I define ScrollViewer Height to some value it works but I don't want to because I want it to fill all available vertical space.

I am thinking to apply ScrollViewer Height in code reading StackPanel computed Height but this does not seem the right way of doing it. I tried also to bind Height and ActualHeight to StackPanel Height property but with no results.

<ScrollViewer
    Grid.Row="1"
    VerticalAlignment="Top"
    VerticalScrollBarVisibility="Auto"
    HorizontalScrollBarVisibility="Disabled"
    ScrollViewer.VerticalScrollMode="Enabled"
    ScrollViewer.HorizontalScrollMode="Disabled"
    ScrollViewer.ZoomMode="Disabled">
    <StackPanel x:Name="sptest" Orientation="Vertical">
        <TextBlock Style="{StaticResource PageHeaderTextStyle}">test1</TextBlock>
        <TextBlock Style="{StaticResource PageHeaderTextStyle}">test2</TextBlock>
        <TextBlock Style="{StaticResource PageHeaderTextStyle}">test3</TextBlock>
        <TextBlock Style="{StaticResource PageHeaderTextStyle}">test4</TextBlock>
        <TextBlock Style="{StaticResource PageHeaderTextStyle}">test5</TextBlock>
        <TextBlock Style="{StaticResource PageHeaderTextStyle}">test6</TextBlock>
        <TextBlock Style="{StaticResource PageHeaderTextStyle}">test7</TextBlock>
        <TextBlock Style="{StaticResource PageHeaderTextStyle}">test8</TextBlock>
        <TextBlock Style="{StaticResource PageHeaderTextStyle}">test9</TextBlock>
        <TextBlock Style="{StaticResource PageHeaderTextStyle}">test10</TextBlock>
        <TextBlock Style="{StaticResource PageHeaderTextStyle}">test11</TextBlock>
        <TextBlock Style="{StaticResource PageHeaderTextStyle}">test12</TextBlock>
    </StackPanel>
</ScrollViewer>

Beside I have also a GridView filling horizontal available space and it automatically have scrollbar. I did not define it and it apears when necessary. It is strange that StackPanel does not behave like I want. What am I doing wrong?

EDIT

I found this SO question. It is about WPF and not WinRT but probably it is the same problem. It says:

You can't without fixing the height of the StackPanel. It's designed to grow indefinitely in one direction. I'd advise using a different Panel

I changed my StackPanel to a Grid (I didn't want to because of rows definitions since I only want one column) but ScrollViewer does not work either.

Answer 1

After a long night sleeping I solved it by changing the parent StackPanel to a Grid. I kept the second StackPanel inside ScrollViewer element and it works.

I don't know why the ScrollViewer does not work when its parent is a StackPanel instead a Grid. If someone knows why please explain to me. I didnt want to make a Grid with just one column and two rows because that seems vertical StackPanel purpose.

Even though I solved it without knowing why, I hope this question helps someone else with the same issue and if you are reading this and you can explain this issue, tell me please... I will love to know.

Answer 2

Stack panel is a type of container which can keep on growing as many as children you add into it and provides equal space for each of its children, So the scrollviewer requires a height here to tell the parent to define the space limits; so it can function in its assigned area.

hope that helps.