{"id":55000102,"date":"2017-10-01T00:00:00","date_gmt":"2020-03-27T19:28:27","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=102"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Drag_and_DropGrundlagen","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Drag_and_DropGrundlagen\/","title":{"rendered":"Drag and Drop-Grundlagen"},"content":{"rendered":"<p class=\"image\"><img decoding=\"async\" src=\"..\/fileadmin\/_temp_\/2017_05\/pic_102_001.png\" alt=\"F&uuml;r das Hin- und Herziehen von Eintr&auml;gen zweier Listenfelder w&auml;re Drag and Drop eine interessante Alternative.\" width=\"424,7115\" height=\"322,3847\"\/><\/p>\n<p><b><span style=\"color:darkgrey;\">Bild 1: F&uuml;r das Hin- und Herziehen von Eintr&auml;gen zweier Listenfelder w&auml;re Drag and Drop eine interessante Alternative.<\/span><\/b><\/p>\n<p><b>Unter Access fehlen einige Features, die in anderen Programmiersprachen und Entwicklungsumgebungen zum guten Ton geh&ouml;ren. Eines davon ist die Drag and Drop-Funktionalit&auml;t, die sich nur aufwendig abbilden lie&szlig; &#8211; und auch nur mit bestimmten ActiveX-Steuerelementen. Die eingebauten Steuer-elemente wie Textfelder oder Listenfelder lie&szlig;en leider kein natives Drag and Drop zu. Unter WPF und den .NET-Programmiersprachen sieht das ganz anders aus. Dieser Artikel liefert Grundlagen zu Drag and Drop.<\/b><\/p>\n<p>Wozu braucht man aber Drag and Drop In der Tat lassen sich die meisten T&auml;tigkeiten, die Sie damit ausf&uuml;hren k&ouml;nnen, auch auf andere Weise realisieren. Allerdings ist Drag and Drop und somit das einfache Ziehen von Elementen der Benutzeroberfl&auml;che mit der Maus doch ein sehr inituitiver Weg, um Aktionen durchzuf&uuml;hren. Ein Beispiel sind die beiden Listenfelder aus dem Artikel <b>m:n-Beziehung mit Listenfeld <\/b>(siehe Bild 1). Im Artikel haben wir Schaltfl&auml;chen bereitgestellt, mit denen ein oder alle Artikel von einem Listenfeld zum anderen &uuml;bertragen werden k&ouml;nnen. Nun wollen wir uns weiter vortasten und Drag and Drop-Funktionalit&auml;t zu diesem Fenster hinzuf&uuml;gen. Bevor wir uns das im Artikel <b>Drag And Drog mit ListBox<\/b>-Elementen ansehen, schauen wir uns einige grundlegende Beispielen an.<\/p>\n<p class=\"image\"><img decoding=\"async\" src=\"..\/fileadmin\/_temp_\/2017_05\/pic_102_001.png\" alt=\"F&uuml;r das Hin- und Herziehen von Eintr&auml;gen zweier Listenfelder w&auml;re Drag and Drop eine interessante Alternative.\" width=\"424,7115\" height=\"322,3847\"\/><\/p>\n<p><b><span style=\"color:darkgrey;\">Bild 1: F&uuml;r das Hin- und Herziehen von Eintr&auml;gen zweier Listenfelder w&auml;re Drag and Drop eine interessante Alternative.<\/span><\/b><\/p>\n<h2>Was ist Drag and Drop<\/h2>\n<p>Drag and Drop nennen wir den Vorgang, bei dem der Benutzer ein Element der Benutzeroberfl&auml;che mit der linken Maustaste anklickt und diese dabei gedr&uuml;ckt h&auml;lt. Dann wird die Maus mit dem Element zum Zielelement bewegt und das zu bewegende Element dort durch Loslassen der linken Maustaste an das Zielelement &uuml;bergeben.<\/p>\n<p>Dabei m&uuml;ssen Start- und Zielelement gar nicht unbedingt zwei verschiedene Elemente sein wie beim Beispiel mit den Listenfeldern. Es kann auch nur ein einziges Listenfeld sein, dessen Eintr&auml;ge Sie per Drag and Drop umsortieren wollen. Oder Sie bewegen die Elemente in einem <b>TreeView<\/b>-Steuerelement von einem &uuml;bergeordneten Element zum n&auml;chsten.<\/p>\n<p>Dazu ben&ouml;tigen wir ein paar Informationen. Zun&auml;chst m&uuml;ssen wir f&uuml;r das abgebende Element festlegen, dass es das Ziehen der enthaltenen Elemente mit der Maus &uuml;berhaupt erlaubt. Dann wollen wir uns irgendwie merken, welches Element wir mit der Maus angepackt haben, um es zu verschieben (oder auch zu kopieren). Schlie&szlig;lich soll das aufnehmende Element mit der M&ouml;glichkeit zum Aufnehmen des zu &uuml;bergebenden Elements ausgestattet werden, also als Drag and Drop-Ziel verf&uuml;gbar gemacht werden. Da man unter Windows eine ganze Menge Dinge durch die Gegend ziehen kann &#8211; zum Beispiel von Windows Explorer auf verschiedene andere Ziele &#8211; m&uuml;ssen Sie dem Zielelement auch noch mitteilen, auf welche zu &uuml;bergebenden Elemente es &uuml;berhaupt reagieren soll, indem es das Symbol als m&ouml;gliches Zielelement einblendet. Schlie&szlig;lich ben&ouml;tigen wir verschiedene Ereignisse, f&uuml;r die wir passende Methoden implementieren, um das Verhalten von Drag and Drop-Quelle und -Ziel festzulegen.<\/p>\n<p>Drag and Drop ist auch eine Alternative zum Kopieren\/Ausschneiden und Einf&uuml;gen. Der wesentliche Unterschied neben den dazu notwendigen Techniken (Ziehen mit der Maus bei Drag and Drop auf der einen, Tastenkombinationen wie <b>Strg + X<\/b>, <b>V <\/b>oder <b>C <\/b>und Kontextmen&uuml;-Eintr&auml;ge auf der anderen Seite) ist der Ort, an dem wir uns merken, welches Element von A nach B bewegt werden sollen. Beim Kopieren\/Ausschneiden und Einf&uuml;gen ist dies die Zwischenablage. Bei Drag and Drop ben&ouml;tigen wir eine andere M&ouml;glichkeit, in diesem Fall ein Element des Typs <b>DataObject<\/b>.<\/p>\n<h2>Einfaches Beispiel: Bezeichnungsfeld in Textfeld ziehen<\/h2>\n<p>Wir schauen uns zu Beginn ein einfaches Beispiel an, bei dem wir die Beschriftung eines Bezeichnungsfeldes einfach in ein Textfeld ziehen wollen. Dazu legen wir entsprechende Steuer-elemente in einem neuen Fenster namens <b>MainWindow.xaml <\/b>eines neuen Projekts an (s. Bild 2). Die beiden Steuer-elemente definieren wir wie wie folgt:<\/p>\n<p class=\"image\"><img decoding=\"async\" src=\"..\/fileadmin\/_temp_\/2017_05\/pic_102_006.png\" alt=\"Label und TextBox als erstes Drag and Drop-Beispiel\" width=\"424,7115\" height=\"184,0107\" \/><\/p>\n<p><b><span style=\"color:darkgrey;\">Bild 2: Label und TextBox als erstes Drag and Drop-Beispiel<\/span><\/b><\/p>\n<pre>&lt;TextBox x:Name=\"txtDrop\" Grid.Column=\"1\" Grid.Row=\"1\" Margin=\"5\" Drop=\"txtDrop_Drop\" Width=\"100\" \/&gt;\r\n&lt;Label x:Name=\"lblDrag\" Content=\"Beispieltext\" Grid.Column=\"0\" Grid.Row=\"1\" Margin=\"5\" MouseDown=\"lblDrag_MouseDown\" \/&gt;<\/pre>\n<p>Unter C# sieht die Ereignismethode f&uuml;r das Ereignis <b>MouseDown <\/b>des Bezeichnungsfeldes wie folgt aus:<\/p>\n<pre>\/\/C#\r\nprivate void lblDrag_MouseDown(object sender, MouseButtonEventArgs e) {\r\n     DragDrop.DoDragDrop(lblDrag, lblDrag.Content, DragDropEffects.Copy);\r\n}<\/pre>\n<p>Wir ben&ouml;tigen also nur eine einzige Zeile, um den Vorgang zu starten! Dabei rufen wir die Methode <b>DoDragDrop <\/b>der Klasse <b>DragDrop <\/b>auf. Diese erwartet drei Parameter:<\/p>\n<ul>\n<li><b>dragSource<\/b>: Quelle des Drag and Drop-Vorgangs, also beispielsweise ein Steuer-element wie in diesem Fall das Bezeichnungsfeld<\/li>\n<li><b>data<\/b>: Die per Drag and Drop bewegten Daten werden mit dem Parameter <b>data <\/b>in einen Zwischenspeicher &auml;hnlich der Zwischenablage gegeben und k&ouml;nnen dort beim Drop wieder abgerufen werden.<\/li>\n<li><b>allowedEffects<\/b>: Effekte sind verschiedene Darstellungsarten des Mauszeigers.<\/li>\n<\/ul>\n<p>Im vorliegenden Fall &uuml;bergeben wir f&uuml;r den ersten Parameter einen Verweis auf das Bezeichnungsfeld <b>lblLabel<\/b>. Der zweite Parameter nimmt den Inhalt der Eigenschaft <b>Content <\/b>des Bezeichnungsfeldes auf, hier eine einfache Beschriftung. Da es sich hierbei um ein reines Kopieren von Daten handelt, n&auml;mlich das Kopieren der Beschriftung des Bezeichnungsfeldes in das Textfeld, soll nur das Symbol f&uuml;r das Kopieren mit der Maus angezeigt werden (siehe Bild 3).<\/p>\n<p class=\"image\"><img decoding=\"async\" src=\"..\/fileadmin\/_temp_\/2017_05\/pic_102_007.png\" alt=\"Ver&auml;nderter Mauszeiger beim Drag and Drop\" width=\"424,7115\" height=\"158,205\" \/><\/p>\n<p><b><span style=\"color:darkgrey;\">Bild 3: Ver&auml;nderter Mauszeiger beim Drag and Drop<\/span><\/b><\/p>\n<p>Damit kommen wir Fallenlassen des zu kopierenden Inhalts &uuml;ber dem Zielobjekt. Hier verwenden wir nun das Ereignis Drop des Textfeldes, das wir wie folgt implementieren:<\/p>\n<pre>\/\/C#\r\nprivate void txtDrop_Drop(object sender, DragEventArgs e) {\r\n     string str;\r\n     str = (string)e.Data.GetData(DataFormats.StringFormat);\r\n     txtDrop.Text = str;\r\n}<\/pre>\n<p>Die Methode liefert die gewohnten beiden Parameter, wobei der zweite den Typ <b>DragEventArgs <\/b>hat (mehr dazu weiter unten). In diesem Fall nutzen wir das Objekt <b>data <\/b>der mit dem Parameter e &uuml;bergebenen <b>DragEventArgs<\/b>-Klasse, dessen Methode <b>GetData <\/b>mit dem Parameter <b>DataFormats.StringFormat <\/b>den gespeicherten Text zur&uuml;ckgibt. Diesen speichern wir in der String-Variablen <b>str <\/b>und weisen diese dann der <b>Text<\/b>-Eigenschaft des Textfeldes zu. Das Ergebnis sieht schlie&szlig;lich wie in Bild 4 aus.<\/p>\n<p class=\"image\"><img decoding=\"async\" src=\"..\/fileadmin\/_temp_\/2017_05\/pic_102_008.png\" alt=\"Erfolgreicher Drag and Drop-Vorgang\" width=\"424,7115\" height=\"154,8316\" \/><\/p>\n<p><b><span style=\"color:darkgrey;\">Bild 4: Erfolgreicher Drag and Drop-Vorgang<\/span><\/b><\/p>\n<p>Zusammengefasst haben wir f&uuml;r den Start von Drag and Drop das Ereignis <b>MouseDown <\/b>genutzt, dort den Drag and Drop-Vorgang gestartet und dadurch auch das Ereignis <b>Drop <\/b>aktiviert. Ohne den Aufruf von <b>DoDragDrop <\/b>k&ouml;nnen Sie n&auml;mlich mit der Maus ziehen und fallenlassen, was sie m&ouml;chten &#8211; das <b>Drop<\/b>-Ereignis wird nicht ausgel&ouml;st.<\/p>\n<h2>Verfeinerung: Maustaste pr&uuml;fen<\/h2>\n<div class=\"rcp_restricted\"><p><span style=\"color: #ff0000;\">M&ouml;chten Sie weiterlesen? Dann l&ouml;sen Sie Ihr Ticket!<\/span><br \/>\n<span style=\"color: #ff0000;\">Hier geht es zur Bestellung des Jahresabonnements des Magazins <strong>Visual Basic Entwickler<\/strong>:<\/span><br \/>\n<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/shop.minhorst.com\/magazine\/363\/visual-basic-entwickler-jahresabonnement?c=77\">Zur Bestellung ...<\/a><\/span><br \/>\n<span style=\"color: #ff0000;\">Danach greifen Sie sofort auf <strong>alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span><br \/>\n<span style=\"color: #000000;\">Oder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t<form id=\"rcp_login_form\"  class=\"rcp_form\" method=\"POST\" action=\"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts\/55000102\/\">\n\n\t\t\n\t\t<fieldset class=\"rcp_login_data\">\n\t\t\t<p>\n\t\t\t\t<label for=\"rcp_user_login\">Username or Email<\/label>\n\t\t\t\t<input name=\"rcp_user_login\" id=\"rcp_user_login\" class=\"required\" type=\"text\"\/>\n\t\t\t<\/p>\n\t\t\t<p>\n\t\t\t\t<label for=\"rcp_user_pass\">Password<\/label>\n\t\t\t\t<input name=\"rcp_user_pass\" id=\"rcp_user_pass\" class=\"required\" type=\"password\"\/>\n\t\t\t<\/p>\n\t\t\t\t\t\t<p>\n\t\t\t\t<input type=\"checkbox\" name=\"rcp_user_remember\" id=\"rcp_user_remember\" value=\"1\"\/>\n\t\t\t\t<label for=\"rcp_user_remember\">Remember me<\/label>\n\t\t\t<\/p>\n\t\t\t<p class=\"rcp_lost_password\"><a href=\"\/data\/wp\/v2\/posts\/55000102?rcp_action=lostpassword\"><\/a><\/p>\n\t\t\t<p>\n\t\t\t\t<input type=\"hidden\" name=\"rcp_action\" value=\"login\"\/>\n\t\t\t\t<input type=\"hidden\" name=\"rcp_redirect\" value=\"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts\/55000102\/\"\/>\n\t\t\t\t<input type=\"hidden\" name=\"rcp_login_nonce\" value=\"122f66fc6a\"\/>\n\t\t\t\t<input id=\"rcp_login_submit\" class=\"rcp-button\" type=\"submit\" value=\"Login\"\/>\n\t\t\t<\/p>\n\t\t\t\t\t<\/fieldset>\n\n\t\t\n\t<\/form>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unter Access fehlen einige Features, die in anderen Programmiersprachen und Entwicklungsumgebungen zum guten Ton geh&ouml;ren. Eines davon ist die Drag and Drop-Funktionalit&auml;t, die sich nur aufwendig abbilden lie&szlig; &#8211; und auch nur mit bestimmten ActiveX-Steuerelementen. Die eingebauten Steuer-elemente wie Textfelder oder Listenfelder lie&szlig;en leider kein natives Drag and Drop zu. Unter WPF und den .NET-Programmiersprachen sieht das ganz anders aus. Dieser Artikel liefert Grundlagen zu Drag and Drop.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[662017,66052017,44000002,44000023,44000028],"tags":[],"yst_prominent_words":[],"class_list":["post-55000102","post","type-post","status-publish","format-standard","hentry","category-662017","category-66052017","category-Benutzeroberflaeche_mit_WPF","category-PowerApps","category-Word_programmieren"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts\/55000102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/comments?post=55000102"}],"version-history":[{"count":0,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts\/55000102\/revisions"}],"wp:attachment":[{"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/media?parent=55000102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/categories?post=55000102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/tags?post=55000102"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/yst_prominent_words?post=55000102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}