How to reorder items by dragging and dropping inside a large vertical list while maintaining vertical scrolling?

Question

There are many drag-and-drop tips on Windows Phone, but currently I can’t put it all together. Therefore, I hope you can give me some tips to achieve my goal: Show a scrollable list of items with good reordering and scrolling.

I am using a StackPanel to represent a vertical list of controls. Let's say these CheckBoxes display some information (in fact, I created some more complex user controls). There can be many elements, so I put a ScrollViewer around the StackPanel so that the user can scroll up and down. But now I also want to give the user the ability to reorder the controls in the list using Drag and Drop.

A few things are unclear to me:

• How to enable the drag and drop feature in the stackpackan? (This way it looks smooth, and the elements change position in an animated, pleasing look, and therefore they should leave space for the element to be inserted while the user drags it.)
• How can I achieve that a user can scroll vertically in a list while still being able to drag and drop items? (I think that each item that the user needs to drag onto may have a special “drag and drop location”, so I can distinguish between drag and drop.)
• How to automatically scroll the list when the user drags one item to the upper or lower border, if the list is larger than the screen?
• Is this even the right combination of controls? Is there a better one? (But I do not want to calculate the position of the positions manually.)

I would like to hear your ideas on this topic, any help is greatly appreciated!

Answer 1

Hi, you can check this out, maybe this is what you are looking for: http://blogs.msdn.com/b/jasongin/archive/2011/01/03/wp7-reorderlistbox-improvements-rearrange-animations-and- more.aspx

Answer 2

You can link to this link. This has a good reordering of the vertical scroll list. Hold the item you want to drag for 1 minute and start dragging.

Answer 3

The answer you're looking for is a ReorderListBox developed by Jason Ginkreo.

I am going to demonstrate its quick implementation, but if you want a full demo, download the source from CodePlex here .

First install the control from Nuget:

• Tools →> Library Package Manager →> Managing NuGet packages to solve ...
• Locate the ReorderListBox and install the file created by Jason Ginchereau

Then in the XAML of the start page of your application (i.e. MainPage.xaml ) copy and paste the highlighted assembly link into the phone: PhoneApplicationPage tag to the top, where other assembly links are located.

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

Then move this to 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 lag (i.e. MainPage.xaml.cs ) you want to define an ObservableCollection as your data list and assign it to reorderListBox.ItemsSource . You can also save the state of the list after it is accessed the next time the application is opened. Here is 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(); } }