Riconoscere un movimento di trascinamento della selezione
Articolo
Un'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) trascinamento del movimento abilita gli elementi e i pacchetti di dati associati per essere trascinati da una posizione sullo schermo a un'altra usando un movimento continuo. Il trascinamento della selezione può essere eseguito in una singola applicazione oppure può iniziare in un'applicazione e terminare in un'altra.
L'origine di trascinamento, ovvero l'elemento in cui viene avviato il movimento di trascinamento, può fornire i dati da trasferire popolando un oggetto pacchetto dati. Quando viene rilasciata l'origine di trascinamento, si verifica la selezione. Destinazione di rilascio, che è l'elemento sotto l'origine di trascinamento, quindi elabora il pacchetto di dati.
Il processo di abilitazione del trascinamento della selezione in un'app è il seguente:
[facoltativo] Creare un pacchetto di dati. .NET MAUI popola automaticamente il pacchetto di dati per i controlli immagine e testo, ma per altri contenuti è necessario costruire un pacchetto di dati personalizzato. Per altre informazioni, vedere Creare un pacchetto di dati.
[facoltativo] Gestire l'evento DropGestureRecognizer.DragOver per indicare il tipo di operazione consentito dalla destinazione di rilascio. Per altre informazioni, vedere Gestire l'evento DragOver.
[facoltativo] Elaborare il pacchetto di dati per ricevere il contenuto eliminato. .NET MAUI recupererà automaticamente i dati di immagine e testo dal pacchetto di dati, ma per altri contenuti sarà necessario elaborare il pacchetto di dati. Per altre informazioni, vedere Elaborare il pacchetto di dati.
Abilita trascinamento
In .NET MAUI il riconoscimento del DragGestureRecognizer movimento di trascinamento viene fornito dalla classe . Questa classe definisce le proprietà seguenti:
CanDrag, di tipo bool, che indica se l'elemento a cui è associato il riconoscimento movimento può essere un'origine di trascinamento. Il valore predefinito di questa proprietà è true.
DragStartingCommand, di tipo ICommand, che viene eseguito quando viene riconosciuto per la prima volta un movimento di trascinamento.
Sender, di tipo FrameworkElement, rappresenta la visualizzazione nativa associata all'evento.
DragStartingEventArgs, di tipo DragStartingEventArgs, fornisce i dati dell'evento per l'evento nativo.
Handled, di tipo bool, determina se gli argomenti dell'evento sono stati modificati. Questa proprietà deve essere impostata su true quando si modifica l'oggetto DragStartingEventArgs in modo che le modifiche non vengano sottoposte a override.
L'oggetto DropCompletedEventArgs che accompagna l'evento DropCompleted definisce una PlatformArgs proprietà di tipo PlatformDropCompletedEventArgs?, che rappresenta gli argomenti specifici della piattaforma associati all'evento.
Sender, di tipo UIView, rappresenta la visualizzazione nativa associata all'evento.
DragInteraction, di tipo UIDragInteraction, indica l'interazione usata per il trascinamento degli elementi. Questa proprietà viene utilizzata quando PlatformDropCompletedEventArgs viene chiamato da SessionWillEnd.
DragSession, di tipo IUIDragSession, recupera le informazioni associate dalla sessione di trascinamento. Questa proprietà viene utilizzata quando PlatformDropCompletedEventArgs viene chiamato da SessionWillEnd.
DropOperation, di tipo UIDropOperation, rappresenta la risposta a un drop. Questa proprietà viene utilizzata quando PlatformDropCompletedEventArgs viene chiamato da SessionWillEnd.
DropInteraction, di tipo UIDropInteraction, indica l'interazione usata per eliminare gli elementi. Questa proprietà viene utilizzata quando PlatformDropCompletedEventArgs viene chiamato da PerformDrop.
DropSession, di tipo IUIDropSession, recupera le informazioni associate dalla sessione di rilascio. Questa proprietà viene utilizzata quando PlatformDropCompletedEventArgs viene chiamato da PerformDrop.
Per il contenuto diverso da testo e immagini, è necessario creare manualmente un pacchetto di dati.
I pacchetti di dati sono rappresentati dalla DataPackage classe , che definisce le proprietà seguenti:
Properties, di tipo DataPackagePropertySet, che è una raccolta di proprietà che comprendono i dati contenuti in DataPackage. Questa proprietà è una proprietà di sola lettura.
I dati di immagine o testo possono essere associati a un'origine di trascinamento archiviando i dati nella DataPackage.Image proprietà o DataPackage.Text . È possibile aggiungere i dati nel gestore per l'evento DragStarting .
In questo esempio l'oggetto DragGestureRecognizer è associato a un Path oggetto . L'evento DragStarting viene generato quando viene rilevato un movimento di trascinamento in Path, che esegue il OnDragStarting gestore eventi:
void OnDragStarting(object sender, DragStartingEventArgs e)
{
e.Data.Text = "My text data goes here";
}
L'oggetto DragStartingEventArgs che accompagna l'evento DragStarting ha una Data proprietà di tipo DataPackage. In questo esempio la Text proprietà dell'oggetto DataPackage è impostata su un oggetto string. È DataPackage quindi possibile accedere all'oggetto all'eliminazione per recuperare l'oggetto string.
Archiviare i dati nel contenitore delle proprietà
Tutti i dati, incluse immagini e testo, possono essere associati a un'origine di trascinamento archiviando i dati nella DataPackage.Properties raccolta. È possibile aggiungere i dati nel gestore per l'evento DragStarting .
In questo esempio l'oggetto DragGestureRecognizer è associato a un Rectangle oggetto . L'evento DragStarting viene generato quando viene rilevato un movimento di trascinamento in Rectangle, che esegue il OnDragStarting gestore eventi:
void OnDragStarting(object sender, DragStartingEventArgs e)
{
Shape shape = (sender as Element).Parent as Shape;
e.Data.Properties.Add("Square", new Square(shape.Width, shape.Height));
}
L'oggetto DragStartingEventArgs che accompagna l'evento DragStarting ha una Data proprietà di tipo DataPackage. La Properties raccolta dell'oggetto DataPackage , che è una Dictionary<string, object> raccolta, può essere modificata per archiviare i dati necessari. In questo esempio il Properties dizionario viene modificato per archiviare un Square oggetto che rappresenta le dimensioni dell'oggetto Rectangle rispetto a una chiave "Square".
Abilita rilascio
In .NET MAUI il riconoscimento del DropGestureRecognizer movimento di rilascio viene fornito dalla classe . Questa classe definisce le proprietà seguenti:
AllowDrop, di tipo bool, che indica se l'elemento a cui è associato il riconoscimento movimento può essere una destinazione di rilascio. Il valore predefinito di questa proprietà è true.
DragOverCommand, di tipo ICommand, che viene eseguito quando l'origine di trascinamento viene trascinata sulla destinazione di rilascio.
Sender, di tipo View, rappresenta la visualizzazione nativa associata all'evento.
DragEvent, di tipo DragEvent, rappresenta l'evento inviato in varie occasioni durante un'operazione di trascinamento della selezione.
In iOS e Mac Catalyst la PlatformDragEventArgs classe definisce le proprietà seguenti:
Sender, di tipo UIView, rappresenta la visualizzazione nativa associata all'evento.
DropInteraction, di tipo UIDropInteraction, indica l'interazione usata per eliminare gli elementi.
DropSession, di tipo IUIDropSession, recupera le informazioni associate dalla sessione di rilascio.
Inoltre, in iOS e Mac Catalyst la PlatformDragEventArgs classe definisce il SetDropProposal metodo . Questo metodo imposta l'oggetto UIDropProposal da utilizzare quando si trascina un elemento su una visualizzazione:
Sender, di tipo FrameworkElement, rappresenta la visualizzazione nativa associata all'evento.
DragEventArgs, di tipo DragEventArgs, fornisce i dati dell'evento per l'evento nativo.
Handled, di tipo bool, determina se gli argomenti dell'evento sono stati modificati. Questa proprietà deve essere impostata su true quando si modifica l'oggetto DragEventArgs in modo che le modifiche non vengano sottoposte a override.
Ad esempio, la DragEventArgs proprietà può essere usata per accedere alle proprietà native:
void OnDragOver(object sender, DragEventArgs e)
{
#if WINDOWS
var dragUI = e.PlatformArgs.DragEventArgs.DragUIOverride;
dragUI.IsCaptionVisible = false;
dragUI.IsGlyphVisible = false;
#endif
}
In questo esempio, il glifo di trascinamento è disabilitato e anche il testo della didascalia che sovrappone l'oggetto visivo di trascinamento è disabilitato.
In questo esempio, quando viene rilasciata un'origine di trascinamento nella destinazione di Image rilascio, l'origine di trascinamento verrà copiata nella destinazione di rilascio se l'origine di trascinamento è un ImageSourceoggetto . .NET MAUI copia automaticamente le immagini trascinate e il testo in destinazioni di rilascio compatibili.
Gestire l'evento DragOver
L'evento DropGestureRecognizer.DragOver può essere gestito facoltativamente per indicare il tipo di operazioni consentito dalla destinazione di rilascio. È possibile indicare le operazioni consentite impostando la AcceptedOperation proprietà , di tipo DataPackageOperation, sull'oggetto DragEventArgs che accompagna l'evento DragOver .
In questo esempio l'oggetto DropGestureRecognizer è associato a un Image oggetto . L'evento DragOver viene generato quando un'origine di trascinamento viene trascinata sulla destinazione di rilascio, ma non è stata eliminata, che esegue il OnDragOver gestore eventi:
In questo esempio la AcceptedOperation proprietà dell'oggetto DragEventArgs è impostata su DataPackageOperation.None. Questo valore garantisce che non venga eseguita alcuna azione quando viene eliminata un'origine di trascinamento sulla destinazione di rilascio.
Elaborare il pacchetto di dati
L'evento Drop viene generato quando viene rilasciata un'origine di trascinamento su una destinazione di rilascio. .NET MAUI tenta automaticamente di recuperare dati dal pacchetto di dati quando un'origine di trascinamento viene rilasciata nei controlli seguenti:
Controlli immagine. Le immagini possono essere eliminate nei Buttoncontrolli , Imagee ImageButton .
Nella tabella seguente vengono illustrate le proprietà impostate e tutte le conversioni tentate quando un'origine di trascinamento basata su testo viene eliminata in un controllo di testo:
Per il contenuto diverso da testo e immagini, è necessario elaborare manualmente il pacchetto di dati.
La DropEventArgs classe che accompagna l'evento Drop definisce una Data proprietà di tipo DataPackageView. Questa proprietà rappresenta una versione di sola lettura del pacchetto di dati.
Recuperare dati di immagine o testo
I dati di immagine o testo possono essere recuperati da un pacchetto di dati nel gestore per l'evento Drop , usando i metodi definiti nella DataPackageView classe .
La DataPackageView classe include GetImageAsync metodi e GetTextAsync . Il GetImageAsync metodo recupera un'immagine dal pacchetto di dati archiviato nella DataPackage.Image proprietà e restituisce Task<ImageSource>. Analogamente, il GetTextAsync metodo recupera il testo dal pacchetto di dati archiviato nella DataPackage.Text proprietà e restituisce Task<string>.
Nell'esempio seguente viene illustrato un Drop gestore eventi che recupera il testo dal pacchetto di dati per un oggetto Path:
async void OnDrop(object sender, DropEventArgs e)
{
string text = await e.Data.GetTextAsync();
// Perform logic to take action based on the text value.
}
In questo esempio, i dati di testo vengono recuperati dal pacchetto di dati usando il GetTextAsync metodo . È quindi possibile eseguire un'azione basata sul valore di testo.
Recuperare dati dal contenitore delle proprietà
È possibile recuperare tutti i dati da un pacchetto di dati nel gestore per l'evento Drop accedendo alla Properties raccolta del pacchetto di dati.
La DataPackageView classe definisce una Properties proprietà di tipo DataPackagePropertySetView. La DataPackagePropertySetView classe rappresenta un contenitore di proprietà di sola lettura archiviato come .Dictionary<string, object>
L'esempio seguente mostra un Drop gestore eventi che recupera i dati dal contenitore delle proprietà di un pacchetto di dati per un oggetto Rectangle:
void OnDrop(object sender, DropEventArgs e)
{
Square square = (Square)e.Data.Properties["Square"];
// Perform logic to take action based on retrieved value.
}
In questo esempio l'oggetto Square viene recuperato dal contenitore delle proprietà del pacchetto dati, specificando la chiave del dizionario "Square". È quindi possibile eseguire un'azione basata sul valore recuperato.
Trascinare e rilasciare tra applicazioni
In iOS, Mac Catalyst e Windows, il trascinamento può essere avviato in un'unica applicazione con l'operazione di rilascio corrispondente che termina con un'applicazione MAUI .NET. L'app da cui viene trascinato un elemento è l'applicazione di origine e l'app MAUI .NET in cui viene eliminato un elemento è l'applicazione di destinazione .
Non è possibile trascinare da un'applicazione di origine a un'applicazione di destinazione MAUI .NET in Android.
In un iPhone è necessario trascinare un elemento da un'applicazione supportata, ad esempio File o Foto, e quindi trascinare l'elemento nella destinazione di rilascio nell'applicazione. In un iPad è possibile trascinare elementi tra le applicazioni con le app in Split View.
L'esempio seguente mostra un gestore eventi per l'evento DropGestureRecognizer.Drop che elabora un elemento trascinato da un'applicazione di origine all'applicazione di destinazione MAUI .NET:
#if IOS || MACCATALYST
using UIKit;
using Foundation;
#endif
async void OnDropGestureRecognizerDrop(object? sender, DropEventArgs e)
{
var filePaths = new List<string>();
#if IOS || MACCATALYST
var session = e.PlatformArgs?.DropSession;
if (session == null)
return;
foreach (UIDragItem item in session.Items)
{
var result = await LoadItemAsync(item.ItemProvider, item.ItemProvider.RegisteredTypeIdentifiers.ToList());
if (result is not null)
filePaths.Add(result.FileUrl?.Path!);
}
foreach (var item in filePaths)
{
Debug.WriteLine($"Path: {item}");
}
static async Task<LoadInPlaceResult?> LoadItemAsync(NSItemProvider itemProvider, List<string> typeIdentifiers)
{
if (typeIdentifiers is null || typeIdentifiers.Count == 0)
return null;
var typeIdent = typeIdentifiers.First();
if (itemProvider.HasItemConformingTo(typeIdent))
return await itemProvider.LoadInPlaceFileRepresentationAsync(typeIdent);
typeIdentifiers.Remove(typeIdent);
return await LoadItemAsync(itemProvider, typeIdentifiers);
}
#endif
string filePath = filePaths.FirstOrDefault();
// Process the dropped file
}
L'esempio seguente mostra un gestore eventi per l'evento DropGestureRecognizer.Drop che elabora un elemento trascinato da un'applicazione di origine all'applicazione di destinazione :
#if WINDOWS
using Windows.ApplicationModel.DataTransfer;
using Windows.Storage;
#endif
async void OnDropGestureRecognizerDrop(object? sender, DropEventArgs e)
{
var filePaths = new List<string>();
#if WINDOWS
if (e.PlatformArgs is not null && e.PlatformArgs.DragEventArgs.DataView.Contains(StandardDataFormats.StorageItems))
{
var items = await e.PlatformArgs.DragEventArgs.DataView.GetStorageItemsAsync();
if (items.Any())
{
foreach (var item in items)
{
if (item is StorageFile file)
filePaths.Add(item.Path);
}
}
}
#endif
string filePath = filePaths.FirstOrDefault();
// Process the dropped file
}
Ottenere la posizione del movimento
La posizione in cui si è verificato un movimento di trascinamento o rilascio può essere ottenuta chiamando il GetPosition metodo su un DragEventArgsoggetto , DragStartingEventArgso DropEventArgs . Il GetPosition metodo accetta un Element? argomento e restituisce una posizione come Point? oggetto :
void OnDragStarting(object sender, DragStartingEventArgs e)
{
// Position relative to screen
Point? screenPosition = e.GetPosition(null);
// Position relative to specified element
Point? relativeToImagePosition = e.GetPosition(image);
}
L'argomento Element? definisce l'elemento a cui deve essere ottenuta la posizione rispetto a . Se si specifica un null valore come argomento, il GetPosition metodo restituisce un Point? oggetto che definisce la posizione del movimento di trascinamento o rilascio rispetto allo schermo.
Collabora con noi su GitHub
L'origine di questo contenuto è disponibile in GitHub, in cui è anche possibile creare ed esaminare i problemi e le richieste pull. Per ulteriori informazioni, vedere la guida per i collaboratori.
Feedback su .NET MAUI
.NET MAUI è un progetto di open source. Selezionare un collegamento per fornire feedback:
Creare un'interfaccia utente con data binding. L'interfaccia utente viene aggiornata automaticamente in base ai dati più recenti, mentre i dati vengono aggiornati in risposta alle modifiche nell'interfaccia utente.