Compartir a través de

Cómo: Cambiar el tamaño de las filas con un GridSplitter

En este ejemplo se muestra cómo usar un horizontal GridSplitter para redistribuir el espacio entre dos filas de un Grid sin cambiar las dimensiones de Grid.

Ejemplo

Cómo crear un gridSplitter que superponga el borde de una fila

Para especificar un GridSplitter que redimensione las filas adyacentes en un Grid, establezca la propiedad Row en una de las filas que desea redimensionar. Si su Grid tiene más de una columna, establezca la propiedad asociada ColumnSpan para especificar el número de columnas. A continuación, establezca el VerticalAlignment en Top o Bottom (la alineación que elija dependerá de las dos filas que desee cambiar de tamaño). Por último, establezca la propiedad HorizontalAlignment en Stretch.

En el ejemplo siguiente se muestra cómo definir un horizontal GridSplitter que cambia el tamaño de las filas adyacentes.

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

Un GridSplitter que no ocupa su propia fila puede ser ocultado por otros controles en el Grid. Para obtener más información sobre cómo evitar este problema, vea Asegurarse de que un gridSplitter es visible.

Cómo crear un gridSplitter que ocupa una fila

Para especificar un GridSplitter que ocupa una fila en un Grid, establezca la propiedad adjunta Row en una de las filas que desea cambiar de tamaño. Si su Grid tiene más de una columna, establezca la propiedad acoplada ColumnSpan en el número de columnas. A continuación, establezca el VerticalAlignment en Center, establezca la propiedad HorizontalAlignment en Stretch, y establezca el Height de la fila que contiene el GridSplitter en Auto.

En el ejemplo siguiente se muestra cómo definir un horizontal GridSplitter que ocupa una fila y cambia el tamaño de las filas en cualquiera de sus lados.

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

Consulte también