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.

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? — SachiraChin, Mar 10 '13 at 05:15
@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...) — letiagoalves, Mar 10 '13 at 11:34
@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? — letiagoalves, Mar 10 '13 at 11:38
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. :) — SachiraChin, Mar 10 '13 at 15:46
@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. — letiagoalves, Mar 10 '13 at 16:07

score 18 · Accepted Answer · answered Mar 10 '13 at 16:05

18

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.

answered Mar 10 '13 at 16:05

letiagoalves

11,224
4
40
66

Here some light on subject http://stackoverflow.com/questions/802821/how-can-i-get-scrollviewer-to-work-inside-a-stackpanel – Boris Ivanov Nov 20 '16 at 14:49
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. – GeorgiG Sep 30 '19 at 12:23

score 3 · Answer 2 · answered Jan 22 '14 at 18:52

3

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.

answered Jan 22 '14 at 18:52

Kundan Vuppala

77
3

so adding an `Height` property to the parent `StackPanel` would make the `ScrollViewer` work? – letiagoalves Jan 23 '14 at 09:56

score 2 · Answer 3 · answered Aug 24 '16 at 23:14

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.

score 0 · Answer 4 · answered Nov 10 '15 at 18:21

0

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

answered Nov 10 '15 at 18:21

anagpuyol

41
2

ScrollViewer not working with StackPanel

4 Answers4