방법: GridSplitter로 행 크기 조정

  • 아티클

이 예제는 Grid의 치수를 변경하지 않고 가로 GridSplitter를 사용하여 Grid의 두 행 사이의 간격을 재분배하는 방법을 보여 줍니다.

예제

행의 가장자리를 오버레이하는 GridSplitter를 만드는 방법

Grid에서 인접 행의 크기를 조정하는 GridSplitter를 지정하려면 Row 연결된 속성을 크기를 조정할 행 중 하나로 설정합니다. Grid에 두 개 이상의 열이 있는 경우 ColumnSpan 연결된 속성을 열 수로 설정합니다. 그런 다음, VerticalAlignment를 Top 또는 Bottom으로 설정합니다(설정하는 맞춤은 크기를 조정할 두 행에 따라 달라집니다). 마지막으로 HorizontalAlignment 속성을 Stretch로 설정합니다.

다음 예제는 인접한 행의 크기를 조정하는 가로 GridSplitter를 정의하는 방법을 보여 줍니다.

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

자체 행을 차지하지 않는 GridSplitter는 Grid의 다른 컨트롤에 의해 가려질 수 있습니다. 이 문제를 방지하는 방법에 대한 자세한 내용은 Make Sure That a GridSplitter Is Visible(GridSplitter가 표시되는지 확인)을 참조하세요.

행을 차지하는 GridSplitter를 만드는 방법

Grid에서 행을 차지하는 GridSplitter를 지정하려면 Row 연결된 속성을 크기를 조정할 행 중 하나로 설정합니다. Grid에 두 개 이상의 열이 있는 경우 ColumnSpan 연결된 속성을 열 수로 설정합니다. 그런 다음 VerticalAlignment를 Center로 설정하고, HorizontalAlignment 속성을 Stretch로 설정하고, GridSplitter가 포함된 행의 Height를 Auto로 설정합니다.

다음 예제는 행을 차지하고 양쪽에서 행의 크기를 조정하는 가로 GridSplitter를 정의하는 방법을 보여 줍니다.

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

참고 항목