Freigeben über


Erkennen einer Drag-and-Drop-Geste

Eine .NET Multiplattform App UI(.NET MAUI)-Drag-and-Drop-Gestenerkennung ermöglicht es, Elemente und die zugehörigen Datenpakete mit einer kontinuierlichen Geste von einer Stelle auf dem Bildschirm an eine andere Stelle zu ziehen. Drag & Drop kann in einer einzelnen App stattfinden, oder in einer App beginnen und in einer anderen App enden.

Die Drag-Quelle, das Element, auf dem die Drag-Geste initiiert wird, kann Daten bereitstellen, die durch Auffüllen eines Datenpaketobjekts übertragen werden. Wenn die Drag-Quelle losgelassen wird, findet das Ablegen statt. Das Drop-Ziel, das Element unter der Drag-Quelle, verarbeitet dann das Datenpaket.

Das Verfahren zur Aktivierung von Drag-and-Drop in einer App ist wie folgt:

  1. Aktivieren Sie Drag für ein Element, indem Sie dessen GestureRecognizers-Sammlung ein DragGestureRecognizer-Objekt hinzufügen. Weitere Informationen finden Sie unter Aktivieren von Drag.
  2. [optional] Erstellen Sie ein Datenpaket. .NET MAUI füllt das Datenpaket für Bild- und Textsteuerelemente automatisch auf, aber für andere Inhalte müssen Sie Ihr eigenes Datenpaket erstellen. Weitere Informationen finden Sie unter Erstellen eines Datenpakets.
  3. Ermöglicht das Ablegen auf einem Element durch Hinzufügen eines DropGestureRecognizer-Objekts zu seiner GestureRecognizers-Sammlung. Weitere Informationen finden Sie unter Aktivieren von Drop.
  4. [optional] Verarbeiten Sie das DropGestureRecognizer.DragOver-Ereignis, um den Vorgangstyp anzugeben, den das Drop-Ziel zulässt. Weitere Informationen finden Sie unter Verarbeiten des DragOver-Ereignisses.
  5. [optional] Verarbeiten Sie das Datenpaket, um den gelöschten Inhalt zu empfangen. .NET MAUI ruft automatisch Bild- und Textdaten aus dem Datenpaket ab, aber für andere Inhalte müssen Sie das Datenpaket verarbeiten. Weitere Informationen finden Sie unter Verarbeiten des Datenpakets.

Aktivieren von Drag

In .NET MAUI wird die Erkennung von Drag-Gesten von der Klasse DragGestureRecognizer bereitgestellt. Diese Klasse definiert die folgenden Eigenschaften:

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Die Klasse DragGestureRecognizer definiert auch die Ereignisse DragStarting und DropCompleted, die ausgelöst werden, wenn die Eigenschaft CanDragtrue ist. Wenn ein DragGestureRecognizer-Objekt eine Drag-Geste erkennt, führt es den DragStartingCommand aus und ruft das DragStarting-Ereignis auf. Wenn dann das DragGestureRecognizer-Objekt die Ausführung einer Drop-Geste erkennt, führt es den DropCompletedCommand aus und ruft das DropCompleted-Ereignis auf.

Das DragStartingEventArgs-Objekt, das das DragStarting-Ereignis begleitet, definiert folgende Eigenschaften:

  • Cancel vom Typ bool gibt an, ob das Ereignis abgebrochen werden sollte.
  • Data vom Typ DataPackage gibt das Datenpaket an, das die Drag-Quelle begleitet. Dies ist eine schreibgeschützte Eigenschaft.
  • PlatformArgs vom Typ PlatformDragStartingEventArgs? steht für die mit dem Ereignis verbundenen plattformspezifischen Argumente.

Die PlatformDragStartingEventArgs-Klasse definiert die folgenden Eigenschaften:

  • Sender, vom Typ View, stellt die systemeigene Ansicht, die an das Ereignis angefügt ist.
  • MotionEvent, vom Typ MotionEvent, stellt das Ereignis dar, das Informationen zum Ziehen und Ablegen (Drag & Drop) des Status enthält.

