Freigeben über

Exemplarische Vorgehensweise: Aktivieren der Drag & Drop-Funktion auf einem Benutzersteuerelement

  • Artikel

Aktualisiert: April 2011

In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie Sie ein benutzerdefiniertes Benutzersteuerelement erstellen, das bei der Drag & Drop-Datenübertragung in Windows Presentation Foundation (WPF) verwendet werden kann.

In dieser exemplarischen Vorgehensweise erstellen Sie ein benutzerdefiniertes WPF-UserControl, das eine Kreisform darstellt. Sie implementieren Funktionen für das Steuerelement, um die Datenübertragung mittels Drag & Drop zu ermöglichen. Wenn Sie z. B. ein Kreissteuerelement auf ein anderes ziehen, werden Füllfarbendaten aus dem Quellkreis in das Ziel kopiert. Wenn Sie ein Kreissteuerelement auf ein TextBox ziehen, wird die Zeichenfolgendarstellung der Füllfarbe in das TextBox kopiert. Außerdem erstellen Sie eine kleine Anwendung, die zwei Bereichssteuerelemente und ein TextBox enthält, um die Drag & Drop-Funktion zu testen. Sie schreiben Code, der den Bereichen das Verarbeiten abgelegter Kreisdaten ermöglicht, sodass Sie Kreise aus der Auflistung der untergeordneten Elemente eines Bereichs in den anderen Bereich verschieben oder kopieren können.

In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:

  • Erstellen eines benutzerdefinierten Benutzersteuerelements

  • Einrichten des Benutzersteuerelements als Quelle des Ziehvorgangs

  • Einrichten des Benutzersteuerelements als Ablageziel

  • Einrichten eines Bereichs zum Empfangen abgelegter Daten des Benutzersteuerelements

Erforderliche Komponenten

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

  • Visual Studio 2010

Erstellen des Anwendungsprojekts

In diesem Abschnitt erstellen Sie die Anwendungsinfrastruktur, die eine Hauptseite mit zwei Bereichen und ein TextBox enthält.

So erstellen Sie das Projekt

  1. Erstellen Sie in Visual Basic oder Visual C# ein neues WPF-Anwendungsprojekt mit dem Namen DragDropExample. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines neuen WPF-Anwendungsprojekts.

  2. Öffnen Sie MainWindow.xaml.

  3. Fügen Sie das folgende Markup zwischen den öffnenden und schließenden Grid-Tags hinzu.

    Dieses Markup erstellt die Benutzeroberfläche für die Testanwendung.

Hinzufügen eines neuen Benutzersteuerelements zum Projekt

In diesem Abschnitt fügen Sie dem Projekt ein neues Benutzersteuerelement hinzu.

So fügen Sie ein neues Benutzersteuerelement hinzu

  1. Klicken Sie im Menü "Projekt" auf Benutzersteuerelement hinzufügen.

  2. Ändern Sie im Dialogfeld "Neues Element hinzufügen" den Namen in Circle.xaml, und klicken Sie auf Hinzufügen.

    "Circle.xaml" und die zugehörige CodeBehind-Datei werden dem Projekt hinzugefügt.

  3. Öffnen Sie "Circle.xaml".

    Diese Datei enthält die Benutzeroberflächenelemente des Benutzersteuerelements.

  4. Fügen Sie dem Stamm-Grid das folgende Markup hinzu, um ein einfaches Benutzersteuerelement mit einem blauen Kreis als Benutzeroberfläche zu erstellen.

  5. Öffnen Sie "Circle.xaml.cs" bzw. "Circle.xaml.vb".

  6. Fügen Sie in C# den folgenden Code nach dem Standardkonstruktor hinzu, um einen Kopierkonstruktor zu erstellen. Fügen Sie in Visual Basic den folgenden Code hinzu, um einen Standardkonstruktor und einen Kopierkonstruktor zu erstellen.

    Damit das Benutzersteuerelement kopiert werden kann, fügen Sie in der CodeBehind-Datei eine Kopierkonstruktormethode hinzu. Im vereinfachten Kreisbenutzersteuerelement kopieren Sie nur die Füllung und die Größe des Benutzersteuerelements.

