Tutorial: Crear un diseño dinámico

En posición dinámica, los elementos secundarios se organizan especificando cómo deberían estar organizados y cómo deberían ajustarse en relación con sus elementos primarios. También puede establecer ventanas y controles para que se expandan automáticamente cuando su contenido se expanda. Para obtener más información, vea Diseño con posición absoluta y dinámica.

WPF Designer for Visual Studio proporciona muchos controles Panel que admiten la posición dinámica. Los controles de panel se pueden combinar agregando un control de panel como elemento secundario de otro control. Puede usar los siguientes controles de panel para colocar los elementos en sus aplicaciones dinámicamente:

• Grid

• DockPanel

• WrapPanel

• StackPanel

• UniformGrid

Importante
Siempre que sea posible, es preferible usar un diseño dinámico. Los diseños dinámicos son los más flexibles, se adaptan a los cambios realizados en el contenido, por ejemplo, cuando se localizan y permiten que el usuario final pueda controlar al máximo el entorno. Para ver un ejemplo de un diseño absoluto, vea Tutorial: Crear un diseño basándose en la posición absoluta.

En este tutorial realizará las siguientes tareas:

• Crear una aplicación de WPF.

• Configurar el control de panel Grid predeterminado.

• Agregar controles al panel.

• Probar el diseño.

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 DynamicLayout. 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 abre en WPF Designer.

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

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

   Propiedad	Valor
   Width	400
   Height	200
   SizeToContent	WidthAndHeight

   Sugerencia
   También puede utilizar el asa de ajuste de tamaño para cambiar el tamaño de la ventana en la Vista de diseño.

4. 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. En este procedimiento se agregan cuatro filas y cuatro columnas a la cuadrícula. El ancho de cada columna se establece en *, para que el ancho disponible esté dividido uniformemente entre las cuatro columnas. El alto de tres de las filas se establece en Auto, para que se dimensionen para ajustar el contenido. El alto de una de las filas se establece en *, para que use el alto disponible restante.

Para agregar un control de panel

1. En la Vista de diseño, seleccione la cuadrícula.

2. (Opcional) En la ventana Propiedades, busque la propiedad ShowGridLines y active la casilla.

   Cuando la aplicación se ejecute, las líneas de la cuadrícula aparecerán en la ventana. Esto resulta útil para depurar, pero debe desactivar la casilla de la propiedad ShowGridLines para el código de producción.

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

   Aparecerá el cuadro de diálogo Editor de colecciones.

   1. Haga clic en Agregar cuatro veces para agregar cuatro columnas.

   2. Establezca la propiedad Width de la primera fila en Auto.

   3. Establezca la propiedad Width de la segunda fila en *.

   4. Establezca la propiedad Width de la tercera fila en Auto.

   5. Establezca la propiedad Width de la cuarta fila en Auto.

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

      Ahora hay cuatro columnas en la cuadrícula, pero sólo aparece una columna. Las columnas cuya propiedad Width está establecida en Auto se ocultan temporalmente porque no tienen ningún 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.

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

   Aparecerá el cuadro de diálogo Editor de colecciones.

   1. Haga clic en Agregar cuatro veces para agregar cuatro filas.

   2. Establezca la propiedad Height de la primera fila en Auto.

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

   4. Establezca la propiedad Height de la tercera fila en *.

   5. Establezca la propiedad Height de la cuarta fila en Auto.

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

      Ahora hay cuatro filas en la cuadrícula, pero sólo aparece una fila. Las filas cuya propiedad Height está establecida en Auto se ocultan temporalmente porque no tienen ningún 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.

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

Agregar controles al panel

A continuación va a agregar controles al panel y a usar las propiedades adjuntas Column y Row de Grid para colocarlos dinámicamente.

Para agregar controles al panel

