Condividi tramite


Riconoscere un movimento di trascinamento della selezione

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:

  1. Abilitare il trascinamento su un elemento aggiungendo un DragGestureRecognizer oggetto alla relativa GestureRecognizers raccolta. Per altre informazioni, vedere Abilitare il trascinamento.
  2. [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.
  3. Abilitare l'eliminazione su un elemento aggiungendo un DropGestureRecognizer oggetto alla relativa GestureRecognizers raccolta. Per altre informazioni, vedere Abilitare l'eliminazione.
  4. [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.
  5. [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:

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

La DragGestureRecognizer classe definisce DragStarting anche gli eventi e DropCompleted che vengono generati se la CanDrag proprietà è true. Quando un DragGestureRecognizer oggetto rileva un movimento di trascinamento, esegue DragStartingCommand e richiama l'evento DragStarting . Quindi, quando l'oggetto DragGestureRecognizer rileva il completamento di un movimento di rilascio, esegue DropCompletedCommand e richiama l'evento DropCompleted .

L'oggetto DragStartingEventArgs che accompagna l'evento DragStarting definisce le proprietà seguenti:

  • Cancel, di tipo bool, indica se l'evento deve essere annullato.
  • Data, di tipo DataPackage, indica il pacchetto di dati che accompagna l'origine di trascinamento. Questa proprietà è di sola lettura.
  • PlatformArgs, di tipo PlatformDragStartingEventArgs?, rappresenta gli argomenti specifici della piattaforma associati all'evento.

In Android la PlatformDragStartingEventArgs classe definisce le proprietà seguenti:

  • Sender, di tipo View, rappresenta la visualizzazione nativa associata all'evento.
  • MotionEvent, di tipo MotionEvent, rappresenta l'evento contenente informazioni per lo stato di trascinamento della selezione.

Inoltre, in Android la PlatformDragStartingEventArgs classe definisce i metodi seguenti:

  • SetDragShadowBuilder, che imposta l'oggetto da utilizzare all'inizio View.DragShadowBuilder del trascinamento.
  • SetClipData, che imposta l'oggetto da utilizzare all'inizio ClipData del trascinamento.
  • SetLocalData, che imposta i dati locali da utilizzare all'inizio del trascinamento.
  • SetDragFlags, che imposta l'oggetto da utilizzare all'inizio DragFlags del trascinamento.

Ad esempio, usare il SetClipData metodo per associare ClipData l'elemento trascinato:

void OnDragStarting(object sender, DragStartingEventArgs e)
{
#if ANDROID
    string content = "insert your content here";
    e.PlatformArgs.SetClipData(Android.Content.ClipData.NewPlainText("Drag data", content));
#endif
}

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.

In Android la PlatformDropCompletedEventArgs classe definisce le proprietà seguenti:

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

L'esempio XAML seguente mostra un DragGestureRecognizer oggetto associato a un oggetto Image:

<Image Source="monkeyface.png">
    <Image.GestureRecognizers>
        <DragGestureRecognizer />
    </Image.GestureRecognizers>
</Image>

In questo esempio, un movimento di trascinamento può essere avviato su Image.

Suggerimento

Un movimento di trascinamento viene avviato con una pressione prolungata seguita da un trascinamento.

Creare un pacchetto di dati

.NET MAUI creerà automaticamente un pacchetto di dati, quando viene avviato un trascinamento, per i controlli seguenti:

La tabella seguente mostra le proprietà lette e tutte le conversioni tentate, quando un trascinamento viene avviato in un controllo di testo:

Controllo Proprietà Conversione
CheckBox IsChecked bool convertito in un oggetto string.
DatePicker Date DateTime convertito in un oggetto string.
Editor Text
Entry Text
Label Text
RadioButton IsChecked bool convertito in un oggetto string.
Switch IsToggled bool convertito in un oggetto string.
TimePicker Time TimeSpan convertito in un oggetto string.

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:

La DataPackagePropertySet classe rappresenta un contenitore di proprietà archiviato come .Dictionary<string,object> Per informazioni sulla DataPackageView classe, vedere Elaborare il pacchetto di dati.

Archiviare dati immagine o testo

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 .

L'esempio XAML seguente mostra un DragGestureRecognizer oggetto che registra un gestore per l'evento DragStarting :

<Path Stroke="Black"
      StrokeThickness="4">
    <Path.GestureRecognizers>
        <DragGestureRecognizer DragStarting="OnDragStarting" />
    </Path.GestureRecognizers>
    <Path.Data>
        <!-- PathGeometry goes here -->
    </Path.Data>
</Path>

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 .

L'esempio XAML seguente mostra un DragGestureRecognizer oggetto che registra un gestore per l'evento DragStarting :

<Rectangle Stroke="Red"
           Fill="DarkBlue"
           StrokeThickness="4"
           HeightRequest="200"
           WidthRequest="200">
    <Rectangle.GestureRecognizers>
        <DragGestureRecognizer DragStarting="OnDragStarting" />
    </Rectangle.GestureRecognizers>
</Rectangle>

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.
  • DragOverCommandParameter, di tipo object, ovvero il parametro passato a DragOverCommand.
  • DragLeaveCommand, di tipo ICommand, che viene eseguito quando l'origine di trascinamento viene trascinata dalla destinazione di rilascio.
  • DragLeaveCommandParameter, di tipo object, ovvero il parametro passato a DragLeaveCommand.
  • DropCommand, di tipo ICommand, che viene eseguito quando l'origine di trascinamento viene rilasciata sulla destinazione di rilascio.
  • DropCommandParameter, di tipo object, ovvero il parametro passato a DropCommand.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

La DropGestureRecognizer classe definisce DragOveranche gli eventi , DragLeavee Drop che vengono generati se la AllowDrop proprietà è true. Quando un oggetto DropGestureRecognizer riconosce un'origine di trascinamento sulla destinazione di rilascio, esegue DragOverCommand e richiama l'evento DragOver . Quindi, se l'origine di trascinamento viene trascinata dalla destinazione di rilascio, DropGestureRecognizer esegue DragLeaveCommand e richiama l'evento DragLeave . Infine, quando riconosce DropGestureRecognizer un movimento di rilascio sulla destinazione di rilascio, esegue DropCommand e richiama l'evento Drop .

La DragEventArgs classe , che accompagna gli eventi e DragLeave , definisce le DragOver proprietà seguenti:

  • Data, di tipo DataPackage, che contiene i dati associati all'origine di trascinamento. Questa proprietà è di sola lettura.
  • AcceptedOperation, di tipo DataPackageOperation, che specifica le operazioni consentite dalla destinazione di rilascio.
  • PlatformArgs, di tipo PlatformDragEventArgs?, rappresenta gli argomenti specifici della piattaforma associati all'evento.

In Android la PlatformDragEventArgs classe definisce le proprietà seguenti:

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

Per informazioni sull'enumerazione DataPackageOperation , vedere Gestire l'evento DragOver.

La DropEventArgs classe che accompagna l'evento Drop definisce le proprietà seguenti:

  • Data, di tipo DataPackageView, che è una versione di sola lettura del pacchetto di dati.
  • Handled, di tipo bool, indica se il gestore eventi ha gestito l'evento o se .NET MAUI deve continuare la propria elaborazione.
  • PlatformArgs, di tipo PlatformDropEventArgs?, rappresenta gli argomenti specifici della piattaforma associati all'evento.

In Android la PlatformDropEventArgs classe definisce le proprietà seguenti:

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

L'esempio XAML seguente mostra un DropGestureRecognizer oggetto associato a un oggetto Image:

<Image BackgroundColor="Silver"
       HeightRequest="300"
       WidthRequest="250">
    <Image.GestureRecognizers>
        <DropGestureRecognizer />
    </Image.GestureRecognizers>
</Image>

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 .

L'enumerazione DataPackageOperation definisce i membri seguenti:

  • None, indica che non verrà eseguita alcuna azione.
  • Copy, indica che il contenuto dell'origine di trascinamento verrà copiato nella destinazione di rilascio.

Importante

Quando viene creato un DragEventArgs oggetto, per impostazione predefinita la AcceptedOperation proprietà è DataPackageOperation.Copy.

L'esempio XAML seguente mostra un DropGestureRecognizer oggetto che registra un gestore per l'evento DragOver :

<Image BackgroundColor="Silver"
       HeightRequest="300"
       WidthRequest="250">
    <Image.GestureRecognizers>
        <DropGestureRecognizer DragOver="OnDragOver" />
    </Image.GestureRecognizers>
</Image>

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:

void OnDragOver(object sender, DragEventArgs e)
{
    e.AcceptedOperation = DataPackageOperation.None;
}

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:

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:

Controllo Proprietà Conversione
CheckBox IsChecked string viene convertito in un oggetto bool.
DatePicker Date string viene convertito in un oggetto DateTime.
Editor Text
Entry Text
Label Text
RadioButton IsChecked string viene convertito in un oggetto bool.
Switch IsToggled string viene convertito in un oggetto bool.
TimePicker Time string viene convertito in un oggetto TimeSpan.

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.

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.