So fügen Sie das Benutzersteuerelement dem Hauptfenster hinzu

  1. Öffnen Sie MainWindow.xaml.

  2. Fügen Sie dem öffnenden Window-Tag den folgenden XAML-Code hinzu, um einen XML-Namespaceverweis auf die aktuelle Anwendung zu erstellen.

    xmlns:local="clr-namespace:DragDropExample"

  3. Fügen Sie im ersten StackPanel den folgenden XAML-Code hinzu, um zwei Instanzen des Kreisbenutzersteuerelements im ersten Bereich zu erstellen.

    Das vollständige XAML für den Bereich sieht folgendermaßen aus.

Implementieren von Ereignissen für die Quelle des Ziehvorgangs im Benutzersteuerelement

In diesem Abschnitt überschreiben Sie die OnMouseMove-Methode, und Sie initiieren den Drag & Drop-Vorgang.

Wenn ein Ziehvorgang gestartet wird (eine Maustaste wird gedrückt und die Maus wird bewegt), verpacken Sie die zu übertragenden Daten in einem DataObject. In diesem Fall verpackt das Kreissteuerelement drei Datenelemente: eine Zeichenfolgendarstellung der Füllfarbe, eine Double-Darstellung seiner Höhe und eine Kopie von sich selbst.

So initiieren Sie einen Drag & Drop-Vorgang

  1. Öffnen Sie "Circle.xaml.cs" bzw. "Circle.xaml.vb".

  2. Fügen Sie die folgende OnMouseMove-Überschreibung hinzu, um eine Klassenbehandlung für das MouseMove-Ereignis bereitzustellen.

    Diese OnMouseMove-Überschreibung führt die folgenden Aufgaben aus:

    • Sie überprüft, ob die linke Maustaste gedrückt wird, während sich der Mauszeiger bewegt.

    • Sie verpackt Kreisdaten in einem DataObject. In diesem Fall verpackt das Kreissteuerelement drei Datenelemente: eine Zeichenfolgendarstellung der Füllfarbe, eine Double-Darstellung seiner Höhe und eine Kopie von sich selbst.

    • Sie ruft die statische DragDrop.DoDragDrop-Methode auf, um den Drag & Drop-Vorgang zu initiieren. Die folgenden drei Parameter werden an die DoDragDrop-Methode übergeben:

      • dragSource – Ein Verweis auf dieses Steuerelement.

      • data – Das im vorherigen Code erstellte DataObject.

      • allowedEffects – Die zulässigen Drag & Drop-Vorgänge (Copy oder Move).

  3. Drücken Sie F5, um die Anwendung zu erstellen und auszuführen.

  4. Klicken Sie auf eines der Kreissteuerelemente, und ziehen Sie es über die Bereiche, den anderen Kreis und das TextBox. Wenn der Kreis über das TextBox gezogen wird, ändert sich die Darstellung des Cursors, um eine Verschiebung anzuzeigen.

  5. Drücken Sie die STRG-TASTE, während der Kreis über das TextBox gezogen wird. Die Darstellung des Cursors ändert sich, um einen Kopiervorgang anzuzeigen.

  6. Legen Sie den Kreis per Drag & Drop auf dem TextBox ab. Die Zeichenfolgendarstellung der Füllfarbe des Kreises wird an TextBox angefügt.

Standardmäßig ändert sich die Darstellung des Cursors während eines Drag & Drop-Vorgangs, um anzugeben, welche Auswirkungen das Ablegen der Daten hat. Sie können das Feedback für den Benutzer anpassen, indem Sie das GiveFeedback-Ereignis behandeln und einen anderen Cursor festlegen.

So geben Sie dem Benutzer Feedback

  1. Öffnen Sie "Circle.xaml.cs" bzw. "Circle.xaml.vb".

  2. Fügen Sie die folgende OnGiveFeedback-Überschreibung hinzu, um eine Klassenbehandlung für das GiveFeedback-Ereignis bereitzustellen.

    Diese OnGiveFeedback-Überschreibung führt die folgenden Aufgaben aus:

    • Sie überprüft die Effects-Werte, die im DragOver-Ereignishandler des Ablageziels festgelegt sind.

    • Sie legt basierend auf dem Effects-Wert einen benutzerdefinierten Cursor fest. Der Cursor soll dem Benutzer visuelles Feedback über die Auswirkungen des Ablegens der Daten geben.

  3. Drücken Sie F5, um die Anwendung zu erstellen und auszuführen.

  4. Ziehen Sie eines der Kreissteuerelemente über die Bereiche, den anderen Kreis und das TextBox. Jetzt werden die benutzerdefinierten Cursor angezeigt, die Sie in der OnGiveFeedback-Überschreibung angegeben haben.

  5. Wählen Sie den Text green im TextBox aus.

  6. Ziehen Sie den Text green auf ein Kreissteuerelement. Die Standardcursor werden angezeigt, um die Auswirkungen des Drag & Drop-Vorgangs anzugeben. Der Feedbackcursor wird immer durch die Quelle des Ziehvorgangs festgelegt.

