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

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 el área que desee ver mejor. En este tutorial se crea el diseño para una aplicación como las de mensajería.

En este tutorial realizará las siguientes tareas:

• Crear una aplicación de WPF.

• Configurar el panel de cuadrícula predeterminado.

• Agregar un GridSplitter horizontal.

• Agregar un panel de acoplamiento y controles.

• Agregar un panel de cuadrícula y controles.

• Probar la aplicación.

En la ilustración siguiente se muestra la apariencia que tendrá la aplicación.

Nota

Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, en función de los valores de configuración o de edición activos. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas. Para obtener más información, vea Trabajar con valores de configuración.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

• Visual Studio 2010

Crear el proyecto

El primer procedimiento es crear el proyecto para la aplicación.

Para crear el proyecto

1. Cree un nuevo proyecto de aplicación de WPF en Visual Basic o en Visual C# denominado ResizableApplication. Para obtener más información, vea Cómo: Crear un nuevo proyecto de aplicación de WPF.

   Nota

   En este tutorial, no escribirá ningún código. El lenguaje que elija para el proyecto será el lenguaje que se utilice para las páginas de código subyacente de la aplicación.

   MainWindow.xaml se abrirá en WPF Designer.

2. En el menú Archivo, haga clic en Guardar todo.

Configurar el control de panel de cuadrícula predeterminado

De forma predeterminada, la nueva aplicación de WPF contiene un Window con un panel Grid. Para seguir los procedimientos recomendados, este control Grid se dedica al objeto GridSplitter. El plano de la cuadrícula es el siguiente:

Fila 1: un panel Dock para la primera parte del diseño.

Fila 2: un GridSplitter.

Fila 3: un panel Grid para el resto del diseño.

Para configurar el control de panel de cuadrícula predeterminado

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. En la ventana Propiedades, busque la propiedad RowDefinitions y haga clic en el botón de puntos suspensivos en la columna de valores de propiedad.

   Aparecerá el Editor de colecciones.

3. Haga clic en Agregar tres veces para agregar tres filas.

4. Establezca la propiedad Height de la segunda fila en Auto.

5. Establezca la propiedad MinHeight de la tercera fila en 70.

6. Haga clic en Aceptar para cerrar el Editor de colecciones y volver a WPF Designer.

   Ahora hay tres filas en la cuadrícula, pero sólo aparecen dos. La fila cuya propiedad Height está establecida en Auto se oculta temporalmente porque no tiene contenido. Para el propósito de este tutorial, esto está bien. Pero para evitarlo en el futuro, puede utilizar el ajuste del tamaño mediante asterisco mientras trabaja, y cambiar a Auto cuando haya terminado.

7. En el menú Archivo, haga clic en Guardar todo.

Agregar un objeto GridSplitter horizontal

A continuación, se agrega el objeto GridSplitter.

Para agregar un objeto GridSplitter horizontal

1. En la Vista de diseño, seleccione Grid.

2. Desde el Cuadro de herramientas, arrastre un control GridSplitter hasta Grid.

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

   Propiedad	Valor
   ResizeDirection	Filas
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	1
   Grid.RowSpan	1
   Width	Auto
   Height	10
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	0

4. En el menú Archivo, haga clic en Guardar todo.

Agregar un panel de acoplamiento y controles

A continuación, se agrega un panel DockPanel y se configura el diseño de la mitad superior de la aplicación. DockPanel contiene un control Label y un control RichTextBox. Establezca el color de Label y de RichTextBox para resaltar el tamaño de la mitad superior de la aplicación cuando mueva el objeto GridSplitter.

Para agregar un panel de acoplamiento y controles

1. En la Vista de diseño, seleccione Grid.

2. Desde el Cuadro de herramientas, arrastre un control DockPanel hasta Grid.

3. En la ventana Propiedades, establezca las siguientes propiedades de DockPanel:

   Propiedad	Valor
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	1
   LastChildFill	True (activada)
   Width	Auto
   Height	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	0

4. En el Cuadro de herramientas, arrastre un control Label hasta DockPanel.

