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

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

Ejemplo

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

Para especificar un control GridSplitter que cambia el tamaño de las filas adyacentes en un control Grid, establezca la propiedad adjunta Row en una de las filas cuyo tamaño desea cambiar. Si Grid tiene más de una columna, establezca la propiedad adjunta ColumnSpan para especificar el número de columnas. A continuación, establezca VerticalAlignment en Top o Bottom (la alineación que se establezca dependerá de cuáles sean las dos filas cuyo tamaño desea cambiar). Por último, establezca la propiedad HorizontalAlignment en Stretch.

En el ejemplo siguiente se muestra cómo definir un 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 GridSplitter que no ocupe su propia fila podrá quedar oculto por otros controles de la cuadrícula (Grid). Para obtener más información sobre cómo evitar el problema, consulte Cómo: Asegurarse de que un GridSplitter es visible.

Cómo crear un GridSplitter que ocupa una fila

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

En el ejemplo siguiente se muestra cómo definir un GridSplitter horizontal que ocupa una fila y cambia el tamaño de las filas situadas a ambos lados de él.

<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

Referencia

GridSplitter

Otros recursos

Temas "Cómo..." sobre el control GridSplitter