Smoothly Scrolling a ListBox
       by kirupa  |  5 May 2010

Normally, I would come with some contrived text to introduce whatever topic this tutorial will be about. This time around, I am going to save the contrived text for later and show you two examples instead.

Use the slider to scroll the items in the following ListBox, and observe how the scrolling moves from item to item:

Get Microsoft Silverlight

Below is another ListBox displaying the same content. Just like before, scroll through the content in this ListBox to see how the items scroll up and down:

Get Microsoft Silverlight

From having played with both of the ListBoxes, can you see (and feel) the difference? The items in the first ListBox jump suddenly from one to the next, but the items in the second ListBox scroll smoothly. This is certainly more pronounced if you click on the arrow buttons in the ListBox's scrollbar.

By default, ListBoxes you create will exhibit the non-smooth behavior during scrolling. That seems like something you may not want. That is where this tutorial comes in. In this page, learn how to use Expression Blend to easily make scrolling through items in your ListBox smooth!

Why the Scrolling is Jerky
Before I show you how to fix this problem, let's look at why this is happening in the first place.

The reason the scrolling is jerky has to do with the type of ItemsPanel used by default in your ListBox. To help improve performance, your ListBox uses a VirtualizingStackPanel that only draws data that you will actually see as opposed to drawing everything even if you only see a subset of your data.

This concept is explained in great detail in my article UI Virtualization in WPF, so please read that if you are not sure how virtualization works or how VirtualizingStackPanel fits in with all of this.

The downside with optimizing what you see using a VirtualizingStackPanel is that you lose a lot of fine-grained knowledge about how much room each item in your ListBox takes up. The layout is calculated only as each item actually becomes visible, and that doesn't help when you want to smoothly scroll between items.

The solution, unfortunately, is to lose the performance enhancements brought upon by virtualization and switch to an ItemsPanel like StackPanel instead.

Changing the ItemsPanel
To change the ItemsPanel, right click on your ListBox. From the context menu that appears, go to Edit Additional Templates | Edit Layout of Items (ItemsPanel) | Create Empty...

The Create ItemsPanelTemplate Resource dialog will appear:

[ create a new ItemsPanelTemplate ]

Accept the default values and click OK to create a new ItemsPanel to go with your ListBox. When you do this, you will now be editing something lovingly named ItemsPanelTemplate1.

Look in your Objects and Timeline panel and note that you see a StackPanel displayed for your ItemsPanel:

[ the default panel used right now is a StackPanel ]

By default, this would have been a VirtualizingStackPanel, but by you creating a new ItemsPanel template for your ListBox, a StackPanel has been placed instead. You didn't even have to do anything!

When you run your application, the items in your ListBox will now be arranged inside this StackPanel. This will now allow you to scroll through items smoothly.

Conclusion
This was a fairly short article that I hope helped you to make your ListBox's scrolling behavior smooth. Like I mentioned earlier, the tradeoff with making this change is that you lose the performance improvements you would have seen with the default ListBox.

If your ListBox is going to be dealing with lots of items, then you may find the tradeoff between scrolling fluidity and performance to be a difficult call to make. But, after all, making difficult calls like that is why you get paid the big bucks, right?

If you are curious to see the source code for my version of the ListBox, download it below:

Download Source Files

Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!

When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.

Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.

COMMENTS




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.