1. En el Cuadro de herramientas, en el grupo Común, arrastre un control Label hasta Grid.

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

   Propiedad	Valor
   Content	Name:
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	1
   Width	Auto
   Height	23
   HorizontalAlignment	Stretch
   VerticalAlignment	Top
   Margin	20,20,10,10

3. En el Cuadro de herramientas, en el grupo Común, arrastre un control Label hasta Grid.

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

   Propiedad	Valor
   Content	Password:
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	1
   Grid.RowSpan	1
   Width	Auto
   Height	23
   HorizontalAlignment	Stretch
   VerticalAlignment	Top
   Margin	20,10,10,10

5. En el Cuadro de herramientas, en el grupo Común, arrastre un control TextBox hasta Grid.

6. En la ventana Propiedades, establezca las siguientes propiedades de TextBox:

   Propiedad	Valor
   Grid.Column	1
   Grid.ColumnSpan	3
   Grid.Row	0
   Grid.RowSpan	1
   Width	Auto
   Height	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	10,20,20,10

7. En el Cuadro de herramientas, en el grupo Común, arrastre un control TextBox hasta Grid.

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

   Propiedad	Valor
   Grid.Column	1
   Grid.ColumnSpan	3
   Grid.Row	1
   Grid.RowSpan	1
   Width	Auto
   Height	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	10,10,20,10

9. En el Cuadro de herramientas, en el grupo Común, arrastre un control Button hasta Grid.

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

    Propiedad	Valor
    Content	OK
    Grid.Column	2
    Grid.ColumnSpan	1
    Grid.Row	3
    Grid.RowSpan	1
    Width	75
    Height	23
    HorizontalAlignment	Stretch
    VerticalAlignment	Stretch
    Margin	10,10,6,20

11. En el Cuadro de herramientas, en el grupo Común, arrastre un control Button hasta Grid.

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

    Propiedad	Valor
    Content	Cancel
    Grid.Column	3
    Grid.ColumnSpan	1
    Grid.Row	3
    Grid.RowSpan	1
    Width	75
    Height	23
    HorizontalAlignment	Stretch
    VerticalAlignment	Stretch
    Margin	6,10,20,20

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

Probar el diseño

Finalmente se ejecuta la aplicación y se comprueba que el diseño cambia dinámicamente a medida que el usuario cambia el tamaño de la ventana y a medida que el contenido de los controles se expande más allá del tamaño de los controles.

Para probar el diseño

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

   La aplicación se inicia y aparece la ventana.

2. En el cuadro de texto Nombre, escriba de forma aleatoria para rellenar el cuadro de texto. Al llegar al fin del cuadro de texto, el cuadro de texto y la ventana se expandirán para ajustar el texto que está escribiendo.

3. Cierre la ventana.

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

   La aplicación se inicia y aparece la ventana.

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

   Las columnas se expandirán uniformemente para usar el espacio disponible. Los cuadros de texto se ajustan para rellenar las columnas expandidas. Tres filas mantienen su alto y la cuarta fila se expandirá para usar el espacio disponible.

6. Cierre la ventana.

7. En la Vista de diseño, seleccione la etiqueta Nombre.

8. En la ventana Propiedades, cambie la propiedad Content a Please enter your full name here:.

   En la Vista de diseño, la etiqueta se expande para ajustar el texto.

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

   La aplicación se inicia y aparece la ventana. El control de etiqueta muestra el texto más largo.

10. 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="200" Width="400" SizeToContent="WidthAndHeight">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
        <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
        <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
        <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
    </Grid>
</Window>

Pasos siguientes

Puede realizar pruebas para aprender a lograr diferentes efectos con diseños dinámicos reemplazando el panel Grid de este tutorial por los paneles siguientes:

• DockPanel

• WrapPanel

• StackPanel

• UniformGrid

Vea también

Tareas

Cómo: Crear un diseño dinámico

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

Conceptos

Alineación en WPF Designer

Sistema de diseño

Información general sobre WPF y Silverlight Designer

Otros recursos

Tutoriales sobre diseño