{"id":55000241,"date":"2020-12-01T00:00:00","date_gmt":"2020-12-23T15:46:06","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=241"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Das_GridSplitterSteuerelement","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Das_GridSplitterSteuerelement\/","title":{"rendered":"Das GridSplitter-Steuerelement"},"content":{"rendered":"

Das Grid-Steuerelement dürfte Ihnen als Leser dieses Magazins bekannt sein – wir verwenden es sehr oft, um die Position von Steuerelementen wie Bezeichnungsfeldern, Textfeldern oder Schaltflächen einzustellen. Im Zusammenhang mit dem Grid-Steuerelement müssen Sie ein weiteres Steuerelement unbedingt kennenlernen: das GridSplitter-Steuerelement. Dieses unterteilt das Grid zwischen zwei bestimmten Zeilen oder Spalten und bietet die Möglichkeit, dass Sie das Verhältnis der Höhe beziehungsweise Breite der Steuerelemente über\/unter beziehungsweise links\/rechts vom GridSplitter-Steuerelement einstellen können. Damit vergrößern Sie dann den jeweils benötigten Bereich.<\/b><\/p>\n

Vielleicht kennen Sie ähnliche Lösungen von Access: Dort mussten Sie ein Rectangle-Steuerelement zwischen den zu vergrößernden\/verkleinernden Steuerelementen platzieren. Mit dem Ereignis Bei Mausbewegung <\/b>wurde dann beim Ziehen des Rechtecks zu einer Seite die Position des Rechtecks geändert beziehungsweise die Größe der Steuerelemente, die sich auf einer der beiden Seiten vom Rechteck befunden haben. Das Problem: Man musste die Größe und Position jedes Steuerelements, das durch die Größenänderung betroffen war, per Code einstellen.<\/p>\n

Vertikaler GridSplitter<\/b><\/p>\n

Die Variante, die Sie mit dem GridSplitter<\/b>-Steuerelement kennenlernen, ist ungleich komfortabler. Sie setzt allerdings voraus, dass Sie die Steuerelemente in den Spalten und Zeilen eines Grid<\/b>-Steuerelements organisiert haben. Das GridSplitter<\/b>-Steuerelement platzieren Sie dabei in einer eigens dafür vorgesehenen Spalte oder Zeile im Grid. Schauen wir uns das am Beispiel eines vertikalen GridSplitters an, der die Bereiche rechts und links vergrößern oder verkleinern soll – je nachdem, in welche Richtung Sie diesen bewegen. Der einfache Entwurf sieht wie in Bild 1 aus. <\/p>\n

\"Das<\/p>\n

Bild 1: Das GridSplitter-Steuerelement zwischen zwei Steuerelementen<\/span><\/b><\/p>\n

Den entsprechenden XAML-Code finden Sie hier: Wir haben mit den Elementen Grid.ColumnDefinitions <\/b>und ColumnDefinition <\/b>drei Spalten in einem Grid definiert. Die Spalten links und rechts erhalten für die Eigenschaft Width <\/b>den Wert *<\/b>, was bedeutet, dass diese sich den Platz in der Breite aufteilen, der nicht von Spalten mit fest vorgegebener Breite eingenommen wird. Eine solche Spalte legen wir in der Mitte an und weisen ihr die Breite 10 <\/b>zu. Damit hat diese beim Öffnen die Breite 10 und die beiden äußeren Spalten teilen sich den restlichen Platz auf.<\/p>\n

Der linken und rechten Spalte fügen wir jeweils ein Label<\/b>-Steuerelement zu, welche den kompletten Platz in den Spalten einnehmen. Der mittleren Spalte weisen wir ein GridSplitter<\/b>-Steuerelement zu, das wir mit einem hellgrauen Hintergrund versehen und das durch den Wert Stretch <\/b>für die Eigenschaft HorizontalAlignment <\/b>die gesamte Breite der mittleren Spalte des Grids einnimmt. Außerdem legen wir vorsichtshalber den Wert des Attributs ResizeDirection <\/b>auf Columns <\/b>fest:<\/p>\n

<Grid>\r\n     <Grid.ColumnDefinitions>\r\n         <ColumnDefinition Width=\"*\"><\/ColumnDefinition>\r\n         <ColumnDefinition Width=\"10\"><\/ColumnDefinition>\r\n         <ColumnDefinition Width=\"*\"><\/ColumnDefinition>\r\n     <\/Grid.ColumnDefinitions>\r\n     <Label Grid.Column=\"0\" BorderBrush=\"Black\" BorderThickness=\"1\">Spalte 0<\/Label>\r\n     <GridSplitter Grid.Column=\"1\" ResizeDirection=\"Columns\" Background=\"LightGray\" HorizontalAlignment=\"Stretch\"><\/GridSplitter>\r\n     <Label Grid.Column=\"2\" BorderBrush=\"Black\" BorderThickness=\"1\">Spalte 1<\/Label>\r\n<\/Grid><\/pre>\n
Starten wir das Projekt, können wir den Gridsplitter per Herunterdrücken der linken Maustaste anfassen und durch Bewegen der Maus nach links oder rechts verschieben. Die Steuerelemente, die sich in der Grid<\/b>-Spalte links und rechts davon befinden, werden dann entsprechend der Breite der jeweiligen Spalte angepasst (siehe Bild 2).<\/p>\n
\"Einstellen<\/p>\n
Bild 2: Einstellen der Größe der Bereiche links und rechts vom vertikalen GridSplitter-Steuerelement<\/span><\/b><\/p>\n
Horizontaler GridSplitter<\/b><\/p>\n
Auf ähnliche Weise arbeiten wir mit einem GridSplitter<\/b>-Steuerelement, mit dem wir das Grid in einen Teil über und einen Teil unter dem GridSplitter einteilen. Dazu stellen wir nun mehrere Zeilen her, von denen die mittlere das GridSplitter<\/b>-Steuerelement aufnimmt:<\/p>\n
<Grid>\r\n     <Grid.RowDefinitions>\r\n         <RowDefinition Height=\"*\"><\/RowDefinition>\r\n         <RowDefinition Height=\"10\"><\/RowDefinition>\r\n         <RowDefinition Height=\"*\"><\/RowDefinition>\r\n     <\/Grid.RowDefinitions>\r\n     <Label Grid.Row=\"0\" BorderBrush=\"Black\" BorderThickness=\"1\">Zeile 0<\/Label>\r\n     <GridSplitter Grid.Row=\"1\" ResizeDirection=\"Rows\" Background=\"LightGray\" HorizontalAlignment=\"Stretch\"><\/GridSplitter>\r\n     <Label Grid.Row=\"2\" BorderBrush=\"Black\" BorderThickness=\"1\">Zeile 1<\/Label>\r\n<\/Grid><\/pre>\n
Wir brauchen an dem Beispiel gar nicht so viel zu ändern – wir legen statt des Grid.ColumnDefinitions<\/b>-Elements ein Grid.RowDefinitions<\/b>-Element an, ordnen diesen statt ColumnDefinition<\/b>-Elementen RowDefinition<\/b>-Elemente zu, die wir überdies statt mit der Eigenschaft Width <\/b>mit der Eigenschaft Height <\/b>ausstatten. Die oberste und die unterste Zeile erhalten den Wert * <\/b>für die Höhe und die mittlere wieder den Wert 10<\/b>.<\/p>\n
Schließlich weisen wir die beiden Bezeichnungsfelder den Zeilen mit dem Index 0 <\/b>beziehungsweise 2 <\/b>und das GridSplitter<\/b>-Element der Zeile mit dem Index 1<\/b> zu. Dieses statten wir außerdem mit dem Wert Rows <\/b>für das Attribut ResizeDirection <\/b>aus. Damit erhalten wir den Entwurf aus Bild 3.<\/p>\n
\"Entwurf<\/p>\n
Bild 3: Entwurf des Grids mit dem horizontalen GridSplitter<\/span><\/b><\/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