{"id":55000108,"date":"2017-12-01T00:00:00","date_gmt":"2020-03-27T19:29:10","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=108"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Grid_im_Griff","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Grid_im_Griff\/","title":{"rendered":"Grid im Griff"},"content":{"rendered":"

Das Grid-Element ist ein flexibles Steuer-element zum Platzieren der enthaltenen Steuer-elemente. Seine Definition erfolgt entweder über XAML oder über den Entwurf der jeweiligen .xaml-Seite. Wie Sie das Grid-Element zur Anordnung von Steuerelementen mit XAML definieren, haben wir uns zum Teil schon im Artikel Steuer-elemente anordnen angesehen. Im vorliegenden Artikel zeigen wir nun, wie Sie das Grid schnell mit der Maus so definieren, wie Sie es sonst per XAML tun – und sich damit eine Menge Zeit und Mühe sparen können.<\/b><\/p>\n

Standardaufgaben vereinfachen<\/h2>\n

Wenn Sie Steuer-elemente auf einem WPF-Fenster anordnen wollen, können Sie diese natürlich einfach so aus der Toolbox auf das Fenster ziehen und mit den absoluten Werten arbeiten, die dann automatisch für Position und Größe der Steuer-elemente angelegt werden. Sie können diese allerdings auch in Elementen wie dem Grid<\/b>, dem StackPanel<\/b>, dem WrapPanel<\/b>, dem DockPanel<\/b> oder anderen Elementen platzieren. Wenn Sie die Steuer-elemente alle direkt auf der Seite platzieren, wird es kompliziert, wenn es um verschiedene Bildschirmauflösungen oder in der Größe variable Fenster geht. Mit dem Grid<\/b>-Element geht das alles viel besser: Sie können dann die Elemente in das Grid einfügen und durch Einstellen von Eigenschaften dafür sorgen, dass sich die Größe etwa eines Bezeichnungsfeldes, Textfeldes oder einer Schaltfläche in Abhängigkeit der jeweiligen Zelle im Grid anpasst. Erstmal wollen wir uns jedoch anschauen, wie dem Grid Zeilen und Spalten mit der Maus hinzufügen, also durch direkte Manipulation der XAML-Entwurfsansicht.<\/p>\n

Grid-Element<\/h2>\n

Das Grid<\/b>-Element ist ja bei jedem neu angelegten Window<\/b>– oder Page<\/b>-Element automatisch vorhanden und wird im XAML-Code wie folgt definiert:<\/p>\n

<Grid><\/Grid><\/pre>\n
Im Entwurf fällt es auch deshalb kaum auf, weil seine Größe genau mit der des Fensters übereinstimmt. Allein wenn Sie es im Code markieren, wird es durch die Verankerungen sichtbar (siehe Bild 1).<\/p>\n
\"Einfaches<\/p>\n
Bild 1: Einfaches Grid, standardmäßig an allen Seiten verankert<\/span><\/b><\/p>\n
Sollten Sie ein Grid einmal versehentlich aus dem übergeordneten Element löschen, können Sie es einfach aus der Toolbox in das Zielelement ziehen – dann wird im Code es allerdings mit absoluten Eigenschaften versehen, etwa so – und sieht im Entwurf wie in Bild 2 aus:<\/p>\n
\"Ein<\/p>\n
Bild 2: Ein aus der Toolbox hinzugefügtes Grid-Element<\/span><\/b><\/p>\n
<Grid HorizontalAlignment=\"Left\" Height=\"100\" Margin=\"20,20,0,0\" VerticalAlignment=\"Top\" Width=\"200\"\/><\/pre>\n
Wenn das Grid sich über das komplette Fenster erstrecken soll und bei Größenänderungen ebenfalls angepasst werden soll, benötigen Sie all diese Eigenschaften jedoch nicht. Bevor Sie die unnötigen Attribute aus dem Element entfernt haben, haben Sie jedoch schneller ein neues, leeres Element mit der Definition <\/Grid> <\/b>angelegt.<\/p>\n
Anlegen von Spalten<\/h2>\n
Für eine bessere Sichtbarkeit der nachfolgend vorgenommenen Änderungen verwenden wir jedoch weiterhin das mitten im Fenster angelegte Grid<\/b>-Element. Um dem Grid<\/b>-Element eine neue Spalte hinzuzufügen, bewegen Sie den Mauszeiger nach dem Markieren des Grid<\/b>-Elements (was am einfachsten durch Setzen der Einfügemarke in den Code des Grid<\/b>-Elements gelingt) oben an die gestrichelte Linie, bis eine vertikale Linie wie in Bild 3 erscheint.<\/p>\n
\"Hinzufügen<\/p>\n
Bild 3: Hinzufügen einer Spalte zum Grid-Element<\/span><\/b><\/p>\n
Bewegen Sie die Maus an die gewünschte Stelle und klicken Sie, wenn Sie diese erreicht haben. Die neue Spalte wird dann wie in Bild 4 angelegt. Der XAML-Code wird dadurch merklich erweitert, nämlich um die Definition der entsprechenden Spalten. Durch das Hinzufügen einer Spalte haben Sie nun zwei Spalten, denn eine Spalte war ja implizit bereits vorher vorhanden. Nun haben wir zwei durch ColumnDefinition<\/b>-Elemente definierte Spalten, für die Visual Studio gleich die entsprechenden Breiten eingetragen hat:<\/p>\n
\"Grid-Element<\/p>\n
Bild 4: Grid-Element mit der neuen Spalte<\/span><\/b><\/p>\n
<Grid ...>\r\n     <Grid.ColumnDefinitions>\r\n         <ColumnDefinition Width=\"41*\"\/>\r\n         <ColumnDefinition Width=\"159*\"\/>\r\n     <\/Grid.ColumnDefinitions>\r\n<\/Grid><\/pre>\n
Wenn Sie weitere vertikale Linien auf die oben gezeigte Art hinzufügen, werden die Elemente unter Grid.ColumnDefinitions <\/b>entsprechend erweitert. Was bedeutet 41* <\/b>und 159* <\/b>doch gleich Das ist das Verhältnis, in dem die Breiten der Spalten zueinanderstehen. Die Gesamtbreite entspricht hier 200*, also nimmt die linke Spalte 41\/200 und die rechte 159\/200 der Breite de Grid<\/b>-Elements ein. Wenn Sie dies einfach anpassen wollen, bewegen Sie den Mauszeiger oben auf das nach unten zeigende Dreieck zwischen den beiden Spalten und ziehen Sie dieses wie in Bild 5 nach links oder rechts. Halten Sie dabei die Umschalt<\/b>-Taste gedrückt, ändert sich auch gleich noch die Größe des dem Grid übergeordneten Elements, hier dem Window<\/b>-Element, mit.<\/p>\n
\"Ändern<\/p>\n
Bild 5: Ändern des Spaltenbreiten-Verhältnisses<\/span><\/b><\/p>\n
Neben der hier beschriebenen Syntax mit der Zahl und dem folgenden Sternchen (*<\/b>) wie 50*<\/b> gibt es natürlich noch andere Werte, die Sie gelegentlich verwenden wollen – zum Beispiel das Sternchen ohne führende Zahl oder der Wert Auto<\/b>. Diese können Sie ebenfalls über die Entwurfsansicht manipulieren. Dazu fahren Sie mit der Maus wie oben beschrieben so in den oberen Bereich einer Spalte, als ob Sie eine neue Spalte anlegen wollen. Es erscheint dann eine Art Kombinationsfeld, das nach dem Anklicken der Schaltfläche am rechten Rand die Optionen wie in Bild 6 anzeigt.<\/p>\n
\"Spalten-Optionen\"<\/p>\n
Bild 6: Spalten-Optionen<\/span><\/b><\/p>\n