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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Definire lo stile CSS in base alle dimensioni del container
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Utilizzare database e servizi con gli add-on di Container App
Evitare il flickering dei componenti nel prerender di Blazor 8
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Determinare lo stato di un pod in Kubernetes
Code scanning e advanced security con Azure DevOps
Routing statico e PreRendering in una Blazor Web App
Evitare la script injection nelle GitHub Actions
Disabilitare automaticamente un workflow di GitHub
Eseguire query verso tipi non mappati in Entity Framework Core
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente