Jumpy ListBox while scrolling in Windows Phone 7.5

I recently discovered a bug in the ListBox control for Windows Phone 7.5. In a long list of items (virtualizing list, items with different heights), the list sometimes begins to get jumpy and the list cannot be scrolled to the end. To reproduce the problem, open a long list of items, scroll a little bit, stop the scrolling and tap on an item. Now if you start scrolling again the list begins to get jumpy…

This video shows the problem:

After trying out a lot of possible workarounds and tweaks, I finally found the solution: Simply set the focus to another control if the ListBox’s ManipulationCompleted event has occured. I’ve extended my own ListBox implementation, ExtendedListBox from MyToolkit, with the following method.

protected override void OnManipulationCompleted(ManipulationCompletedEventArgs e)
{
	var page = (PhoneApplicationPage)((PhoneApplicationFrame)Application.Current.RootVisual).Content;
	page.Focus();
 
	base.OnManipulationCompleted(e);
}

The method above will set the focus to the current page and the ListBox will immediately lose focus.(If you encounter problems with this workaround in the ExtendedListBox control you can “turn it off” by setting the UseScrollFix property to false).

If you don’t want to create a new class which inherits from ListBox you can simply listen for the ManipulationCompleted event and set the focus to the current page:

<ListBox x:Name="listBox" ManipulationCompleted="OnManipulationCompleted" />
private void OnManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
	this.Focus(); // set focus to current page
}

I think this is a bug in the ListBox implementation which can only be solved by Microsoft.

More references:

Update from 5/24/2012: Thanks to Jay Bennett from WPCentral for the hint to use OnManipulationCompleted instead of OnGotFocus.

Tags: , ,

6 Responses to “Jumpy ListBox while scrolling in Windows Phone 7.5”

  1. Denis says:

    Oh man! Thank you so much for this: http://blog.rsuter.com/?p=258
    You saved my ass!!! This bug cost me half a day. U r the best.
    BTW: I suppose you could receive tons of Likes or Retweets if you set up corresponding buttons.

  2. eg01st says:

    Thanks a lot!

  3. Jeremy says:

    I had a similar problem with a pseudo chat app that I wanted to auto scroll to the bottom all of the time. Here is what I believe to be a slightly better fix. Change the “ItemsPanel” in your XAML to this template:

    XAML Template:

    XAML ListBox:

    The jumping problem is caused at least in part to the panel’s auto layout code. When the last textbox in the stackpanel is large enough to make it wrap it does it’s scrollable height property wrong. Once I made this change it was rainbows and unicorns.

  4. Jeremy says:

    Dear Moderator: The webpage stripped the out of my last post. Here it is again.

    I had a similar problem with a pseudo chat app that I wanted to auto scroll to the bottom all of the time. Here is what I believe to be a slightly better fix. Change the “ItemsPanel” in your XAML to this template:

    XAML Template:

    XAML ListBox:

    The jumping problem is caused at least in part to the panel’s auto layout code. When the last textbox in the stackpanel is large enough to make it wrap it does it’s scrollable height property wrong. Once I made this change it was rainbows and unicorns.

  5. Jeremy says:

    Ugh! Dear Moderator: Why is your webpage stripping out ALL of my tags?

    Try this fix: Set your listbox’s “ItemsPanel” template to a stackpanel who’s vertical orientation is bottom. There, problem solved.

    • Rico Suter says:

      I think your suggestion creates a non-virtualized list which solves the problem (its like an ItemsPresenter in a ScrollViewer) but it introduces big performance problems when displaying a lot of items in the list. The described problem only occurs in virtualized lists…

Leave a Reply