Darüber hinaus definiert die Klasse PlatformDragStartingEventArgs unter Android die folgenden Methoden:

  • SetDragShadowBuilder, der den View.DragShadowBuilder für den Beginn des Ziehens festlegt.
  • SetClipData, die den ClipData für den Beginn des Ziehens festlegt.
  • SetLocalData, mit dem die lokalen Daten festgelegt werden, die zu Beginn des Ziehens verwendet werden.
  • SetDragFlags, die den DragFlags für den Beginn des Ziehens festlegt.

Verwenden Sie zum Beispiel die Methode SetClipData, um ClipData mit dem gezogenen Element zu verknüpfen:

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
}

Das DropCompletedEventArgs-Objekt, das das DropCompleted-Ereignis begleitet, definiert eine PlatformArgs-Eigenschaft vom Typ PlatformDropCompletedEventArgs?, die die mit dem Ereignis verbundenen plattformspezifischen Argumente darstellt.

Die PlatformDropCompletedEventArgs-Klasse definiert die folgenden Eigenschaften:

  • Sender, vom Typ View, stellt die systemeigene Ansicht, die an das Ereignis angefügt ist.
  • DragEvent vom Typ DragEvent stellt das Ereignis dar, das zu verschiedenen Zeitpunkten während eines Drag & Drop-Vorgangs gesendet wird.

Das folgende XAML-Beispiel zeigt einen DragGestureRecognizer, der einem Image angefügt ist:

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

In diesem Beispiel kann eine Ziehgeste auf dem Image initiiert werden.

Tipp

Eine Drag-Geste wird durch langes Drücken und anschließendes Ziehen ausgelöst.

Erstellen eines Datenpakets

NET MAUI erstellt automatisch ein Datenpaket für die folgenden Steuerelemente, wenn ein Ziehen initiiert wird:

In der folgenden Tabelle sind die Eigenschaften aufgeführt, die beim Initiieren eines Ziehens für ein Textsteuerelement gelesen, und alle Konvertierungen, die versucht werden:

Control Eigenschaft Konvertierung
CheckBox IsChecked bool umgewandelt in ein string.
DatePicker Date DateTime umgewandelt in ein string.
Editor Text
Entry Text
Label Text
RadioButton IsChecked bool umgewandelt in ein string.
Switch IsToggled bool umgewandelt in ein string.
TimePicker Time TimeSpan umgewandelt in ein string.

Für andere Inhalte als Text und Bilder müssen Sie selbst ein Datenpaket erstellen.

Datenpakete werden von der DataPackage-Klasse dargestellt, die die folgenden Eigenschaften definiert:

Die DataPackagePropertySet-Klasse stellt eine als Dictionary<string,object> gespeicherte Eigenschaftensammlung dar. Weitere Informationen zur DataPackageView-Klasse finden Sie unter Verarbeiten des Datenpakets.

Speichern von Bild- oder Textdaten

Bild- oder Textdaten können mit einer Ziehquelle verknüpft werden, indem die Daten in der DataPackage.Image- oder DataPackage.Text-Eigenschaft gespeichert werden. Sie können die Daten im Handler für das Ereignis DragStarting hinzufügen.

Das folgende XAML-Beispiel zeigt einen DragGestureRecognizer, der einen Handler für das DragStarting-Ereignis registriert:

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

In diesem Beispiel wird der DragGestureRecognizer einem Path-Objekt angefügt. Das DragStarting-Ereignis wird ausgelöst, wenn eine Ziehgeste auf dem Path erkannt wird, wodurch der OnDragStarting-Ereignishandler ausgeführt wird:

void OnDragStarting(object sender, DragStartingEventArgs e)
{
    e.Data.Text = "My text data goes here";
}

