Pixel Scrolling for WPF Lists

WPF comes with lots of fun and advantages. We can change the look and behavior of a control very easily which would have been very cumbersome when we are in normal winforms applications. WPF has few flexibilities like Superior Binding capabilities, Animation, Transformation, Virtualizations etc. Each of these made the framework richer in all respect.

In WPF, ListBox and ListView scrolls based on the items. The Scrolling on those controls are not smooth as the ScrollBar doesnt animate the scroller as we do with other controls. Sometimes you will also see the scroller is produced with incorrect size. I mean to say, the same scroller when it is in the top, the size is different than when its in the bottom. This happens basically because of Virtualization implemented on those controls.

ListBox and ListView actually has VirtualizingStackPanel enabled by default. This means, WPF will not actually create all the items and hence determine the scrollbar, rather the size of the ScrollBar is calculated based on the average multiple of items in its display with the number of items actually there in the CollectionView. Thus if you have items which are in display bigger than which are not in view, you will see the size of the ScrollBar increased abruptly whenever you scroll down a bit.

null

You can see in the above snap, the irregular sized items will make the scrollbar to behave strange.

The easiest fix to this issue is you set

<ListBox ItemsSource="{Binding MyList}"
               ScrollViewer.CanContentScroll="False">
          <ListBox.ItemTemplate>
              <DataTemplate>
                  <TextBlock Text="{Binding XYZ}" />
              </DataTemplate>
          </ListBox.ItemTemplate>
      </ListBox>

This will make the scrollviewer to disable the scrolling and hence the ListBox scroller appear.
The main problem with this approach is that, if you Disable the ContentScroll property of the ScrollViewer, it means it will completely stop Virtualizing. And hence if you have a big dataItems, it will cause huge performance issue.

You can also create your own scroolViewer using IScrollInfo. You have to create your custom panel to implement your scroller. This will be best.
I am also thinking to build one panel which might use Virtualizing as well. I will give you the idea when I finish.

For time being you can use CanContentScroll = false.

Abhishek Sur

Abhishek Sur is a Microsoft MVP since year 2011. He is an architect in the .NET platform. He has profound theoretical insight and years of hands on experience in different .NET products and languages. He leads the Microsoft User Group in Kolkata named KolkataGeeks, and regularly organizes events and seminars in various places for spreading .NET awareness. He is associated with the Microsoft Insider list on WPF and C#, and is in constant touch with product group teams. He blogs at http://www.abhisheksur.com His Book : Visual Studio 2012 and .NET 4.5 Expert Development Cookbook. Follow Abhishek at Twitter : @abhi2434

One Comment to “Pixel Scrolling for WPF Lists”

Comments are closed.