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 (16)

  1. Raghuraman says:

    Excellent work !!!!

    Thank you for sharing

    KRK

  2. Joost van Schaik says:

    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 😉

  3. Chefgon says:

    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.

  4. jasongin says:

    @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.

  5. Chaitanya Venneti says:

    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.

  6. rgullhaug says:

    Perfect. It works great:) Just what I've been looking for!

  7. Sebastian says:

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

  8. jasongin says:

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

  9. Ilya Neporent says:

    This control must be standard in the API. Great work.

  10. Yann says:

    Great work and thanks for sharing. Exactly the control I needed!

  11. Casey_boy says:

    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.

  12. Saiful says:

    Great work . Thanks a lot.

    Can you please tell how can i remove the image which is added along with the list items.

  13. Firman says:

    Hi,

    I want to use this ReorderListBox on my Windows Phone 7.1 apps. I tried Install the library, but i got this error:

    The source at nuget.org [https://www.nuget.org/api/v2/] is unreachable. Falling back to NuGet Local Cache at C:UsersFirman HidayatAppDataLocalNuGetCache

    Installing 'ReorderListBox 1.2.0.0'.

    Successfully installed 'ReorderListBox 1.2.0.0'.

    Adding 'ReorderListBox 1.2.0.0' to Simplz.

    Uninstalling 'ReorderListBox 1.2.0.0'.

    Successfully uninstalled 'ReorderListBox 1.2.0.0'.

    Install failed. Rolling back…

    Install-Package : Could not install package 'ReorderListBox 1.2.0.0'. You are trying to install this package into a project that targets 'Silver

    light,Version=v4.0,Profile=WindowsPhone71', but the package does not contain any assembly references or content files that are compatible with t

    hat framework. For more information, contact the package author.

    At line:1 char:1

    + Install-Package ReorderListBox

    + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

       + CategoryInfo          : NotSpecified: (:) [Install-Package], InvalidOperationException

       + FullyQualifiedErrorId : NuGetCmdletUnhandledException,NuGet.PowerShell.Commands.InstallPackageCommand

    what shoul I do?

  14. jasongin says:

    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.

  15. Firman says:

    Thank you 🙂

  16. Ivan says:

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