Trascinamento della selezione

Articolo
07/17/2024

Il trascinamento della selezione è un modo intuitivo per trasferire i dati all'interno di un'applicazione o tra applicazioni sul desktop di Windows. Il trascinamento della selezione consente all'utente di trasferire dati tra applicazioni o all'interno di un'applicazione usando un movimento standard (pressione prolungata e panoramica con il dito o pressione e panoramica con un mouse o uno stilo).

API importanti: proprietà CanDrag, proprietà AllowDrop

L'origine del trascinamento, ovvero l'applicazione o l'area in cui viene attivato il movimento di trascinamento, fornisce i dati da trasferire compilando un oggetto pacchetto dati che può contenere formati di dati standard, tra cui testo, RTF, HTML, bitmap, elementi di archiviazione o formati di dati personalizzati. L'origine indica anche il tipo di operazioni supportate: copia, spostamento o collegamento. Quando il puntatore viene rilasciato, si verifica la selezione viene posizionata. La destinazione della selezione, ovvero l'applicazione o l'area sotto il puntatore, elabora il pacchetto di dati e restituisce il tipo di operazione eseguita.

Durante il trascinamento della selezione, l'interfaccia utente di trascinamento fornisce un'indicazione visiva del tipo di operazione di trascinamento della selezione eseguita. Questo feedback visivo viene inizialmente fornito dall'origine, ma può essere modificato dalle destinazioni quando il puntatore si sposta su di essi.

Il trascinamento della selezione moderno è disponibile in tutti i dispositivi che supportano la piattaforma UWP. Consente il trasferimento dei dati tra o all'interno di qualsiasi tipo di applicazione, incluse le app Windows classiche, anche se questo articolo verte sull'API XAML per il trascinamento della selezione moderno. Una volta implementato, il trascinamento della selezione si può usare facilmente in tutte le direzioni, ad esempio da app ad app, da app a desktop e da desktop ad app.

Ecco una panoramica delle operazioni da eseguire per abilitare il trascinamento della selezione nell'app:

Abilitare il trascinamento su un elemento impostando la relativa proprietà CanDrag su true.
Compilare il pacchetto dati. Il sistema gestisce automaticamente immagini e testo, ma per altro contenuto è necessario gestire gli eventi DragStarting e DropCompleted e usarli per costruire un proprio pacchetto dati.
Abilitare il rilascio impostando la proprietà AllowDrop su true su tutti gli elementi che possono ricevere il contenuto rilasciato.
Gestire l'evento DragOver per comunicare al sistema il tipo di operazioni di trascinamento che l'elemento può ricevere.
Elaborare l'evento Drop per ricevere il contenuto rilasciato.

Abilitare il trascinamento

Per abilitare il trascinamento su un elemento, impostare la relativa proprietà CanDrag su true. Questo rende l'elemento, e gli elementi che contiene nel caso di raccolte come ListView, trascinabili.

Essere specifici su ciò che è trascinabile. Gli utenti non vogliono trascinare tutto nell'app, ma solo determinati elementi, ad esempio immagini o testo.

Ecco come impostare CanDrag.

<Image x:Name="Image" CanDrag="True" Margin="10,292,10,0" Height="338"></Image>

Non è necessario eseguire altre operazioni per consentire il trascinamento, a meno che non si voglia personalizzare l'interfaccia utente (descritto più avanti in questo articolo). Il rilascio richiede pochi altri passaggi.

Costruire un pacchetto dati

Nella maggior parte dei casi, il sistema costruirà un pacchetto dati. Il sistema gestisce automaticamente:

Immagini
Testo

Per altri contenuti, sarà necessario gestire gli eventi DragStarting e DropCompleted e usarli per costruire l'oggetto DataPackage.

Abilitare il rilascio

Il markup seguente mostra come usare la proprietà AllowDrop per specificare che un'area dell'app è una destinazione di rilascio valida per un elemento trascinato (l'area specificata non deve avere uno sfondo Null, deve essere in grado di ricevere l'input del puntatore e l'elemento non può essere eliminato in un punto diverso dall'area specificata).

Nota

In genere, un elemento dell'interfaccia utente ha uno sfondo Null per impostazione predefinita. Se vuoi che gli utenti possano eliminare un elemento in qualsiasi punto dell'app, lo sfondo dell'app non può essere Null (se Background="Transparent" lo sfondo non deve essere visibile).

<Grid AllowDrop="True" DragOver="Grid_DragOver" Drop="Grid_Drop"
      Background="LightBlue" Margin="10,10,10,353">
    <TextBlock>Drop anywhere in the blue area</TextBlock>
</Grid>

Gestire l'evento DragOver

L'evento DragOver viene generato quando un utente ha trascinato un elemento sull'app, ma non lo ha ancora rilasciato. In questo gestore, è necessario specificare il tipo di operazioni supportate dall'app usando la proprietà AcceptedOperation. L'operazione di copia è la più comune.

private void Grid_DragOver(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.Copy;
}