Das DragStartingEventArgs-Objekt, das das DragStarting-Ereignis begleitet, hat eine Data-Eigenschaft vom Typ DataPackage. In diesem Beispiel wird die Text-Eigenschaft des DataPackage-Objekts auf einen string festgelegt. Auf das DataPackage kann dann beim Ablegen zugegriffen werden, um den string abzurufen.

Speichern von Daten in der Eigenschaftensammlung

Alle Daten einschließlich Bilder und Text können mit einer Drag-Quelle verknüpft werden, indem die Daten in der DataPackage.Properties-Sammlung gespeichert werden. Sie können die Daten im Handler für das Ereignis DragStarting hinzufügen.

Das folgende XAML-Beispiel zeigt einen DragGestureRecognizer, der einen Handler für das DragStarting-Ereignis registriert:

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

In diesem Beispiel wird der DragGestureRecognizer einem Rectangle-Objekt angefügt. Das DragStarting-Ereignis wird ausgelöst, wenn eine Ziehgeste auf dem Rectangle erkannt wird, wodurch der OnDragStarting-Ereignishandler ausgeführt wird:

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));
}

Das DragStartingEventArgs-Objekt, das das DragStarting-Ereignis begleitet, hat eine Data-Eigenschaft vom Typ DataPackage. Die Properties-Sammlung des DataPackage-Objekts, eine Dictionary<string, object>-Sammlung, kann so geändert werden, dass alle erforderlichen Daten gespeichert werden. In diesem Beispiel wird das Properties-Wörterbuch geändert, um ein Square-Objekt zu speichern, das die Größe des Rectangle gegenüber einem „Quadrat“-Schlüssel darstellt.

Aktivieren des Ablegens

In .NET MAUI wird die Erkennung von Fallgesten von der Klasse DropGestureRecognizer bereitgestellt. Diese Klasse definiert die folgenden Eigenschaften:

  • AllowDrop vom Typ bool gibt an, ob das Element, dem die Gestenerkennung angefügt ist, ein Ablageziel sein kann. Der Standardwert dieser Eigenschaft ist true.
  • DragOverCommand vom Typ ICommand, der ausgeführt wird, sobald die Drag-Quelle über das Ablageziel gezogen wird.
  • DragOverCommandParameter, vom Typ object: Parameter, der an den DragOverCommand übergeben wird.
  • DragLeaveCommand vom Typ ICommand, der ausgeführt wird, sobald die Drag-Quelle vom Ablageziel gezogen wird.
  • DragLeaveCommandParameter, vom Typ object: Parameter, der an den DragLeaveCommand übergeben wird.
  • DropCommand vom Typ ICommand, der ausgeführt wird, sobald die Drag-Quelle über dem Ablageziel abgelegt wird.
  • DropCommandParameter, vom Typ object: Parameter, der an den DropCommand übergeben wird.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Die Klasse DropGestureRecognizer definiert auch die Ereignisse DragOver, DragLeave und Drop, die ausgelöst werden, wenn die Eigenschaft AllowDroptrue ist. Wenn ein DropGestureRecognizer eine Drag-Quelle über dem Ablageziel erkennt, führt er den DragOverCommand aus und ruft das DragOver-Ereignis auf. Wenn dann die Drag-Quelle vom Ablageziel gezogen wird, führt DropGestureRecognizerDragLeaveCommand aus und ruft das DragLeave-Ereignis auf. Wenn ein DropGestureRecognizer schließlich eine Drag-Quelle über dem Ablageziel erkennt, führt er den DropCommand aus und ruft das Drop-Ereignis auf.

Die Klasse DragEventArgs, die die Ereignisse DragOver und DragLeave begleitet, definiert die folgenden Eigenschaften:

  • Data vom Typ DataPackage, wo die mit der Drag-Quelle verknüpften Daten enthalten sind. Diese Eigenschaft ist schreibgeschützt.
  • AcceptedOperation vom Typ DataPackageOperation, womit angegeben wird, welche Vorgänge das Ablageziel zulässt.
  • PlatformArgs vom Typ PlatformDragEventArgs? steht für die mit dem Ereignis verbundenen plattformspezifischen Argumente.