Implementieren von Ablagezielereignisse im Benutzersteuerelement

In diesem Abschnitt geben Sie an, dass das Benutzersteuerelement ein Ablageziel ist, Sie überschreiben die Methoden, die dem Benutzersteuerelement die Funktion als Ablageziel ermöglichen, und Sie verarbeiten die Daten, die auf dem Benutzersteuerelement abgelegt werden.

So richten Sie das Benutzersteuerelement als Ablageziel ein

  1. Öffnen Sie "Circle.xaml".

  2. Fügen Sie im öffnenden UserControl-Tag die AllowDrop-Eigenschaft hinzu, und legen Sie sie auf true fest.

Die OnDrop-Methode wird aufgerufen, wenn die AllowDrop-Eigenschaft auf true festgelegt ist und Daten aus der Quelle des Ziehvorgangs auf dem Kreisbenutzersteuerelement abgelegt werden. In dieser Methode werden die abgelegten Daten verarbeitet und auf den Kreis angewendet.

So verarbeiten Sie die abgelegten Daten

  1. Öffnen Sie "Circle.xaml.cs" bzw. "Circle.xaml.vb".

  2. Fügen Sie die folgende OnDrop-Überschreibung hinzu, um eine Klassenbehandlung für das Drop-Ereignis bereitzustellen.

    Diese OnDrop-Überschreibung führt die folgenden Aufgaben aus:

    • Sie überprüft mithilfe der GetDataPresent-Methode, ob die gezogenen Daten ein Zeichenfolgenobjekt enthalten.

    • Sie extrahiert mithilfe der GetData-Methode die Zeichenfolgendaten (sofern vorhanden).

    • Sie versucht, die Zeichenfolge mithilfe von BrushConverter in einen Brush zu konvertieren.

    • Wenn die Konvertierung erfolgreich ist, wendet sie den Pinsel auf die Fill der Ellipse an, die die Benutzeroberfläche des Kreissteuerelements bereitstellt.

    • Sie markiert das Drop-Ereignis als behandelt. Das Drop-Ereignis sollte als behandelt markiert werden, damit andere Elemente, die dieses Ereignis empfangen, wissen, dass es vom Kreisbenutzersteuerelement behandelt wurde.

  3. Drücken Sie F5, um die Anwendung zu erstellen und auszuführen.

  4. Wählen Sie den Text green im TextBox aus.

  5. Ziehen Sie den Text auf ein Kreissteuerelement, und legen Sie ihn ab. Die Farbe des Kreises ändert sich von Blau in Grün.

  6. Geben Sie den Text green in das TextBox ein.

  7. Wählen Sie den Text gre im TextBox aus.

  8. Ziehen Sie ihn auf ein Kreissteuerelement, und legen Sie ihn ab. Der Cursor ändert sich, um anzugeben, dass der Ablegevorgang zulässig ist, die Farbe des Kreises wird jedoch nicht geändert, da gre keine gültige Farbe ist.

  9. Ziehen Sie das grüne Kreissteuerelement, und legen Sie es auf dem blauen Kreissteuerelement ab. Die Farbe des Kreises ändert sich von Blau in Grün. Der angezeigte Cursor hängt davon ab, ob das TextBox oder das Kreissteuerelement die Quelle des Ziehvorgangs ist.

Zum Einrichten eines Elements als Ablageziel müssen Sie lediglich die AllowDrop-Eigenschaft auf true festlegen und die abgelegten Daten verarbeiten. Zum Verbessern der Benutzerfreundlichkeit sollten Sie jedoch auch die DragEnter-, DragLeave- und DragOver-Ereignisse behandeln. In diesen Ereignissen können Sie Überprüfungen durchführen und zusätzliches Feedback für den Benutzer bereitstellen, bevor die Daten abgelegt werden.

