WP7 ScrollViewer simply not working

Question

My intention is simple. Create a sort-of panel where the user can scroll through the many controls within that specific panel. The controls within that panel may be buttons, or images, or labels..whatever.

Thing is... If I make my ScrollViewer Vertical, it scrolls but it doesn't show all of the controls within itself, AND, it doesn't stay at the point where I scrolled it. And if I make it horizontal, which is how I want it to be, it doesn't scroll at all... Not one bit.

Below is my code: PLEASE HELP!

<ScrollViewer Height="118" Name="scrollerButtons" Width="362" Canvas.Left="167" Canvas.Top="275" VerticalAlignment="Center">
        <StackPanel Height="97" Name="stackPanelButtons" Width="168" Orientation="Horizontal" Canvas.Left="162" Canvas.Top="43" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Button Width="60" Height="60"> </Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
                <Button Width="60" Height="60"></Button>
        </StackPanel>
        </ScrollViewer>

I have added a bunch of buttons just to test the whole thing. Any help is HIGHLY appreciated. Thank you.

score 2 · Accepted Answer · answered Dec 24 '11 at 18:12

2

Remove the Height attribute from the StackPanel. You are forcing the inner StackPanel to truncate its content. Since the inner StackPanel is smaller (97) than the ScrollViewer (118), there is nothing for the ScrollViewer to scroll. The ScrollViewer expects its content to be larger than the ScrollViewer itself.

answered Dec 24 '11 at 18:12

vcsjones

138,677
31
291
286

I fixed it! I added this: ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible" – Subby Dec 24 '11 at 18:32

score 0 · Answer 2 · edited Oct 06 '12 at 01:45

What I did was listen to the SizeChangedEvent on a grid that contains the stack panel and then adjusted the height of the ScrollViewer accordingly. Here, for example I just make it half of the screen size. It is not perfect but it works.

private void ContentPanel_SizeChanged(object sender, SizeChangedEventArgs e)
{
        // Resize the scroll view if the stackpanel is bigger, additional 70 for app bar
        if (e.NewSize.Height >
                (System.Windows.Application.Current.Host.Content.ActualHeight - 70))
        {
                ContentScrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;
                ContentScrollViewer.Height = System.Windows.Application.Current.Host.Content.ActualHeight / 2;
        }
}

WP7 ScrollViewer simply not working

2 Answers2