Cómo: Crear aplicaciones cuyo tamaño pueda ser modificado por el usuario con GridSplitter

Puede utilizar el control GridSplitter junto con el control contenedor Grid para crear diseños de ventanas cuyo tamaño pueda ajustar el usuario en tiempo de ejecución. Por ejemplo, en una aplicación que tiene una interfaz dividida en áreas, el usuario puede arrastrar un divisor para agrandar una de ellas, dependiendo de la que desee ver mejor.

Cuando se agrega un control GridSplitter a un control Grid, el primero es un elemento secundario del control de cuadrícula y debe colocarse en una fila y una columna como cualquier otro control secundario. GridSplitter debe tener un ancho o alto distinto de cero, para que el usuario pueda agarrarlo y arrastrarlo en el tiempo de ejecución.

Algunos procedimientos recomendados para GridSplitter incluyen los siguientes:

• Coloque GridSplitter en una fila o columna dedicada que no contenga ningún otro control.

• Establezca el alto de la fila o el ancho de la columna que contiene el GridSplitter en Auto.

• Dedique un control Grid único al control GridSplitter. Agregue paneles contenedores adicionales a Grid para completar el diseño.

Para crear un GridSplitter vertical

1. En la Vista de diseño, seleccione Grid. Para obtener más información, vea Cómo: Seleccionar y mover elementos en la superficie de diseño.

2. Agregue una columna donde desee que GridSplitter aparezca. Para obtener más información, vea Cómo: Agregar filas y columnas a una cuadrícula.

   Nota

   En ocasiones, puede que sea difícil colocar filas y columnas en el diseñador. En ese caso, puede configurar Grid utilizando el editor XAML. Vea un ejemplo de marcado XAML en la sección de ejemplo al final de este tema.

3. En el Cuadro de herramientas, arrastre un control GridSplitter hasta la columna agregada.

4. En la ventana Propiedades, establezca las siguientes propiedades de GridSplitter:

   Propiedad	Valor	Valores posibles
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Columnas	Auto Columna Filas
   Grid.Column	La columna en la que desea colocar GridSplitter. (La numeración de columnas es de base cero.)
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	Número total de filas de Grid.
   Width	Un número distinto de cero. Por ejemplo, 10.
   Height	Auto
   HorizontalAlignment	Stretch	Left Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. En la vista de diseño, seleccione Grid.

6. Establezca la propiedad Width del objeto ColumnDefinition que contiene GridSplitter en Auto.

Para crear un GridSplitter horizontal

1. En la Vista de diseño, seleccione Grid. Para obtener más información, vea Cómo: Seleccionar y mover elementos en la superficie de diseño.

2. Agregue una fila donde desee que aparezca GridSplitter. Para obtener más información, vea Cómo: Agregar filas y columnas a una cuadrícula.

   Nota

   En ocasiones, puede que sea difícil colocar filas y columnas en el diseñador. En ese caso, puede configurar Grid utilizando el editor XAML. Vea un ejemplo de marcado XAML en la sección de ejemplo al final de este tema.

3. En el Cuadro de herramientas, arrastre un control GridSplitter hasta la fila que ha agregado.

4. En la ventana Propiedades, establezca las siguientes propiedades de GridSplitter:

   Propiedad	Valor	Valores posibles
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Filas	Auto Columna Filas
   Grid.Column	0
   Grid.ColumnSpan	Número total de columnas de Grid.
   Grid.Row	Fila donde desea colocar GridSplitter. (La numeración de filas es de base cero.)
   Grid.RowSpan	1
   Width	Auto
   Height	Un número distinto de cero. Por ejemplo, 10.
   HorizontalAlignment	Stretch	Left Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. En la vista de diseño, seleccione Grid.

6. Establezca la propiedad Height del objeto RowDefinition que contiene GridSplitter en Auto.

Ejemplo

El XAML siguiente crea un GridSplitter horizontal:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition MinHeight="70" />
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="LightBlue" Name="DockPanel1">
    </DockPanel>
    <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
    <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="Grid1">
    </Grid>
</Grid>

Vea también

Tareas

Tutorial: Crear una aplicación cuyo tamaño pueda ser modificado mediante WPF Designer

Referencia

GridSplitter

Otros recursos

Diseños en WPF Designer

GridSplitter