Dall'archivio script > WinRT

Drag & drop di elementi di una lista in una Windows Store app in XAML

di Alessio LeonciniAlessio Leoncini, in WinRT,

In WinRT i controlli che ereditano da ListViewBase, come ListView e GridView, hanno nativamente un buon supporto al drag & drop degli elementi tra loro, questo ci consente di creare con semplicità ottimi livelli di interattività.

Le proprietà di base con cui possiamo ottenere questa funzionalità sono CanDragItems e l'evento DragItemStarting con cui possiamo rispettivamente abilitare il trascinamento degli oggetti all'esterno del controllo e gestire l'inizio del trascinamento stesso; queste impostazioni devono essere usate nel controllo dal quale si vogliono poter far -uscire- gli elementi.

<ListView ItemsSource="{Binding GroupedPeople1}"
            DragItemsStarting="ListView_DragItemsStarting"
            CanDragItems="True">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Background="#FC000000"
                    MinWidth="200">
                <TextBlock Text="{Binding Name}" />
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ListView>

Il codice del gestore dell'evento recupera l'elemento trascinato e lo registra, insieme al riferimento al controllo, nella collezione DataPackagePropertySet.

private void ListView_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
{
  var draggedItem = e.Items.FirstOrDefault();

  //registrazione elemento trascinato
  e.Data.Properties.Add("draggedItem", draggedItem);
  //registrazione contenitore da cui si è trascinato
  e.Data.Properties.Add("listViewSource", sender);
}

Nel controllo di destinazione, invece, possiamo usare AllowDrop e Drop per abilitare il rilascio al suo interno e per gestire il relativo evento.

<ListView ItemsSource="{Binding GroupedPeople2}"
            Drop="ListView_Drop"
            AllowDrop="True">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Background="#FC000000"
                    MinWidth="200">
                <TextBlock Text="{Binding Name}" />
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ListView>

Nel codice recuperiamo il riferimento all'oggetto trascinato sempre dal dictionary Properties e andiamo ad applicare la nostra logica di aggiunta/rimozione nelle rispettive collezioni in binding con i controlli.

private void ListView_Drop(object sender, DragEventArgs e)
{
  object draggedItem;
  e.Data.Properties.TryGetValue("draggedItem", out draggedItem);

  var draggedPeople = draggedItem as Person;

  //scambio di elementi
  var vm = ((MainPageViewModel) this.DataContext);

  if (vm.GroupedPeople1.Contains(draggedPeople))
  {
    vm.GroupedPeople1.Remove(draggedPeople);
    vm.GroupedPeople2.Add(draggedPeople);
  }
  else
  {
    vm.GroupedPeople1.Add(draggedPeople);
    vm.GroupedPeople2.Remove(draggedPeople);
  }
}

In modo molto semplice abbiamo l'effetto di drag&drop.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi