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

  • Artículo

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

Ejemplo

Cómo crear un control GridSplitter que se superponga al borde de una fila

Para especificar un control GridSplitter que cambie el tamaño de las filas adyacentes en un control Grid, establezca la propiedad adjunta Row en una de las filas a las que quiera cambiar el tamaño. Si su control Grid tiene más de una columna, establezca la propiedad adjunta ColumnSpan para especificar el número de columnas. A continuación, establezca la propiedad VerticalAlignment en Top o Bottom (cuya alineación establecida depende de las dos filas a las que quiera cambiar el tamaño). Finalmente, establezca la propiedad HorizontalAlignment en Stretch.

En el ejemplo siguiente se muestra cómo definir un control GridSplitter horizontal 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 control GridSplitter que no ocupe su propia fila puede estar ocultado por otros controles en el control Grid. Para más información sobre cómo evitar este problema, vea Asegurarse de que un GridSplitter es visible.

Cómo crear un control GridSplitter que ocupa una fila

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

En el ejemplo siguiente se muestra cómo definir un control GridSplitter horizontal que ocupa una fila y cambia el tamaño de las filas en cada lado del mismo.

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

Vea también