{"id":55000105,"date":"2017-10-01T00:00:00","date_gmt":"2020-03-27T19:28:46","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=105"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Drag_and_Drop_mit_ListBoxElementen","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Drag_and_Drop_mit_ListBoxElementen\/","title":{"rendered":"Drag and Drop mit ListBox-Elementen"},"content":{"rendered":"

\"Für<\/p>\n

Bild 1: Für das Hin- und Herziehen von Einträgen zweier Listenfelder wäre Drag and Drop eine interessante Alternative.<\/span><\/b><\/p>\n

Im Artikel Drag and Drop-Grundlagen haben wir uns die grundlegenden Techniken für die Implementierung von Drag and Drop-Funktionen in WPF-Benutzeroberflächen angesehen. Nun gehen wir einen Schritt weiter und wollen Drag and Drop für das Fenster namens Versendungen unserer Beispielanwendung Bestellverwaltung umsetzen. Hier geht es dann nicht nur um einfaches Bewegen von Elementen per Maus, sondern auch um die Anpassung der dahinter stehenden Daten beziehungsweise Tabellen.<\/b><\/p>\n

Wozu braucht man aber Drag and Drop so dringend In der Tat lassen sich die meisten Tätigkeiten, die Sie damit ausführen können, auch auf andere Weise realisieren. Allerdings ist Drag and Drop und somit das einfache Ziehen von Elementen der Benutzeroberfläche mit der Maus doch ein sehr intuitiver Weg, um Aktionen durchzuführen. Ein Beispiel sind die beiden Listenfelder aus dem Artikel m:n-Beziehung mit Listenfeld <\/b>(siehe Bild 1). Im Artikel haben wir Schaltflächen bereitgestellt, mit denen ein oder alle Artikel von einem Listenfeld zum anderen übertragen werden können. Nun wollen wir uns weiter vortasten und Drag and Drop-Funktionalität zu diesem Fenster hinzufügen. Zuvor schauen wir uns das jedoch an einigen grundlegenden Beispielen an.<\/p>\n

\"Für<\/p>\n

Bild 1: Für das Hin- und Herziehen von Einträgen zweier Listenfelder wäre Drag and Drop eine interessante Alternative.<\/span><\/b><\/p>\n

Drag and Drop mit Listenfeldern<\/h2>\n

Nun schauen wir uns an, wie wir Drag and Drop in unser Beispiel mit den Versendungen einbauen. In der Beispielanwendung Bestellverwaltung_SQLite <\/b>fügen wir dazu eine neue Window<\/b>-Klasse namens Versendungen_DragDrop <\/b>hinzu und kopieren den XAML-Code der Klasse Versendungen <\/b>dort hinein. Passen Sie danach das Window<\/b>-Element so an, dass die Klasse Bestellverwaltung.Versendungen_DragDrop <\/b>referenziert wird und der Titel des Fensters angepasst ist:<\/p>\n

<Window x:Class=\"Bestellverwaltung.Versendungen_DragDrop\"\r\n         xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\r\n         xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\r\n         xmlns:d=\"http:\/\/schemas.microsoft.com\/expression\/blend\/2008\"\r\n         xmlns:mc=\"http:\/\/schemas.openxmlformats.org\/markup-compatibility\/2006\"\r\n         xmlns:local=\"clr-namespace:Bestellverwaltung\"\r\n         mc:Ignorable=\"d\"\r\n         Title=\"Versendungen Drag and Drop\" Height=\"300\" Width=\"400\"><\/pre>\n
Dann kopieren Sie auch den Code der Code behind-Klasse von Versendungen.xaml.cs <\/b>in Versendungen_DragDrop.xaml.cs<\/b>. Ändern Sie hier zunächst in der folgenden Zeile Versendungen in Versendungen_DragDrop<\/b>:<\/p>\n
public partial class Versendungen_DragDrop : Window, INotifyPropertyChanged {<\/pre>\n
Der gleiche Schritt ist auch nochmal in der ersten Zeile der Konstruktor-Methode nötig:<\/p>\n
public Versendungen_DragDrop() {<\/pre>\n
Danach können wir die Funktionen für das Drag and Drop hinzufügen.<\/p>\n
Drag and Drop-Vorgang starten<\/h2>\n
Wir beginnen mit dem linken ListBox<\/b>-Element. Hier legen wir gar nicht erst die Methode für das Ereignis MouseDown <\/b>an, von dem wir dank der Experimente im Artikel Drag and Drop-Grundlagen <\/b>schon wissen, dass es nicht feuert. Stattdessen legen wir direkt das entsprechende Tunneling-Ereignis PreviewMouseDown <\/b>an:<\/p>\n
<ListBox x:Name=\"lstAusgewaehlteKunden\" Grid.Column=\"0\" Grid.Row=\"1\" Margin=\"5\"\r\n     ItemsSource=\"{Binding AusgewaehlteKunden}\"\r\n     DisplayMemberPath=\"Nachname\"\r\n     SelectedValuePath=\"ID\" MouseDoubleClick=\"lstAusgewaehlteKunden_MouseDoubleClick\"         PreviewMouseDown=\"lstAusgewaehlteKunden_PreviewMouseDown\"\/><\/pre>\n
Dafür hinterlegen wir nun die folgende Ereignismethode:<\/p>\n
private void lstAusgewaehlteKunden_PreviewMouseDown(object sender, MouseButtonEventArgs e) {\r\n     if (e.LeftButton == MouseButtonState.Pressed) {\r\n         DragDrop.DoDragDrop(lstAusgewaehlteKunden, lstAusgewaehlteKunden.SelectedItem, DragDropEffects.Copy);\r\n     }\r\n}<\/pre>\n
Wenn wir die Anwendung nun starten, das Fenster Versendungen_DragDrop <\/b>aufrufen und einen der Einträge der linken List-Box ziehen wollen, erhalten wir den Fehler aus Bild 2.<\/p>\n
\"Fehler<\/p>\n
Bild 2: Fehler beim Versuch, ein Element aus der linken ListBox zu ziehen<\/span><\/b><\/p>\n
Da der Fehler nicht direkt an Ort und Stelle gemeldet wird, müssen wir eine Fehlerbehandlung hinzufügen:<\/p>\n
private void lstAusgewaehlteKunden_PreviewMouseDown(object sender, MouseButtonEventArgs e) {\r\n     try {\r\n         if (e.LeftButton == MouseButtonState.Pressed) {\r\n             DragDrop.DoDragDrop(lstAusgewaehlteKunden, lstAusgewaehlteKunden.SelectedItem, DragDropEffects.Copy);\r\n         }\r\n     }\r\n     catch (System.Exception ex) {\r\n         MessageBox.Show(ex.Message);\r\n         throw;\r\n     }\r\n}<\/pre>\n
Dies liefert dann die Meldung aus Bild 3. Offensichtlich versuchen wir auf irgendeine Weise, ein Element des Typs Null <\/b>zu ziehen. Welches das ist, erfahren wir per Debugging.<\/p>\n
\"Der<\/p>\n
Bild 3: Der gleiche Fehler, diesmal mit Fehlerbehandlung<\/span><\/b><\/p>\n
Dazu setzen wir einen Haltepunkt in der ersten Zeile der Methode lstAusgewaehlteKunden_PreviewMouseDown <\/b>und schauen uns den Inhalt der Parameter der Methode DragDrop.DoDragDrop <\/b>an. Hier erfahren wir, dass die SelectedItem<\/b>-Eigenschaft des ListBox<\/b>-Elements den Wert null <\/b>liefert (siehe Bild 4).<\/p>\n
\"Debugging<\/p>\n
Bild 4: Debugging der fehlerhaften Stelle<\/span><\/b><\/p>\n
Wir müssen also offensichtlich einen ganz anderen Weg wählen, um beim Herunterdrücken der Maustaste Zugriff auf das dabei überfahrene Element zu bekommen. Dabei nutzen wir eine kleine Hilfsklasse, um das zu verschiebende Element zwischenzuspeichern:<\/p>\n
public class DragDropData {\r\n     public object ActualData { get; set; }\r\n}<\/pre>\n
Dieses soll in der Eigenschaft ActualData <\/b>das zu verschiebende Element speichern. Die Ereignismethode lstAusgewaehlteKunden_PreviewMouseDown <\/b>ändern wir wie folgt ab:<\/p>\n
private void lstAusgewaehlteKunden_PreviewMouseDown(object sender, MouseButtonEventArgs e) {\r\n     try {\r\n         if (e.LeftButton == MouseButtonState.Pressed) {\r\n             var item = (ListBoxItem)ItemsControl.ContainerFromElement(lst, (DependencyObject)e.OriginalSource);\r\n             Kunde kunde = (Kunde)item.Content;\r\n             DragDropData dragDropData = new DragDropData\r\n             {\r\n                 ActualData = kunde,\r\n             };\r\n             DragDrop.DoDragDrop(lst, dragDropData, DragDropEffects.Move);\r\n         }\r\n     }\r\n     catch (System.Exception ex) {\r\n         MessageBox.Show(ex.Message);\r\n         throw;\r\n     }\r\n}<\/pre>\n
Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t
\n\n\t\t\n\t\t