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!