Tuesday, May 3, 2011

How can I get ScrollViewer to work inside a StackPanel?

In the following WPF XAML the ScrollViewer does not work (it displays a scroll bar but you cannot scroll and the contents go off the window to the bottom).

I can change the outer StackPanel to a Grid and it will work.

However, in my application from which I reproduced the following code, I need to have an outer StackPanel. What do I have to do to the StackPanel to make the ScrollViewer show a usable scrollbar? e.g. VerticalAlignment="Stretch" Height="Auto" don't work.

<Window x:Class="TestViewScroller123.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <ScrollViewer>
            <StackPanel>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
                <TextBlock Text="This is a test"/>
            </StackPanel>
        </ScrollViewer>
    </StackPanel>
</Window>
From stackoverflow
  • 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. Why do you "need" to have an outer StackPanel?

    HTH, Kent

    Edward Tanguay : wanted to stack things and using the Grid you have to manually manage all the rows and columns, but DockPanel works nicely so I'll switch to that, thanks.
  • This was bugging me for a while too, the trick is to put your stackpanel within a scrollviewer.

    Also, you need to ensure that you set the CanContentScroll property of the scroll viewer to True, here's an example:

      <ScrollViewer Grid.Row="1" Margin="299,12,34,54" Name="ScrollViewer1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Height="195" CanContentScroll="True">
            <StackPanel Name="StackPanel1" OverridesDefaultStyle="False"  Height="193" Width="376" VerticalAlignment="Top" HorizontalAlignment="Left"></StackPanel>
      </ScrollViewer>
    

0 comments:

Post a Comment