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

Actualización: noviembre 2007

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 asociadaRow en una de las filas cuyo tamaño desea cambiar. Si Grid tiene más de una columna, establezca la propiedad asociada 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. Para obtener el ejemplo completo, vea Ejemplo GridSplitters That Resize Rows and Columns.

<GridSplitter Grid.Row="1" 
              Grid.ColumnSpan="3" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Top"
              Background="Black" 
              ShowsPreview="true"
              ResizeDirection="Columns"
              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 asociadaRow en una de las filas cuyo tamaño desea cambiar. Si Grid tiene más de una columna, establezca la propiedad asociada 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. Para obtener el ejemplo completo, vea Ejemplo GridSplitters That Resize Rows and Columns.

<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

Ejemplos de GridSplitter

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