Wenn Daten über das Kreisbenutzersteuerelement gezogen werden, sollte das Steuerelement die Quelle des Ziehvorgangs darüber benachrichtigen, ob sie die gezogenen Daten verarbeiten kann. Wenn das Steuerelement die Daten nicht verarbeiten kann, sollte es den Ablegevorgang ablehnen. Hierzu behandeln Sie das DragOver-Ereignis, und Sie legen die Effects-Eigenschaft fest.

So überprüfen Sie, ob das Ablegen von Daten zulässig ist

  1. Öffnen Sie "Circle.xaml.cs" bzw. "Circle.xaml.vb".

  2. Fügen Sie die folgende OnDragOver-Überschreibung hinzu, um eine Klassenbehandlung für das DragOver-Ereignis bereitzustellen.

    Diese OnDragOver-Überschreibung führt die folgenden Aufgaben aus:

    • Legt die Effects-Eigenschaft auf None fest.

    • Sie führt die gleichen Überprüfungen aus, die in der OnDrop-Methode ausgeführt werden, um zu bestimmen, ob das Kreisbenutzersteuerelement die gezogenen Daten verarbeiten kann.

    • Wenn das Benutzersteuerelement die Daten verarbeiten kann, legt sie die Effects-Eigenschaft auf Copy oder Move fest.

  3. Drücken Sie F5, um die Anwendung zu erstellen und auszuführen.

  4. Wählen Sie den Text gre im TextBox aus.

  5. Ziehen Sie den Text auf ein Kreissteuerelement. Der Cursor ändert sich, um anzugeben, dass der Ablegevorgang nicht zulässig ist, weil gre keine gültige Farbe ist.

Sie können die Benutzerfreundlichkeit weiter verbessern, indem Sie eine Vorschau des Ablegevorgangs anwenden. Für das Kreisbenutzersteuerelement überschreiben Sie die OnDragLeave- und OnDragEnter-Methoden. Wenn die Daten über das Steuerelement gezogen werden, wird der aktuelle Hintergrund Fill in einer Platzhaltervariable gespeichert. Die Zeichenfolge wird dann in einen Pinsel konvertiert und auf die Ellipse angewendet, die die Benutzeroberfläche des Kreises bereitstellt. Wenn die Daten aus dem Kreis gezogen werden, ohne sie abzulegen, wird wieder der ursprüngliche Fill-Wert auf den Kreis angewendet.

So zeigen Sie eine Vorschau der Auswirkungen des Drag & Drop-Vorgangs an

  1. Öffnen Sie "Circle.xaml.cs" bzw. "Circle.xaml.vb".

  2. Deklarieren Sie in der Circle-Klasse eine private Brush-Variable mit dem Namen _previousFill, und initialisieren Sie sie mit null.

  3. Fügen Sie die folgende OnDragEnter-Überschreibung hinzu, um eine Klassenbehandlung für das DragEnter-Ereignis bereitzustellen.

    Diese OnDragEnter-Überschreibung führt die folgenden Aufgaben aus:

    • Sie speichert die Fill-Eigenschaft der Ellipse in der _previousFill-Variable.

    • Sie führt die gleichen Überprüfungen aus, die in der OnDrop-Methode ausgeführt werden, um zu bestimmen, ob die Daten in einen Brush konvertiert werden können.

    • Wenn die Daten in einen gültigen Brush konvertiert werden, wendet sie ihn auf die Fill der Ellipse an.

  4. Fügen Sie die folgende OnDragLeave-Überschreibung hinzu, um eine Klassenbehandlung für das DragLeave-Ereignis bereitzustellen.

    Diese OnDragLeave-Überschreibung führt die folgenden Aufgaben aus:

    • Sie wendet den in der _previousFill-Variable gespeicherten Brush auf die Fill der Ellipse an, die die Benutzeroberfläche des Kreisbenutzersteuerelements bereitstellt.

  5. Drücken Sie F5, um die Anwendung zu erstellen und auszuführen.

  6. Wählen Sie den Text green im TextBox aus.

  7. Ziehen Sie den Text über ein Kreissteuerelement, ohne ihn abzulegen. Die Farbe des Kreises ändert sich von Blau in Grün.

  8. Ziehen Sie den Text vom Kreissteuerelement weg. Die Farbe des Kreises ändert sich wieder von Grün in Blau.

Einrichten eines Bereichs zum Empfangen abgelegter Daten

In diesem Abschnitt richten Sie die Bereiche, die die Kreisbenutzersteuerelemente hosten, so ein, dass sie als Ablageziele für gezogene Kreisdaten fungieren können. Sie implementieren Code, der es Ihnen ermöglicht, einen Kreis von einem Bereich in einen anderen zu verschieben oder eine Kopie eines Kreissteuerelements zu erstellen, indem Sie während des Ziehens und Ablegens eines Kreises die STRG-TASTE gedrückt halten.

So richten Sie den Bereich als Ablageziel ein

  1. Öffnen Sie MainWindow.xaml.

  2. Fügen Sie wie im folgenden XAML-Code dargestellt in jedem der StackPanel-Steuerelemente Handler für die Drop- und DragOver-Ereignisse hinzu. Geben Sie für den DragOver-Ereignishandler den Namen panel_DragOver und für den Drop-Ereignishandler den Namen panel_Drop ein.

  3. Öffnen Sie "MainWindows.xaml.cs" bzw. "MainWindow.xaml.vb".

  4. Fügen Sie folgenden Code für den DragOver-Ereignishandler hinzu.

    Dieser DragOver-Ereignishandler führt die folgenden Aufgaben aus:

    • Er überprüft, ob die gezogenen Daten die "Objektdaten" enthalten, die vom Kreisbenutzersteuerelement im DataObject verpackt und im Aufruf an DoDragDrop übergeben wurden.

    • Wenn die "Objektdaten" vorhanden sind, überprüft er, ob die STRG-TASTE gedrückt wird.

    • Wenn die STRG-TASTE gedrückt wird, legt er die Effects-Eigenschaft auf Copy fest. Andernfalls legt er die Effects-Eigenschaft auf Move fest.

  5. Fügen Sie folgenden Code für den Drop-Ereignishandler hinzu.

    Dieser Drop-Ereignishandler führt die folgenden Aufgaben aus:

    • Er überprüft, ob das Drop-Ereignis bereits behandelt wurde. Wenn z. B. ein Kreis auf einem anderen Kreis abgelegt wird, der das Drop-Ereignis behandelt, soll das Ereignis nicht auch von dem Bereich behandelt werden, der den Kreis enthält.

    • Wenn das Drop-Ereignis nicht behandelt wurde, überprüft er, ob die STRG-TASTE gedrückt wird.

    • Wenn die STRG-TASTE während Drop gedrückt wird, erstellt er eine Kopie des Kreissteuerelements und fügt sie der Children-Auflistung des StackPanel hinzu.

    • Wenn die STRG-TASTE nicht gedrückt wird, verschiebt er den Kreis aus der Children-Auflistung des übergeordneten Bereichs in die Children-Auflistung des Bereichs, auf dem der Kreis abgelegt wurde.

    • Er legt die Effects-Eigenschaft fest, um die DoDragDrop-Methode darüber zu benachrichtigen, ob ein Verschiebevorgang oder ein Kopiervorgang ausgeführt wurde.

  6. Drücken Sie F5, um die Anwendung zu erstellen und auszuführen.

  7. Wählen Sie den Text green im TextBox aus.

  8. Ziehen Sie den Text über ein Kreissteuerelement, und legen Sie ihn ab.

  9. Ziehen Sie ein Kreissteuerelement vom linken Bereich in den rechten Bereich, und legen Sie es ab. Der Kreis wird aus der Children-Auflistung des linken Bereichs entfernt und der Auflistung der untergeordneten Elemente des rechten Bereichs hinzugefügt.

  10. Ziehen Sie ein Kreissteuerelement von dem Bereich, in dem es sich befindet, in den anderen Bereich, und legen Sie es mit gedrückter STRG-TASTE ab. Der Kreis wird kopiert, und die Kopie wird der Children-Auflistung des empfangenden Bereichs hinzugefügt.

Siehe auch

Konzepte

Übersicht über Drag & Drop

Änderungsprotokoll

Datum

Versionsgeschichte

Grund

April 2011

Thema hinzugefügt.

Kundenfeedback.