Para ver el artículo en inglés, active la casilla Inglés. También puede ver el texto en inglés en una ventana emergente si pasa el puntero del mouse por el texto.
Traducción
Inglés

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.

Aplicación de tamaño variable
NotaNota

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.

Necesita los componentes siguientes para completar este tutorial:

  • Visual Studio 2010

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.

    NotaNota

    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.

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.

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.

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.

    SugerenciaSugerencia

    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.

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.

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.

NotaNota

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.

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

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>

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.

Adiciones de comunidad

AGREGAR
Mostrar: