{"id":55000061,"date":"2016-12-01T00:00:00","date_gmt":"2020-03-27T19:23:09","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=61"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"WPFSteuerelemente_Das_DockPanel","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/WPFSteuerelemente_Das_DockPanel\/","title":{"rendered":"WPF-Steuerelemente: Das DockPanel"},"content":{"rendered":"<p><b>Das DockPanel-Element ist eines der Steuerelemente, mit dem sich untergeordnete Steuerelemente ausrichten lassen. Das interessante an diesem Steuerelement ist, dass die enthaltenen Elemente jeweils an der angegebenen Seite des DockPanels angedockt werden. Damit lassen sich interessante Anordnungen erzielen. Welche das sind und wie Sie diese realisieren, erfahren Sie in diesem Artikel.<\/b><\/p>\n<h2>Grundlagen<\/h2>\n<p>Neben dem <b>DockPanel <\/b>gibt es noch einige weitere Elemente zum Anordnen der untergeordneten Elemente. Das bekannteste ist wohl das <b>Grid<\/b>-Element, das ja auch standardm&auml;&szlig;ig als einziges untergeordnetes Element in neuen <b>Window<\/b>&#8211; oder <b>Page<\/b>-Elementen angezeigt wird. W&auml;hrend sich mit dem <b>Grid<\/b>-Steuerelement ein Raster, bestehend aus Zeilen und Spalten, realisieren l&auml;sst, bietet das <b>DockPanel <\/b>ganz andere M&ouml;glichkeiten.<\/p>\n<p>Sie k&ouml;nnen diesem beliebig viele Unterelemente zuweisen, f&uuml;r die Sie jeweils angeben, ob diese oben, unten, links oder rechts innerhalb des DockPanels angedockt werden sollen. Das angegebene Element nimmt dann, wenn es links oder rechts angeordnet wurde, jeweils die gesamte H&ouml;he ein, und wenn es oben oder unten angeordnet wurde, die gesamte Breite.<\/p>\n<p>Die Reihenfolge entscheidet dann dar&uuml;ber, welchem Element welcher Platz zuf&auml;llt. Wie dies aussieht, zeigen wir anhand von Beispielen. Im ersten Fall haben wir vier <b>Button<\/b>-Elemente angeordnet, die &uuml;ber die Eigenschaft <b>DockPanel.Dock <\/b>mit den Werten <b>Top<\/b>, <b>Left<\/b>, <b>Bottom <\/b>und <b>Right <\/b>versehen wurden (siehe Beispielprojekt unter <b>Beispiel #1<\/b>) &#8211; siehe Listing 1.<\/p>\n<pre>&lt;DockPanel&gt;\r\n     &lt;Button DockPanel.Dock=\"Top\" Content=\"Erstes Element, angedockt an TOP\"&gt;&lt;\/Button&gt;\r\n     &lt;Button DockPanel.Dock=\"Left\" Content=\"Zweites Element, &#xa;angedockt an LEFT\"&gt;&lt;\/Button&gt;\r\n     &lt;Button DockPanel.Dock=\"Bottom\" Content=\"Drittes Element, angedockt an BOTTOM\"&gt;&lt;\/Button&gt;\r\n     &lt;Button DockPanel.Dock=\"Right\" Content=\"Viertes Element, angedockt an RIGHT\"&gt;&lt;\/Button&gt;\r\n&lt;\/DockPanel&gt;<\/pre>\n<p><b><span style=\"color:darkgrey;\">Listing 1: Code f&uuml;r vier Elemente, die an den vier Seiten eines Fensters angedockt werden<\/span><\/b><\/p>\n<p>Bild 1 zeigt, wie das Ergebnis im Fenster aussieht. Das erste Element landet oben und nimmt die komplette Breite ein. Das zweite Element landet links, erh&auml;lt aber nur noch die H&ouml;he, die das erste Element &uuml;brig l&auml;sst. Die folgenden Elemente f&uuml;hren dies fort, bis das vierte Element den verbleibenden Platz einnimmt. Das Verhalten des letzten Elements l&auml;sst sich &uuml;brigens durch das Attribut <b>LastChildFill <\/b>des <b>DockPanel<\/b>-Elements beeinflussen. Stellen Sie dieses auf den Wert <b>False <\/b>ein, nimmt das letzte Element nur den Platz ein, den der Inhalt erfordert (siehe Beispielprojekt unter <b>Beispiel #2<\/b>):<\/p>\n<p class=\"image\"><img decoding=\"async\" src=\"..\/fileadmin\/_temp_\/2016_06\/pic_61_002.png\" alt=\"Beispiel f&uuml;r vier an den verschiedenen Seiten angedockte Steuerelemente\" width=\"499,6607\" height=\"333,638\"\/><\/p>\n<p><b><span style=\"color:darkgrey;\">Bild 1: Beispiel f&uuml;r vier an den verschiedenen Seiten angedockte Steuerelemente<\/span><\/b><\/p>\n<pre>&lt;DockPanel LastChildFill=\"False\"&gt;\r\n     ...\r\n&lt;\/DockPanel&gt;<\/pre>\n<p> Dadurch entsteht ein Leerraum wie in Bild 2.<\/p>\n<p class=\"image\"><img decoding=\"async\" src=\"..\/fileadmin\/_temp_\/2016_06\/pic_61_001.png\" alt=\"Leerraum durch das Attribut LastChildFill\" width=\"424,7115\" height=\"283,5923\"\/><\/p>\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\/55000061\/\">\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\/55000061?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\t\t\t\t\t<input type=\"hidden\" name=\"rcp_redirect\" value=\"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts\/55000061\/\"\/>\n\t\t\t\t\t\t\t\t<input type=\"hidden\" name=\"rcp_login_nonce\" value=\"05094fc278\"\/>\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>Das DockPanel-Element ist eines der Steuerelemente, mit dem sich untergeordnete Steuerelemente ausrichten lassen. Das interessante an diesem Steuerelement ist, dass die enthaltenen Elemente jeweils an der angegebenen Seite des DockPanels angedockt werden. Damit lassen sich interessante Anordnungen erzielen. Welche das sind und wie Sie diese realisieren, erfahren Sie in diesem Artikel.<\/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":[662016,66062016,44000002,44000004,44000003,44000015],"tags":[],"yst_prominent_words":[],"class_list":["post-55000061","post","type-post","status-publish","format-standard","hentry","category-662016","category-66062016","category-Benutzeroberflaeche_mit_WPF","category-Loesungen","category-WPFGrundlagen","category-WPFSteuerelemente"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts\/55000061","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=55000061"}],"version-history":[{"count":0,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/posts\/55000061\/revisions"}],"wp:attachment":[{"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/media?parent=55000061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/categories?post=55000061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/tags?post=55000061"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/vbentwickler.de\/data\/wp\/v2\/yst_prominent_words?post=55000061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}