Compartir a través de


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

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 define un área donde puede colocar los elementos secundarios en filas y columnas. StackPanel y WrapPanel colocan automáticamente los elementos secundarios en filas o columnas. DockPanel coloca automáticamente los elementos secundarios a lo largo de los bordes. Para obtener información acerca de los distintos tipos de paneles, vea Diseño con posición absoluta y dinámica.

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 Cómo: Crear un diseño basándose en la posición absoluta.

Establecer las propiedades de la ventana para obtener un comportamiento dinámico

Cuando cree una nueva ventana, podrá establecer propiedades para maximizar la flexibilidad de un diseño dinámico.

Para establecer las propiedades de la ventana para obtener un comportamiento dinámico

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

  2. En la ventana Propiedades, defina las propiedades siguientes para Window:

    Propiedad

    Valor

    Efecto

    ResizeMode

    CanResize

    Esto permite al usuario cambiar el tamaño de la ventana para dejar más espacio para los controles.

    SizeToContent

    WidthAndHeight

    Esto permite cambiar automáticamente el tamaño de la ventana cuando su contenido se expande.

Establecer las propiedades del panel para obtener un comportamiento dinámico

Al agregar un nuevo panel (como Grid, DockPanel o StackPanel) a una ventana, o a otro panel, puede establecer propiedades con el fin de maximizar la flexibilidad de un diseño dinámico.

Para establecer las propiedades del panel para obtener un comportamiento dinámico

  1. En la Vista de diseño, seleccione el panel.

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

    Propiedad

    Valor

    Efecto

    Width

    Auto

    El panel se ajusta para rellenar el ancho de la ventana o panel primarios.

    Height

    Automático

    El panel se ajusta para rellenar el alto de la ventana o panel primarios.

Establecer las propiedades de la cuadrícula para obtener un comportamiento dinámico

Puede usar el ajuste del tamaño Automático o mediante asterisco para facilitar la creación de cuadrículas que se dimensionen dinámicamente en función de su contenido. El ajuste del tamaño Automático se usa para que los controles se ajusten a su contenido, incluso si el contenido cambia de tamaño. El ajuste de tamaño mediante asterisco se usa para distribuir el espacio disponible en proporciones ponderadas. Para obtener más información, vea Star.

Si usa la Vista de diseño para crear nuevas filas y columnas, éstas se crearán con el ajuste de tamaño Star de forma predeterminada. Para obtener más información, vea Cómo: Agregar filas y columnas a una cuadrícula.

SugerenciaSugerencia

Es posible que le resulte más fácil agregar filas y columnas en el Editor de colecciones y, a continuación, establecer los altos de fila y los anchos de columna en el editor de XAML.

Para establecer las propiedades de la cuadrícula para obtener un comportamiento dinámico

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

  2. 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.

    1. Seleccione o agregue una nueva definición de columna.

    2. Use el ajuste del tamaño Automático o mediante asterisco para establecer los anchos de columna para obtener una flexibilidad máxima.

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

    Nota

    Las columnas cuya propiedad Width está establecida en Automático se ocultan temporalmente porque no tienen ningún contenido. Para evitar esto, puede usar el ajuste del tamaño mediante asterisco mientras trabaja y cambiar a Automático cuando haya terminado.

  3. 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.

    1. Seleccione o agregue una nueva definición de fila.

    2. Use el ajuste del tamaño Automático o mediante asterisco para establecer los altos de fila para obtener una flexibilidad máxima.

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

    Nota

    Las filas cuya propiedad Height está establecida en Automático se ocultan temporalmente porque no tienen ningún contenido. Para evitar esto, puede usar el ajuste del tamaño mediante asterisco mientras trabaja y cambiar a Automático cuando haya terminado.

Establecer las propiedades del control para obtener un comportamiento dinámico

Al agregar un nuevo control a una ventana o panel, puede establecer propiedades para maximizar la flexibilidad de un diseño dinámico. Debe evitar establecer tamaños concretos para los controles con el fin de asegurarse de que los controles cambiarán de tamaño dinámicamente cuando la ventana o el contenido cambien.

Para establecer las propiedades del control para obtener un comportamiento dinámico

  1. En la Vista de diseño, seleccione un control.

  2. En la ventana Propiedades, defina las siguientes propiedades para el control:

    Propiedad

    Valor

    Efecto

    Width

    Auto

    El control se expande horizontalmente para ajustar su contenido.

    Height

    Auto

    El control se expande verticalmente para ajustar su contenido.

    MinWidth

    0

    El control se puede reducir horizontalmente cuanto sea necesario.

    MinHeight

    0

    El control se puede reducir verticalmente cuanto sea necesario.

    MaxWidth

    Infinity

    El control se puede expandir horizontalmente cuanto sea necesario.

    MaxHeight

    Infinity

    El control se puede expandir verticalmente cuanto sea necesario.

    Nota

    Los valores que se muestran son los valores predeterminados.

Vea también

Tareas

Tutorial: Crear un diseño dinámico

Conceptos

Alineación en WPF Designer

Sistema de diseño

Información general sobre WPF y Silverlight Designer

Otros recursos

Tutoriales sobre diseño