¿Cómo reordenar elementos arrastrándolos y soltándolos dentro de una gran lista vertical mientras se mantiene la capacidad de desplazamiento vertical?

Question

Hay muchos consejos sobre Arrastrar y Soltar en Windows Phone, pero actualmente no puedo juntar todo. Así que espero que pueda darme algunos consejos para alcanzar mi objetivo: Mostrar una lista desplegable de elementos con buen reordenamiento y experiencia de desplazamiento.

Uso un StackPanel para presentar una lista vertical de controles. Digamos que estos controles son CheckBoxes que muestran cierta información (en realidad, creé controles personalizados un poco más complejos). Puede haber muchos elementos, así que puse un ScrollViewer alrededor del StackPanel para que el usuario pueda desplazarse hacia arriba y hacia abajo. Pero ahora también quiero darle al usuario la oportunidad de reordenar los controles en la lista mediante Arrastrar y soltar.

Hay varias cosas que no están claras para mí:

1. ¿Cómo se activa arrastrarlo funcionalidad en el StackPanel? (Por lo tanto, se ve suave y los elementos cambian de posición de una manera animada, agradable de ver, deben seguir haciendo espacio para el elemento que se insertará mientras el usuario lo arrastra).
2. ¿Cómo puedo lograrlo? que el usuario puede desplazarse verticalmente por la lista mientras que aún puede arrastrar y soltar elementos? (Creo que podría haber un "punto de arrastre" especial en cada elemento al que el usuario tiene que arrastrar, para poder diferenciar entre arrastrar y desplazarse).
3. ¿Cómo puedo desplazar automáticamente la lista cuando el usuario arrastra uno elemento al borde superior o inferior si la lista es más grande que la pantalla?
4. ¿Es esta la combinación correcta de controles? Hay alguno mejor? (Pero no quiero calcular las posiciones de los artículos manualmente.)

Me encantaría escuchar sus ideas sobre este tema, cualquier ayuda es muy apreciada!

Answer 1

Hola podrías comprobar esto, podría ser lo que estás buscando: http://blogs.msdn.com/b/jasongin/archive/2011/01/03/wp7-reorderlistbox-improvements-rearrange-animations-and-more.aspx

Answer 2

Puede consultar esta link. Esto tiene un buen reordenamiento de listbox con desplazamiento vertical. Mantenga presionado el elemento a arrastrar durante 1 minuto y comience a arrastrarlo.

Answer 3

La respuesta que buscas es el control ReorderListBox desarrollado por Jason Ginchereau.

Voy a mostrar una implementación rápida de la misma, pero si desea una demostración completa, descargue la fuente de CodePlex here.

En primer lugar, instalar el control de Nuget:

• Herramientas >>>Biblioteca Gestor de paquetes de >>>Administrar paquetes NuGet para la solución ...
• Buscar ReorderListBox, e instalar el creado por Jason Ginchereau

Luego, en el XAML de la página de inicio de su aplicación (es decir. MainPage.xaml), copia y pega el la referencia de ensamblaje resaltada en el teléfono : PhoneApplicationPage etiqueta en la parte superior donde se encuentran las otras referencias de ensamblaje.

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

A continuación, soltar esto en su página XAML

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

Por último, en su código subyacente (es decir MainPage.xaml.cs), que desea definir un ObservableCollection con su lista de datos y asignarlo al reorderListBox.ItemsSource. También es posible que desee guardar el estado de la lista después de que se haya recurrido para la próxima vez que se abra la aplicación. Aquí hay un ejemplo:

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(); 
    } 
}