Die PlatformDragEventArgs-Klasse definiert die folgenden Eigenschaften:

  • Sender, vom Typ View, stellt die systemeigene Ansicht, die an das Ereignis angefügt ist.
  • DragEvent vom Typ DragEvent stellt das Ereignis dar, das zu verschiedenen Zeitpunkten während eines Drag & Drop-Vorgangs gesendet wird.

Informationen zur DataPackageOperation-Enumeration finden Sie unter Verarbeiten des DragOver-Ereignisses.

Die DropEventArgs-Klasse, die das Drop-Ereignis begleitet, definiert folgende Eigenschaften:

  • Data vom Typ DataPackageView, eine schreibgeschützte Version des Datenpakets.
  • Handled, vom Typ bool, zeigt an, ob der Ereignishandler das Ereignis behandelt hat oder ob .NET MAUI seine eigene Verarbeitung fortsetzen soll.
  • PlatformArgs vom Typ PlatformDropEventArgs? steht für die mit dem Ereignis verbundenen plattformspezifischen Argumente.

Die PlatformDropEventArgs-Klasse definiert die folgenden Eigenschaften:

  • Sender, vom Typ View, stellt die systemeigene Ansicht, die an das Ereignis angefügt ist.
  • DragEvent vom Typ DragEvent stellt das Ereignis dar, das zu verschiedenen Zeitpunkten während eines Drag & Drop-Vorgangs gesendet wird.

Das folgende XAML-Beispiel zeigt einen DropGestureRecognizer, der einem Image angefügt ist:

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

Wenn in diesem Beispiel eine Drag-Quelle auf dem Image Ablageziel abgelegt wird, wird die Drag-Quelle auf das Ablageziel kopiert, wenn die Ziehquelle ein ImageSource ist. NET MAUI kopiert gezogene Bilder und Texte automatisch in kompatible Ablageziele.

Behandeln des DragOver-Ereignisses

Das DropGestureRecognizer.DragOver-Ereignis kann optional verarbeitet werden, um anzugeben, welche Typen von Vorgängen das Ablageziel zulässt. Sie können die zulässigen Operationen angeben, indem Sie die Eigenschaft AcceptedOperation vom Typ DataPackageOperation auf dem DragEventArgs-Objekt einstellen, das das Ereignis DragOver begleitet.

Die DataPackageOperation-Enumeration definiert die folgenden Members:

  • None gibt an, dass keine Aktion ausgeführt wird.
  • Copy gibt an, dass der Inhalt der Drag-Quelle in das Ablageziel kopiert wird.

Wichtig

Wenn ein DragEventArgs-Objekt erstellt wird, wird die Eigenschaft AcceptedOperation standardmäßig auf DataPackageOperation.Copy gesetzt.

Das folgende XAML-Beispiel zeigt einen DropGestureRecognizer, der einen Handler für das DragOver-Ereignis registriert:

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

In diesem Beispiel wird der DropGestureRecognizer einem Image-Objekt angefügt. Das DragOver-Ereignis wird ausgelöst, wenn eine Drag-Quelle über das Ablegeziel gezogen, aber noch nicht abgelegt wurde, wodurch der OnDragOver-Ereignishandler ausgeführt wird:

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

In diesem Beispiel wird die AcceptedOperation-Eigenschaft des DragEventArgs-Objekts auf DataPackageOperation.None festgelegt. Dieser Wert stellt sicher, dass keine Aktion ausgeführt wird, wenn eine Drag-Quelle über dem Ablegeziel abgelegt wird.

Verarbeiten des Datenpakets

Das Ereignis Drop wird ausgelöst, wenn eine Drag-Quelle über einem Ablageziel losgelassen .NET MAUI versucht automatisch, Daten aus dem Datenpaket abzurufen, wenn eine Drag-Quelle auf die folgenden Steuerelemente gezogen wird:

