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.

Solution 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.

Solution 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.

Solution 3

I just gave a MaxHeight to the ScrollViewer. I guess that the ScrollViewer needs to know what its maximum height is in order to figure out, when to show the scrollbars, if you have them on auto visibility.
I just tried it with and without a MaxHeight for the ScrollViewer and it only worked with a MaxHeight attribute.
If I had to hazard a guess, I'd say that the Grid knows its MaxHeight from the attributes you set, but I'm not sure, it's just a guess.

Comments

[letiagoalves]

so adding an Height property to the parent StackPanel would make the ScrollViewer work?

[Boris Ivanov]

Here some light on subject stackoverflow.com/questions/802821/…

[GeorgiG]

Height/Width set to auto don't behave along with StackPanel orientations Vertical/Horizontal. Setting manually width/height fixes the problem (as a PoC). That's why it is much easier to use Grid.