Gewusst wie: Änderung der Zeilengröße mit einem GridSplitter

  • Artikel

Dieses Beispiel zeigt, wie Sie mit einem horizontalen GridSplitter den Platz zwischen zwei Spalten in einem Grid neu verteilen können, ohne die Abmessungen für das Grid zu ändern.

Beispiel

Erstellen eines GridSplitter-Elements, das den Rand einer Zeile überlagert

Um einen GridSplitter zu definieren, der die Größe benachbarter Zeilen in einem Grid ändert, legen Sie die angefügte Eigenschaft Row auf eine der Zeilen fest, deren Größe Sie ändern möchten. Wenn Ihr Grid mehr als eine Spalte umfasst, legen Sie die angefügte Eigenschaft ColumnSpan fest, um die Anzahl von Spalten anzugeben. Legen Sie dann VerticalAlignment auf Top oder Bottom fest (die festgelegte Ausrichtung hängt davon ab, welche beiden Zeilen Sie in der Größe ändern möchten). Und schließlich legen Sie die HorizontalAlignment-Eigenschaft auf Stretch fest.

Das folgende Beispiel zeigt, wie Sie einen horizontalen GridSplitter definieren, der die Größe benachbarter Zeilen ändert.

<GridSplitter Grid.Row="1" 
              Grid.ColumnSpan="3" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Top"
              Background="Black" 
              ShowsPreview="true"
              ResizeDirection="Rows"
              Height="5"/>

Ein GridSplitter, der keine eigene Zeile belegt, kann durch andere Steuerelemente im Grid verdeckt werden. Weitere Informationen zum Vermeiden dieses Problems finden Sie unter Sicherstellen, dass ein GridSplitter sichtbar ist.

Erstellen eines GridSplitter-Elements, das eine Zeile einnimmt

Um einen GridSplitter anzugeben, der eine Zeile in einem Grid belegt, legen Sie die angefügte Eigenschaft Row auf eine der Zeilen fest, deren Größe Sie ändern möchten. Wenn Ihr Grid mehr als eine Spalte umfasst, legen Sie die angefügte Eigenschaft ColumnSpan auf die Anzahl von Spalten fest. Legen Sie dann die Eigenschaft VerticalAlignment auf Center, die Eigenschaft HorizontalAlignment auf Stretch und den Height-Wert der Zeile, die den GridSplitter enthält, auf Auto fest.

Das folgende Beispiel zeigt, wie Sie einen horizontalen GridSplitter definieren, der eine Zeile einnimmt und die Größe der Zeilen auf beiden Seiten davon ändert.

<Grid.RowDefinitions>
  <RowDefinition Height="50*" />
  <RowDefinition Height="Auto" />
  <RowDefinition Height="50*" />
</Grid.RowDefinitions>

<StackPanel Grid.Row="0" Grid.Column="1" Background="Tan"/>
<GridSplitter Grid.Row="1"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Center"
              Background="Black" 
              ShowsPreview="True"
              Height="5"
           />
<StackPanel Grid.Row="2" Grid.Column="0" Background="Brown"/>

Weitere Informationen