Elaborare l'evento Drop

L'evento Drop si verifica quando l'utente rilascia gli elementi in un'area di rilascio valida. Elaborarli usando la proprietà DataView.

Per semplicità, nell'esempio seguente si supporrà che l'utente abbia rilasciato una singola foto e che vi abbia avuto accesso direttamente. In realtà, gli utenti possono rilasciare più elementi di formati diversi contemporaneamente. L'app deve gestire questa possibilità controllando i tipi e il numero di file rilasciati ed elaborare ognuno di conseguenza. È anche consigliabile inviare una notifica all'utente se sta provando a eseguire un'operazione non supportata dall'app.

private async void Grid_Drop(object sender, DragEventArgs e)
{
    if (e.DataView.Contains(StandardDataFormats.StorageItems))
    {
        var items = await e.DataView.GetStorageItemsAsync();
        if (items.Count > 0)
        {
            var storageFile = items[0] as StorageFile;
            var bitmapImage = new BitmapImage();
            bitmapImage.SetSource(await storageFile.OpenAsync(FileAccessMode.Read));
            // Set the image on the main page to the dropped image
            Image.Source = bitmapImage;
        }
    }
}

Personalizzare l'interfaccia utente

Il sistema fornisce un'interfaccia utente predefinita per il trascinamento della selezione. Tuttavia, è anche possibile scegliere di personalizzare varie parti dell'interfaccia utente impostando didascalie e glifi personalizzati oppure scegliendo di non mostrare affatto un'interfaccia utente. Per personalizzare l'interfaccia utente, usare la proprietà DragEventArgs.DragUIOverride.

private void Grid_DragOverCustomized(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.Copy;
    e.DragUIOverride.Caption = "Custom text here"; // Sets custom UI text
    // Sets a custom glyph
    e.DragUIOverride.SetContentFromBitmapImage(
        new BitmapImage(
            new Uri("ms-appx:///Assets/CustomImage.png", UriKind.RelativeOrAbsolute)));
    e.DragUIOverride.IsCaptionVisible = true; // Sets if the caption is visible
    e.DragUIOverride.IsContentVisible = true; // Sets if the dragged content is visible
    e.DragUIOverride.IsGlyphVisible = true; // Sets if the glyph is visibile
}

Quando si usa il tocco, il trascinamento di un oggetto UIElement e l'apertura del relativo menu di scelta rapida condividono movimenti tattili simili; ognuno inizia con una pressione prolungata. Ecco come il sistema risolve le ambiguità tra le due azioni per gli elementi dell'app che supportano entrambe:

Se un utente esercita una pressione prolungata su un elemento e inizia a trascinarlo entro 500 millisecondi, l'elemento viene trascinato e il menu di scelta rapida non viene visualizzato.
Se l'utente esercita una pressione prolungata su un elemento, ma non lo trascina entro 500 millisecondi, viene aperto il menu di scelta rapida.
Dopo aver aperto il menu di scelta rapida, se l'utente tenta di trascinare l'elemento (senza sollevare il dito), il menu di scelta rapida viene ignorato e il trascinamento verrà avviato.

Specificare un elemento in un controllo ListView o GridView come cartella

È possibile specificare un elemento ListViewItem o GridViewItem come cartella. Questo è particolarmente utile per gli scenari TreeView ed Esplora file. A tale scopo, impostare in modo esplicito la proprietà AllowDrop su True su quell'elemento.

Il sistema mostrerà automaticamente le animazioni appropriate per il rilascio in una cartella rispetto a un elemento non cartella. Il codice dell'app deve continuare a gestire l'evento Drop sull'elemento cartella (nonché sull'elemento non cartella) per aggiornare l'origine dati e aggiungere l'elemento rilasciato nella cartella di destinazione.

Abilitare il riordinamento del trascinamento della selezione all'interno di controlli ListView

ListView supporta il riordinamento del trascinamento della selezione, usando un'API molto simile all'API CanDrop descritta in questo articolo. Aggiungere come minimo le proprietà AllowDrop e CanReorderItems.

Per altre informazioni, vedere ListViewBase.CanReorderItems.

Implementazione del trascinamento della selezione personalizzato

La classe UIElement svolge la maggior parte del lavoro di implementazione del trascinamento della selezione. Tuttavia, se si vuole, è possibile implementare la propria versione usando le API seguenti.

Funzionalità	API WinAppSDK Microsoft.UI.Input.DragDrop namespace	API UWP Spazio dei nomi Windows.Applicationmodel.DataTransfer.DragDrop.Core
DragPrimitive	DragOperation	CoreDragOperation
Creare un pacchetto dati	DataPackage	uguale
Passare il trascinamento alla shell	DragOperation.StartAsync	CoreDragOperation.StartAsync
Ricevere il rilascio della selezione dalla shell	DragDropManager.TargetRequested ICoreDropOperationTarget	CoreDragDropManager.TargetRequested ICoreDropOperationTarget

Condividi tramite