WP7 ListBox how to allow user to order items

Question

Scenario: Windows Phone 7 application using MVVM. I have a ListBox that is bound to a collection of items from my ViewModel. The main usage of this view is to allow the user to re-order the items to his liking.

How do I implement this in WP7 ? The way I would like to do this would be to simply allow the user to drag items to the position he wants. Is there any built-in support for such a gesture ? (I haven't been able to find any).

Answer 1

As stated by AnthonyWJones the GesureListener is probably what you are looking for. I just wanted to add that you can use a FluidMoveBehavior for the list in order for the items to animate smoothly when the item order changes. In my opinion it gives a much improved user experience.

A fluid move behavior is simple enough to just "plug in" to your existing list, like this:

<Style TargetType="ListBox" x:Key="FluidListBox">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel>
                    <i:Interaction.Behaviors>
                        <ei:FluidMoveBehavior AppliesTo="Children" Tag="DataContext">
                            <ei:FluidMoveBehavior.EaseY>
                                <BackEase EasingMode="EaseInOut" Amplitude="0.5"/>
                            </ei:FluidMoveBehavior.EaseY>
                            <ei:FluidMoveBehavior.EaseX>
                                <BackEase EasingMode="EaseInOut" Amplitude="0.5"/>
                            </ei:FluidMoveBehavior.EaseX>
                        </ei:FluidMoveBehavior>
                    </i:Interaction.Behaviors>
                </StackPanel>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

You could include in your project the Silverlight for Windows Phone Toolkit and then use the GestureListener to listen for DragStarted, DragDelta and DragComplete events.

Answer 3

This solution works really well

http://blogs.msdn.com/b/jasongin/archive/2011/01/03/wp7-reorderlistbox-improvements-rearrange-animations-and-more.aspx

It's a control you just drop into your app and you can simply enable drag handles and move around items in a ListBox.