How to reorder items by Drag and Drop inside a big vertical list while maintaining vertical scrollability?

Question

There are lots of tips around Drag and Drop on the Windows Phone, but I am currently unable to put everything together. So I hope you can give me some advice to reach my goal: Display a scrollable list of items with good reordering and scroll experience.

I use a StackPanel to present a vertical list of controls. Let's say these controls are CheckBoxes displaying some information (in reality I created a bit more complex custom controls). There can be lots of items so I put a ScrollViewer around the StackPanel so the user can scroll up and down. But now I also want to give the user the opportunity to reorder the controls in the list via Drag and Drop.

Several things are unclear for me:

1. How do I enable Drag and Drop functionality in the StackPanel? (So it looks smooth and the items change position in an animated, nice to look at, way; they should keep making space for the item-to-be-inserted while the user drags it around.)
2. How can I achieve that the user can vertically scroll the list while still being able to Drag and Drop items? (I think there could be a special "drag spot" on every item the user has to drag at, so I can differentiate between dragging and scrolling.)
3. How do I auto-scroll the list when the user drags one item to the upper or lower border if the list is bigger than the screen?
4. Is this even the right combination of controls? Is there a better one? (But I don't want to calculate item positions manually.)

I'd love to hear your ideas on this topic, any help is greatly appreciated!

Answer 1

Hi you could check this out, might be what you're looking for: http://blogs.msdn.com/b/jasongin/archive/2011/01/03/wp7-reorderlistbox-improvements-rearrange-animations-and-more.aspx

Answer 2

You can refer this link. This has a nice reordering of listbox with vertical scrolling. Hold the item to be dragged for 1 min and start dragging.

Answer 3

The answer you seek is the ReorderListBox control developed by Jason Ginchereau.

I'm going to show a quick implementation of it, but if you want a complete demo, then download the source from CodePlex here.

First, install the control from Nuget:

• Tools >>> Library Package Manager >>> Manage NuGet Packages for Solution...
• Search for ReorderListBox, and install the one created by Jason Ginchereau

Then, in the XAML of your app's start page (ie. MainPage.xaml), copy and paste the highlighted assembly reference into the phone:PhoneApplicationPage tag at the top where the other assembly references are located.

    xmlns:rlb="clr-namespace:ReorderListBox;assembly=ReorderListBox"

Next, drop this into your XAML page

    <rlb:ReorderListBox
        x:Name="reorderListBox"
        Grid.Row="2"
        Margin="12,0,12,12"
        IsReorderEnabled="True">
            <rlb:ReorderListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock
                        Margin="12,4,12,4"
                        FontSize="36"
                        Text="{Binding}" />
                 </DataTemplate>
            </rlb:ReorderListBox.ItemTemplate>
    </rlb:ReorderListBox>

Finally, in your code-behind (ie MainPage.xaml.cs), you want to define an ObservableCollection with your list of data and assign it to the reorderListBox.ItemsSource. You may also want to save the state of the list after it has been resorted for the next time the application is opened. Here's an example:

public partial class MainPage : PhoneApplicationPage
{
    public ObservableCollection<string> SampleDataList { get; set; }

    // Constructor
    public MainPage()
    {
        InitializeComponent();

        if (IsolatedStorageSettings.ApplicationSettings.Contains("SampleDataList"))
        {
            SampleDataList = IsolatedStorageSettings.ApplicationSettings["SampleDataList"] as ObservableCollection<string>;
        }
        else
        {
            SampleDataList = new ObservableCollection<string>();
            SampleDataList.Add("Zero");
            SampleDataList.Add("One");
            SampleDataList.Add("Two");
            SampleDataList.Add("Three");
            SampleDataList.Add("Four");
            SampleDataList.Add("Five");
            SampleDataList.Add("Six");
            SampleDataList.Add("Seven");
            SampleDataList.Add("Eight");
            SampleDataList.Add("Nine");
            SampleDataList.Add("Ten");
            SampleDataList.Add("Eleven");
            SampleDataList.Add("Twelve");
            SampleDataList.Add("Thirteen");
            SampleDataList.Add("Fourteen");
        }

        reorderListBox.ItemsSource = SampleDataList;
    }

    protected override void OnNavigatedFrom(NavigationEventArgs e)
    {
        base.OnNavigatedFrom(e);
        IsolatedStorageSettings.ApplicationSettings["SampleDataList"] = SampleDataList;
        IsolatedStorageSettings.ApplicationSettings.Save();
    }
}