Udostępnij za pośrednictwem

Instrukcje: zmienianie rozmiaru wierszy za pomocą kontrolki GridSplitter

  • Artykuł

W tym przykładzie pokazano, jak używać GridSplitter poziomego do ponownego dystrybuowania przestrzeni między dwoma wierszami w Grid bez zmieniania wymiarów Grid.

Przykład

Jak utworzyć GridSplitter nakładający się na krawędź wiersza

Aby określić GridSplitter, który zmienia rozmiar sąsiednich wierszy w Grid, ustaw właściwość Row dołączoną do jednego z wierszy, które chcesz zmienić. Jeśli Grid ma więcej niż jedną kolumnę, ustaw dołączoną właściwość ColumnSpan, aby określić liczbę kolumn. Następnie ustaw VerticalAlignment na Top lub Bottom (ustawienie wyrównania zależy od tego, które dwa wiersze chcesz zmienić). Na koniec ustaw właściwość HorizontalAlignment na Stretch.

W poniższym przykładzie pokazano, jak zdefiniować poziomą GridSplitter, która zmienia rozmiar sąsiednich wierszy.

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

GridSplitter, który nie zajmuje własnego wiersza, może być zasłonięty przez inne kontrolki w Grid. Aby uzyskać więcej informacji na temat zapobiegania temu problemowi, zobacz Upewnij się, że funkcja GridSplitter jest widoczna.

Jak utworzyć obiekt GridSplitter, który zajmuje wiersz

Aby określić GridSplitter, który zajmuje wiersz w Grid, ustaw właściwość Row dołączoną do jednego z wierszy, które chcesz zmienić. Jeśli Grid ma więcej niż jedną kolumnę, ustaw właściwość ColumnSpan na liczbę kolumn. Następnie ustaw VerticalAlignment na wartość Center, ustaw właściwość HorizontalAlignment na Stretchi ustaw Height wiersza zawierającego GridSplitter na wartość Auto.

W poniższym przykładzie pokazano, jak zdefiniować poziomą GridSplitter, która zajmuje wiersz i zmienia rozmiar wierszy po obu stronach.

<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"/>

Zobacz też