{"id":55000013,"date":"2015-04-01T00:00:00","date_gmt":"2020-03-27T19:16:12","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=13"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Steuerelemente_anordnen","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Steuerelemente_anordnen\/","title":{"rendered":"Steuerelemente anordnen"},"content":{"rendered":"

Unter Access ist das Anordnen von Steuerelementen einfach: Sie platzieren diese einfach auf dem Formular. In neueren Access-Versionen gibt es noch die Eigenschaften zum Verankern von Steuerelementen, aber damit sind die Möglichkeiten bereits ausgeschöpft. Unter WPF gibt es zahlreiche weitere Möglichkeiten, um die Position von Steuerelementen festzulegen. Dieser Artikel zeigt, wie es funktioniert und welche Vorteile sich gegenüber Access ergeben. Dabei lernen Sie auch gleich noch das Grid-Steuerelement und das GridSplitter-Steuerelement kennen, mit dem Sie Bereiche des Fensters vergrößern oder verkleinern können.<\/b><\/p>\n

Das Ziel beim Programmieren mit WPF und einer Programmiersprache wie C# ist ja, die Benutzeroberfläche unabhängig vom dahinter steckenden Code entwickeln zu können – und umgekehrt. In der ersten Instanz werden wir noch nicht komplett dazu übergehen, sondern beispielsweise das Auslösen von Ereignissen noch in der Definition der Benutzeroberfläche verankern. Später lernen Sie Techniken kennen, auch dies von der Benutzeroberfläche zu entkoppeln. Theoretisch können Sie also tatsächlich einen Designer mit der Bearbeitung der Benutzeroberfläche betrauen, während Sie sich um den Code kümmern, der die Benutzeroberfläche steuert und von ihren Elementen ausgelöst wird.<\/p>\n

Hierarchische Struktur<\/h2>\n

Wenn Sie ein Steuerelement zu einem neuen Fenster hinzufügen, sieht dies zunächst nicht viel anders aus wie eines in einem Access-Formular. Die XAML-Definition zeigt allerdings schnell, dass hier eine verschachtelte Struktur entstanden ist: Das Window<\/b>-Element (das dem Formular unter Access entspricht) enthält zunächst ein Grid<\/b>-Element, das dann wiederum etwa ein Button<\/b>-Element aufnimmt (siehe Bild 1). Was es mit dem Grid<\/b>-Element auf sich hat, schauen wir uns weiter unten an.<\/p>\n

\"Ein<\/p>\n

Bild 1: Ein Element mit seinen Eigenschaften<\/span><\/b><\/p>\n

Element markieren<\/h2>\n

Wenn Sie nun das Button<\/b>-Element markieren wollen, klicken Sie es einfach an. Beim Grid<\/b>-Element und beim Window<\/b>-Element wird das schon schwieriger. Nach etwas Experimentieren findet man heraus, dass man das Window<\/b>-Element mit einem Klick auf den Fenstertitel markieren kann. Eine sichere Methode, das richtige Element zu markieren, bietet das Kontextmenü eines der Elemente. Dazu wählen Sie das Element der untersten gewünschten Hierarchie-Ebene aus, also beispielsweise das Button<\/b>-Element aus der Abbildung. Das Kontextmenü bietet per Rechtsklick auf das Element den Eintrag Aktuelle Auswahl festlegen <\/b>an, mit dem Sie eines der Elemente [Button]<\/b>, [Grid] <\/b>oder [Window] <\/b>auswählen können (siehe Bild 2).<\/p>\n

\"Markieren<\/p>\n

Bild 2: Markieren eines Elements der Hierarchie per Kontextmenü<\/span><\/b><\/p>\n

Größe und Position<\/h2>\n

Im Gegensatz zum Formularentwurf unter Access fällt gleich auf, dass die relevanten Maße des aktuell markierten Elements im Entwurf angezeigt werden. So werden die Abstände zum übergeordneten Element (im Falle des Button<\/b>-Elements etwa zum Grid<\/b>-Element) ständig angezeigt. Die Breite und Höhe eines Elements erscheinen, wenn Sie diese mit der Maus ändern (siehe Bild 3).<\/p>\n

\"Anzeigen<\/p>\n

Bild 3: Anzeigen der Größe bei Anpassen von Höhe oder Breite<\/span><\/b><\/p>\n

Width und Height<\/h2>\n

Die Größe finden Sie in der WPF-Definition unter den Eigenschaften Height <\/b>beziehungsweise Width <\/b>des jeweiligen Elements wieder. Damit legen Sie die Größe des Elements explizit fest. Mit MinWidth, MaxWidth<\/b>, MinHeight <\/b>und MaxHeight <\/b>gibt es jedoch noch vier weitere Eigenschaften. Damit geben Sie die minimale und die maximale Höhe und Breite für ein Steuerelement an. Standardmäßig erscheint das Steuerelement dann mit den in MinWidth <\/b>und MinHeight <\/b>angegebenen Maßen. Es kann jedoch sein, dass sich der ursprüngliche Inhalt einmal ändert – beispielsweise, weil eine Schaltflächenbeschriftung in einer anderen Sprache angezeigt werden soll und mehr Platz einnimmt oder weil die Beschriftung\/Schriftart\/Schriftgröße je nach Kontext verändert werden soll. In einem solchen Fall würde man die Min…<\/b>-Eigenschaften nutzen.<\/p>\n

Sind beispielsweise MinWidth<\/b>, MaxWidth<\/b> und Width <\/b>gesetzt, wird Width <\/b>verwendet, sofern es innerhalb des Bereichs von MinWidth <\/b>und MaxWidth <\/b>liegt – das gilt auch für die entsprechenden Height<\/b>-Werte.<\/p>\n

Sind keine Breiten- oder Höhenangaben gemacht worden, richten sich die Abmessungen nach den maximal für den Inhalt nötigen Werten.<\/p>\n

Wenn Sie die aktuelle Höhe und Breite eines Elements ermitteln wollen, verwenden Sie die Eigenschaften ActualHeight <\/b>und ActualWidth<\/b>.<\/p>\n

Sie sollten keine absoluten Werte für Höhe und Breite angeben, wenn dies nicht dringend nötig ist – anderenfalls kann es sein, dass ein zur Laufzeit zugewiesener Text abgeschnitten dargestellt wird.<\/p>\n

Margin<\/h2>\n

Die Position relativ zum übergeordneten Element ergibt sich aus der Eigenschaft Margin<\/b>. Diese nimmt verschiedene Zeichenfolgen entgegen. Enthält diese etwa nur einen Zahlenwert, wird dieser für die Abstände zum linken, rechten, oberen und unteren Rand verwendet. Der folgende Button legt den Abstand von allen vier Seiten des übergeordneten Elements auf 10<\/b> fest:<\/p>\n

<Button Margin=\"10\" Width=\"96\" Height=\"25\" ... \/><\/pre>\n
Wenn Sie diese vier Werte einzeln angeben möchten, können Sie einen Ausdruck für Margin <\/b>angeben, der die vier Werte für Left<\/b>, Top<\/b>, Width <\/b>und Height <\/b>als kommaseparierte Liste entgegennimmt:<\/p>\n
<Button Margin=\"10, 10, 10, 10\" Width=\"96\" Height=\"25\" ... \/><\/pre>\n
VerticalAlignment und HorizontalAlignment<\/h2>\n
Unter Access kannten Sie möglicherweise die mit den neueren Versionen eingeführten Eigenschaften Horizontaler Anker <\/b>und Vertikaler Anker<\/b>. Damit konnten Sie festlegen, ob ein Steuerelement beim Verändern der Formulargröße nach rechts oder unten verschoben wird oder ob sogar seine Größe entsprechend angepasst wurde.<\/p>\n
Unter WPF übernehmen die beiden Eigenschaften VerticalAlignment <\/b>und HorizontalAlignment <\/b>diese Aufgabe. Die Eigenschaft HorizontalAlignment <\/b>kann die Werte Left<\/b>, Center<\/b>, Right <\/b>und Stretch <\/b>annehmen, die Eigenschaft Vertical-Alignment <\/b>die Werte Top<\/b>, Center<\/b>, Bottom <\/b>und Stretch<\/b>. Bild 4 zeigt Beispiele für Schaltflächen, die mit den Werten Left<\/b>, Center <\/b>und Right <\/b>für HorizontalAlignment <\/b>und Top<\/b>, Center <\/b>und Bottom <\/b>für VerticalAlignment <\/b>ausgestattet wurden:<\/p>\n
\"Schaltflächen<\/p>\n
Bild 4: Schaltflächen mit verschiedenen Ausrichtungen<\/span><\/b><\/p>\n
<Grid>\r\n     <Button Content=\"Button\" HorizontalAlignment=\"Left\" VerticalAlignment=\"Top\" \/>\r\n     <Button Content=\"Button\" HorizontalAlignment=\"Left\" VerticalAlignment=\"Center\" \/>\r\n     <Button Content=\"Button\" HorizontalAlignment=\"Left\" VerticalAlignment=\"Bottom\" \/>\r\n     <Button Content=\"Button\" HorizontalAlignment=\"Center\" VerticalAlignment=\"Top\" \/>\r\n     <Button Content=\"Button\" HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\" \/>\r\n     <Button Content=\"Button\" HorizontalAlignment=\"Center\" VerticalAlignment=\"Bottom\" \/>\r\n     <Button Content=\"Button\" HorizontalAlignment=\"Right\" VerticalAlignment=\"Top\" \/>\r\n     <Button Content=\"Button\" HorizontalAlignment=\"Right\" VerticalAlignment=\"Center\" \/>\r\n     <Button Content=\"Button\" HorizontalAlignment=\"Right\" VerticalAlignment=\"Bottom\" \/>\r\n<\/Grid><\/pre>\n
Mit diesen Einstellungen bleiben die Button<\/b>-Elemente jeweils am Rand kleben, das mittlere in der Mitte.<\/p>\n
Die hier nicht verwendete Einstellung ist gleichzeitig die Standardeinstellung: Wenn Sie HorizontalAlignment <\/b>oder VerticalAlignment <\/b>weglassen, verwendet WPF die Einstellung Stretch für das jeweilige Attribut.<\/p>\n
Padding<\/h2>\n
Mit dem Attribut Padding<\/b> legen Sie fest, welchen Abstand der Inhalt eines Steuerelements, also beispielsweise die Beschriftung einer Schaltfläche, von den Rändern haben soll. Mit Padding=”10,10,10,10″ <\/b>legen Sie also den Abstand des Inhalts von den Rändern des Objekts fest.<\/p>\n
Dabei hängt es von den Einstellungen der beiden Eigenschaft HorizontalContentAlignment <\/b>und VerticalContentAlignment <\/b>ab, ob die Einstellungen für Padding <\/b>tatsächlich relevant sind. Bei einer großen Schaltfläche, deren Beschriftung klein ist und wie folgt ausgerichtet wird, spielt Padding keine Rolle:<\/p>\n
<Button Content=\"Button mit einer etwas umfangreicheren Beschriftung\" HorizontalAlignment=\"Left\" Height=\"50\" Margin=\"50,50,0,0\" VerticalAlignment=\"Top\" Width=\"200\" \r\n                 Padding=\"10,10,10,10\" HorizontalContentAlignment=\"Center\" VerticalContentAlignment=\"Center\"\/><\/pre>\n
Standardeinstellungen<\/h2>\n
Neu hinzugefügte WPF-Elemente erhalten je nach der  Art des Hinzufügens unterschiedliche Standardattribute. Wenn Sie etwa einfach auf das Button<\/b>-Element im Werkzeugkasten klicken und dann im Fenster per Klick die Position markieren, an der das Steuerelement landen soll, fügt Visual Studio mit Content <\/b>die Beschriftung Button<\/b>, mit Horizontal-Align-ment <\/b>und VerticalAlignment <\/b>die Werte Left <\/b>und Top<\/b>, mit Margin <\/b>die aktuelle Position und mit Width <\/b>eine Standardbreite von 75 <\/b>vor.<\/p>\n
Was aber geschieht, wenn wir alle Attribute außer Content <\/b>entfernen In diesem Fall nimmt das Button<\/b>-Steuerelement die komplette Fläche des übergeordneten Elements ein. Das bedeutet also, dass HorizontalAlignment <\/b>und VerticalAlignment <\/b>offensichtlich den Wert Stretch <\/b>als Standardwert einsetzen.<\/p>\n
Experimente zum Einüben der Eigenschaften<\/h2>\n
Am besten finden Sie sich in die verschiedenen Eigenschaften für die Einstellung der Größe und Ausrichtung ein, indem Sie ein wenig experimentieren. Das gelingt in diesem Fall sehr gut, wenn Sie sich auf die Eingabe per XAML konzentrieren. Legen Sie beispielsweise in einem leeren Fenster einmal folgenden Code an:<\/p>\n
<Window ... Title=\"MainWindow\" Height=\"350\" Width=\"525\">\r\n     <Grid>\r\n         <Button Content=\"Beispielschaltfläche\" \/>\r\n     <\/Grid>\r\n<\/Window><\/pre>\n
Dies zeigt eine Schaltfläche an, die sich über das komplette Grid<\/b>-Element im Fenster erstreckt (siehe Bild 5).<\/p>\n
\"Schaltfläche<\/p>\n
Bild 5: Schaltfläche ohne Attribute für Größe und Position<\/span><\/b><\/p>\n
Ergänzen Sie nun das Attribut Margin<\/b> wie folgt, bringt dies einen Abstand zum oberen, linken, rechten und unteren Rand wie in Bild 6 ein:<\/p>\n
\"Schaltfläche<\/p>\n
Bild 6: Schaltfläche mit Margin<\/span><\/b><\/p>\n
<Button Content=\"Beispielschaltfläche\" \r\n     Margin=\"20,20,20,20\"\/><\/pre>\n
Stellen Sie dann die Attribute HorizontalAlignment <\/b>und VerticalAlignment <\/b>auf Left <\/b>beziehungsweise Top <\/b>ein, werden die Eigenschaften für den rechten und unteren Rand im Attribut Margin <\/b>wirkungslos (siehe Bild 7):<\/p>\n
\"Schaltfläche<\/p>\n
Bild 7: Schaltfläche mit horizontaler und senkrechter Ausrichtung<\/span><\/b><\/p>\n
<Button Content=\"Beispielschaltfläche\" \r\n     Margin=\"20,20,20,20\" HorizontalAlignment=\"Left\" \r\n     VerticalAlignment=\"Top\"\/><\/pre>\n
Nun wollen wir, dass die Schaltfläche etwas luftiger aussieht und vergrößern den Abstand vom Inhalt, also der Beschriftung, zum Rand der Schaltfläche. Dies erledigen wir mit der Eigenschaft Padding<\/b> (Ergebnis siehe Bild 8).<\/p>\n
\"Schaltfläche<\/p>\n
Bild 8: Schaltfläche mit Padding<\/span><\/b><\/p>\n
<Button Content=\"Beispielschaltfläche\" \r\n     Margin=\"20,20,20,20\" HorizontalAlignment=\"Left\" \r\n     VerticalAlignment=\"Top\" Padding=\"10,10,10,10\" \/><\/pre>\n
In Bild 9 sehen Sie schließlich noch, warum eine feste Höhe und Breite sich nachteilig auswirken kann: Durch die Padding<\/b>-Eigenschaft und den dadurch entstehenden Abstand zum Steuerelementrand wird der Platz für die Beschriftung zu eng:<\/p>\n
\"Schaltfläche<\/p>\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