A ReorderListBox for Windows Phone 7

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-01-03: An improved version of this control is available.

For a Windows Phone 7 application I was building, I needed a way for the user to easily drag to re-order items in a list. My searches for any existing examples turned up nothing, so I set out to build a custom control myself. It was challenging to say the least, and it forced me to learn a lot more about Silverlight including custom controls, ListBox virtualization, visual states and transitions. (I was certainly not an expert to start with.)

Overall, I'm pretty happy with how it turned out.

• It's a drop-in replacement for a standard ListBox. All properties including item templates still work.
• It's compatible with data-binding: the reordering is propogated back to the items source list.
• It works with ListBox's automatic virtualization to support large item collections efficiently.
• The list scrolls automatically while dragging up or down near the top or bottom margin.
• Visuals are fully template-driven, making use of visual states and transition animations.
• When dragging, the other items smoothly move around to make space for the dragged item.
• The reorder capability can be enabled or disabled via a dependency property.

Each list item has a "handle" shown when reordering is enabled. Dragging on the handle will drag the item up or down, with a semi-transparent highlight. Dragging anywhere else over the list area will scroll the list normally. The default appearance of the handle is shown below, but it is styleable.

Source code and a simple demo app are in the attached ZIP published in the CodePlex project. Please let me know how it works out for you!

Comments

• Anonymous
  December 28, 2010
  Excellent work !!!! Thank you for sharing KRK

• Anonymous
  December 30, 2010
  It works pretty good, provided that the generic.xaml and both classes are both in your application. How about putting the whole stuff into an assembly? I don't like to add that Xaml and classes to each and every project I use ;-)

• Anonymous
  December 30, 2010
  This is very cool, and you've saved me a ton of work because I was just about to get started on a similar solution. I have noticed one bug, though. If your list items are different heights and the last item is shorter than the one you're dragging it's impossible to drag all the way to the bottom since their middles never cross.

• Anonymous
  December 30, 2010
  @Chefgon, thanks for the bug report, I'll take a look. I'm hoping to publish an update in a few days with some minor fixes and improvements based on feedback and my own testing.

• Anonymous
  January 01, 2011
  Jason, Thank you very much for the control. Looking for something like this from the ages and have been managing with the Silverlight Toolkit's drag drop for regular SILVERLIGHT apps. This is kind of a gift for WP7 Silverlight Development.

• Anonymous
  February 02, 2011
  Perfect. It works great:) Just what I've been looking for!

• Anonymous
  May 17, 2011
  I put this control into my app and I still get an exception raised: "ReorderListBoxItem must have a DragHandle ContentPresenter part.". Why?

• Anonymous
  May 17, 2011
  @Sebastian Did you include the ThemesGeneric.xaml in your project? Did you mix code files from this blog post and my follow-up post?

• Anonymous
  May 19, 2011
  This control must be standard in the API. Great work.

• Anonymous
  August 26, 2011
  Great work and thanks for sharing. Exactly the control I needed!

• Anonymous
  March 23, 2012
  How would one store the new index of all the items in the list once an item has been moved? I have a local database and use this reorder list to move items in the database owing to importance and the locations need to be saved into the database after use. Thanks.

• Anonymous
  November 25, 2013
  Great work . Thanks a lot. Can you please tell how can i remove the image which is added along with the list items.

• Anonymous
  May 07, 2014
  The comment has been removed

• Anonymous
  May 07, 2014
  Firman, The nuget package and project files require WP8. But you can download the source code from reorderlistbox.codeplex.com, and manually incorporate it into your project, and it should work with WP7.

• Anonymous
  May 09, 2014
  Thank you :)

• Anonymous
  November 06, 2014
  Hi! How to preserve the position of elements? I have a special property for that, but don't know, how to use it.