Scrolling in WPF

I realized in my last post on WPF ListBoxes I overlooked a basic concept, how to make the ListBox scroll when there’s more items than can fit. Let’s return to the code from Monday, but resize the Window so only the top two pictures show. Running the app doesn’t change anything, the top two still show with no way to scroll down.

It turns out this is quite easy to fix, in several ways. First, many controls such as the containers (WrapPanel, for example) or listing controls (ListBox, TreeView to name two) have built in ScrollBars. The reason they did not appear in our example is because the ListBox was inside a StackPanel, and the StackPanel extended below the window edge. As such the ListBox didn’t realize it wasn’t fully displayed.

The simple way to fix then, is to remove the StackPanel and have the ListBox be the only thing on the window. As soon as we do, Vertical Scrollbars automatically appear.

Next, if we wanted to, we could wrap the entire panel in <ScrollViewer> tags. ScrollViewer is a XAML tag that will take whatever is inside and move with scrollbars, as needed. What you need to understand though is you’re moving the entire StackPanel, not just the ListBox.

To demonstrate, let’s add a text block to stack panel, just above the list box.  

Now if you run the program, you’ll see the text block scrolls up with the list box.

Note the text block has indeed scrolled up off the screen.

The best way to solve this would be to move the contents to a Grid. The grid sizes correctly take up the space, and allows the list box to automatically display it’s scrollbars.  

If you need horizontal scrollbars, you can add the  ScrollViewer.HorizontalScrollBarVisibility=“Visible” tag to the ListBox declaration.

And there you go, a few ways you can add scrolling to your ListBox, or to an entire container using the <ScrollViewer>.