WP7 ReorderListBox improvements: rearrange animations and more

Update 2013-10-08: Created a ReorderListBox CodePlex project and pushed a ReorderListBox NuGet package. Use either of those to get the latest version of this control.

Update 2011-12-19: Updated the attached demo project to target the WP 7.1 (Mango) SDK. This required a small change to the auto-scroll logic.

The ReorderListBox control I shared last week was moderately popular, and I've received some great feedback. Today I'm sharing an update to that control that polishes some minor issues and adds a cool new feature I call "rearrange animations". This feature allows the application to programmatically move, insert, or delete items in the list while showing a nice visual indication of what is happening. Specifically, the animations are as follows:

  • Inserted items fade in while later items slide down to make space.
  • Removed items fade out while later items slide up to close the gap.
  • Moved items slide from their previous location to their new location.
  • Moved items which move out of or in to the visible area also fade out / fade in while sliding.

The rearrange animations are complementary to the interactive drag-and-drop reordering, and both features can be enabled at the same time. Unfortunately the rearrange animations are not customizable in XAML due to the way they must be dynamically generated. And when using them you'll have to keep performance in mind: if you make a lot of changes to a large list (such as a full shuffle or sort) then the rearrange animations may take some time to prepare, although once the animations start they should be smooth. In my tests on a Samsung Focus, such complex rearrangements took up to about a second to prepare. Simpler operations such as moving, adding, or removing an item or two are much faster.

Updated source is attached at the ReorderListBox CodePlex site. Here's a complete list of what else has changed since last week:

  • When an item is dropped, it now quickly slides into its proper position rather than suddenly appearing there.
  • Control templates are corrected: a few things were missing compared to the standard ListBox control template, most notably the selected-item accent color.
  • The scrollbar is now made visible while drag-scrolling.
  • Fixed a bug that prevented moving a taller item to the top or bottom position when a shorter item was there.
  • Fixed a bug that caused the list items to jump slightly after moving an item down by more than a page then dropping it.

And now, a video preview of the improved ReorderListBox control!

[Video]