Exportar (0) Imprimir
Expandir todo
Este artículo se tradujo de forma manual. Mueva el puntero sobre las frases del artículo para ver el texto original.
Traducción
Original

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:

Nota importanteImportante

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.

Presentación dinámica
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 DynamicLayout. 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 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

    SugerenciaSugerencia

    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.

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.

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.

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.

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="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>

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:

Adiciones de comunidad

AGREGAR
Mostrar:
© 2014 Microsoft