Die folgende Tabelle zeigt die Eigenschaften, die festgelegt werden, und alle Konvertierungen, die versucht werden, wenn eine textbasierte Drag-Quelle auf einem Textsteuerelement abgelegt wird:

Steuerelement Eigenschaft Konvertierung
CheckBox IsChecked string wird in bool konvertiert.
DatePicker Date string wird in DateTime konvertiert.
Editor Text
Entry Text
Label Text
RadioButton IsChecked string wird in bool konvertiert.
Switch IsToggled string wird in bool konvertiert.
TimePicker Time string wird in TimeSpan konvertiert.

Für andere Inhalte als Text und Bilder müssen Sie das Datenpaket selbst verarbeiten.

Die DropEventArgs-Klasse, die das Drop-Ereignis begleitet, definiert eine Data-Eigenschaft vom Typ DataPackageView. Diese Eigenschaft stellt eine schreibgeschützte Version des Datenpakets dar.

Abrufen von Bild- oder Textdaten

Bild- oder Textdaten können mithilfe von Methoden, die in der DataPackageView-Klasse definiert sind, aus einem Datenpaket im Handler für das Drop-Ereignis abgerufen werden.

Die DataPackageView-Klasse beinhaltet die GetImageAsync- und die GetTextAsync-Methode. Die Methode GetImageAsync ruft ein Bild aus dem Datenpaket ab, das in der Eigenschaft DataPackage.Image gespeichert wurde, und gibt Task<ImageSource> zurück. In ähnlicher Weise ruft die Methode GetTextAsync Text aus dem Datenpaket ab, der in der Eigenschaft DataPackage.Text gespeichert wurde, und gibt Task<string> zurück.

Das folgende Beispiel zeigt einen Drop-Ereignishandler, der aus dem Datenpaket Text für einen Path abruft:

async void OnDrop(object sender, DropEventArgs e)
{
    string text = await e.Data.GetTextAsync();

    // Perform logic to take action based on the text value.
}

In diesem Beispiel werden Textdaten mithilfe der GetTextAsync-Methode aus dem Datenpaket abgerufen. Dann kann eine Aktion durchgeführt werden, die auf dem Textwert basiert.

Abrufen von Daten aus der Eigenschaftensammlung

Alle Daten können für das Drop-Ereignis aus einem Datenpaket im Handler abgerufen werden, indem auf die Properties-Sammlung des Datenpakets zugegriffen wird.

Die DataPackageView-Klasse definiert eine Properties-Eigenschaft vom Typ DataPackagePropertySetView. Die DataPackagePropertySetView-Klasse stellt eine als Dictionary<string, object> gespeicherte schreibgeschützte Eigenschaftensammlung dar.

Das folgende Beispiel zeigt einen Drop-Ereignishandler, der aus der Eigenschaftensammlung eines Datenpakets Daten für ein Rectangle abruft:

void OnDrop(object sender, DropEventArgs e)
{
    Square square = (Square)e.Data.Properties["Square"];

    // Perform logic to take action based on retrieved value.
}

In diesem Beispiel wird durch Angabe des Wörterbuchschlüssels „Square“ das Square-Objekt aus der Eigenschaftensammlung des Datenpakets abgerufen. Dann kann eine Aktion durchgeführt werden, die auf dem abgerufenen Wert basiert.

Abrufen der Gestikposition

Die Position, an der eine Drag- oder Drop-Geste stattgefunden hat, kann durch den Aufruf der Methode GetPosition für ein DragEventArgs-, DragStartingEventArgs- oder DropEventArgs-Objekt ermittelt werden. Die GetPosition-Methode nimmt ein Element?-Argument entgegen und gibt eine Position als Point?-Objekt zurück:

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);
}

Das Element?-Argument definiert das Element, zu dem die Position relativ abgerufen werden soll. Die Angabe eines null-Wertes als Argument bedeutet, dass die GetPosition-Methode ein Point?-Objekt zurückgibt, das die Position der Drag- oder Drop-Geste relativ zum Bildschirm definiert.