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.

Hermaphrodite

I tried the code you have provided, it works fine. Can you explain what exact issue you are having? Or can you provide code for whole page? – Luanneluanni

@Sach Thank you for your time. I went to sleep, woke up this morning and managed to solve it by changing its parent element (vertical StackPanel) with a Grid (my code is full of grids now...) – Hermaphrodite

@Sach In my question I said I had a Grid with two rows but I was mistaken, it was a StackPanel, the answer was in my question -.- Should I edit the question and answer it or delete it? – Hermaphrodite

You can always answer your own question, it'll help some other person who had same issue. :) I think you should do that. I'm glad you solved it by yourself. :) – Luanneluanni

@Sach Done. I still don't know why it works with a Grid as the parent and not with a StackPanel so it feels to me that it is not the answer. Thanks anyway. – Hermaphrodite

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.

Hermaphrodite

Here some light on subject #803321 – Feingold

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. – Emetine

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.

Errancy

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

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

Fractionize

Answer 4

I made mine work by making the StackPanel a child of the ScrollViewer and setting the Height of the StackPanel

Lunette