5. En la ventana Propiedades, establezca las siguientes propiedades de Label:

   Propiedad	Valor
   Información básica	Blue (#FF0000FF)
   Foreground	White (#FFFFFFFF)
   Content	Display
   DockPanel.Dock	Top
   Width	Auto
   Height	23
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	0

6. En la Vista de diseño, seleccione DockPanel.

   Sugerencia
   Dado que hay varios controles que cubren la cuadrícula, puede utilizar la tecla TAB, la ventana Esquema del documento o la vista XAML para seleccionar más fácilmente el DockPanel. Para obtener más información, vea Cómo: Seleccionar y mover elementos en la superficie de diseño.

7. Desde el Cuadro de herramientas, arrastre un control RichTextBox hasta DockPanel.

8. En la ventana Propiedades, establezca las siguientes propiedades de RichTextBox:

   Propiedad	Valor
   Información básica	LightBlue (#FFADD8E6)
   DockPanel.Dock	Bottom
   Width	Auto
   Height	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	0
   IsReadOnly	True (activada)

9. En el menú Archivo, haga clic en Guardar todo.

Agregar un panel de cuadrícula y controles

A continuación, se agrega una Grid y se configura el diseño de la mitad inferior de la aplicación. Grid contiene un control Button y un control RichTextBox. Establezca el color de RichTextBox para resaltar el tamaño de la mitad inferior de la aplicación cuando mueva el objeto GridSplitter.

Para agregar un panel de cuadrícula y controles

1. En la Vista de diseño, seleccione Grid.

2. Desde el Cuadro de herramientas, arrastre un control Grid hasta Grid.

3. En la ventana Propiedades, establezca las propiedades siguientes para la nueva Grid:

   Propiedad	Valor
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	2
   Grid.RowSpan	1
   Width	Auto
   Height	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	0

4. En la ventana Propiedades, busque la propiedad ColumnDefinitions y haga clic en el botón de puntos suspensivos en la columna de valores de propiedad.

   Aparecerá el Editor de colecciones.

5. Haga clic en Agregar dos veces para agregar dos columnas.

6. Establezca la propiedad Width de la segunda columna en Auto.

7. Haga clic en Aceptar para cerrar el Editor de colecciones y volver a WPF Designer.

8. Desde el Cuadro de herramientas, arrastre un control Button hasta Grid.

9. En la ventana Propiedades, establezca las siguientes propiedades de Button:

   Propiedad	Valor
   Content	OK
   Grid.Column	1
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	1
   Width	60
   Height	60
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	5

10. En el Cuadro de herramientas, arrastre un control RichTextBox hasta Grid.

11. En la ventana Propiedades, establezca las siguientes propiedades de RichTextBox:

    Propiedad	Valor
    Información básica	PaleGoldenrod (#FFEEE8AA)
    Grid.Column	0
    Grid.ColumnSpan	1
    Grid.Row	0
    Grid.RowSpan	1
    Width	Auto
    Height	Auto
    HorizontalAlignment	Stretch
    VerticalAlignment	Stretch
    Margin	0
    IsReadOnly	False (desactivada)

12. En el menú Archivo, haga clic en Guardar todo.

Probar la aplicación

El último procedimiento consiste en probar la aplicación.

Para probar la aplicación

1. En el menú Depurar, haga clic en Iniciar depuración.

   La aplicación se iniciará y aparecerá MainWindow.

2. Cambie el tamaño de la ventana tanto vertical como horizontalmente.

   Las mitades superior e inferior de la aplicación se expanden y contraen para utilizar el espacio disponible.

3. Arrastre el divisor para cambiar el tamaño de las partes de la aplicación. Reduzca mucho una parte de la aplicación.

4. Cambie de nuevo el tamaño de la ventana.

   Las mitades superior e inferior de la aplicación se expanden y contraen proporcionalmente de acuerdo con la ubicación del divisor.

5. Arrastre el divisor tanto como pueda hacia la parte superior de la aplicación.

   La mitad superior de la aplicación desaparece y se muestra la mitad inferior.

6. Arrastre el divisor tanto como pueda hacia la parte inferior de la aplicación.

   La mitad inferior de la aplicación se sigue mostrando. Esto se debe a que estableció la propiedad MinHeight de la tercera fila en 70.

Nota

70 = 60 (el alto del botón) + 5 (el margen superior del botón) + 5 (el margen inferior del botón)

1. Cierre la ventana.

Resultado final

A continuación se muestra el archivo MainWindow.xaml completo:

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition MinHeight="70" />
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Name="DockPanel1">
            <Label DockPanel.Dock="Top" Height="23" Width="Auto" Background="Blue" Foreground="White" Name="Label1">Display</Label>
            <RichTextBox DockPanel.Dock="Bottom" Height="Auto" Width="Auto" Background="LightBlue" IsReadOnly="True" Name="RichTextBox1" />
        </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" Name="Grid1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="1" HorizontalAlignment="Stretch" Margin="5" Width="60" Height="60" Name="Button1">OK</Button>
            <RichTextBox Grid.Column="0" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="RichTextBox2" />
        </Grid>
    </Grid>
</Window>

Pasos siguientes

La aplicación que creó en este tutorial contenía un divisor horizontal. Puede experimentar creando la misma aplicación pero con un divisor vertical.

La aplicación creada muestra únicamente técnicas de diseño. Puede experimentar agregando código que haga que la aplicación sea funcional. Por ejemplo, puede agregar código al evento clic de botón para que se copie el texto del cuadro de texto inferior en el cuadro de texto superior.

Vea también

Tareas

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

Conceptos

Diseño con posición absoluta y dinámica

Otros recursos

Tutoriales sobre diseño