Compartir a través de


Cómo: Controles de diseño (C++)

El Editor de cuadros de diálogo proporciona herramientas de diseño que alinean y ajustan los controles de tamaño automáticamente. Para la mayoría de las tareas, puede usar la barra de herramientas del Editor de cuadros de diálogo. Todos los comandos de la barra de herramientas del Editor de cuadros de diálogo también están disponibles en el menú Formato y la mayoría tienen teclas de método abreviado.

Muchos comandos de diseño para cuadros de diálogo solo están disponibles cuando se selecciona más de un control. Puede seleccionar un único control o varios controles y, cuando se selecciona más de un control, el primero que seleccione es de forma predeterminada el control dominante.

La ubicación, el alto y el ancho del control actual se muestran en la esquina inferior derecha de la barra de estado. Cuando se selecciona todo el cuadro de diálogo, la barra de estado muestra la posición del cuadro de diálogo en su conjunto y su alto y ancho.

Organizar controles

Puede organizar controles en cuadros de diálogo con el Editor de diálogos en uno de los tres estados diferentes:

  • Con guías y márgenes activados, establezca como valor predeterminado.

  • Con la cuadrícula de diseño activada.

  • Sin ninguna característica de ajuste o alineación.

La barra de herramientas del Editor de cuadros de diálogo contiene botones que controlan el estado.

  • Para cambiar el estado, seleccione el icono adecuado o vaya al menú >Configuración de la guía de formato.

El cuadro de diálogo Configuración de la guía tiene las siguientes propiedades:

Propiedad Descripción
Guías de diseño Muestra la configuración de las guías de diseño.
Ninguna Oculta las herramientas de diseño.
Reglas y guías Cuando se habilita, agrega reglas a las herramientas de diseño y permite colocar guías en las reglas. Las guías predeterminadas son los márgenes.
cuadrícula Crea una cuadrícula de diseño. Los nuevos controles se alinearán automáticamente con la cuadrícula.
Espaciado de cuadrícula Muestra la configuración del espaciado de cuadrícula en unidades de cuadro de diálogo (DLUs).
Ancho: DLUs Establece el ancho de la cuadrícula de diseño en DLUs. Una DLU horizontal es el ancho medio de la fuente del cuadro de diálogo dividido por 4.
Alto: DLUs Establece el alto de la cuadrícula de diseño en DLUs. Una DLU vertical es el alto medio de la fuente del cuadro de diálogo dividida por 8.

Guías y márgenes

Tanto si va a mover controles, agregar controles o reorganizar un diseño actual, guías y márgenes puede ayudarle a alinear los controles con precisión dentro de un cuadro de diálogo.

Al crear un cuadro de diálogo, se proporcionan cuatro guías modificadas denominadas márgenes y aparecen como líneas de puntos azules.

  • Para mover los márgenes, arrastre el margen a la nueva posición.

  • Para que desaparezca un margen, mueva el margen a una posición cero.

  • Para devolver el margen, coloque el puntero sobre la posición cero del margen y mueva el margen a la posición.

Las guías aparecen como líneas de puntos azules en el cuadro de diálogo que se muestran en el editor y las flechas correspondientes de las reglas de la parte superior y a lo largo del lado izquierdo del Editor de diálogos. Los identificadores de ajuste de tamaño de los controles se ajustan a guías cuando se mueven los controles y las guías se ajustan a los controles si no hay controles previamente acoplados a la guía. Cuando se mueve una guía, también se mueven los controles que se ajustan a él. Los controles acoplados a más de una guía se cambian de tamaño cuando se mueve una de las guías.

  • Para crear una guía dentro de la regla, seleccione una vez para crear una guía o haga doble clic para iniciar el cuadro de diálogo Configuración de la guía, donde puede especificar la configuración de la guía.

  • Para establecer una guía en el cuadro de diálogo, seleccione la guía y arrástrela a una nueva posición o seleccione la flecha de la regla para arrastrar la guía asociada.

    Las coordenadas de la guía se muestran en la barra de estado de la parte inferior de la ventana y en la regla o mueven el puntero sobre la flecha de la regla para mostrar la posición exacta de la guía.

  • Para eliminar una guía, arrastre la guía fuera del cuadro de diálogo o arrastre la flecha correspondiente de la regla.

Las marcas de graduación de las reglas que determinan el espaciado de guías y controles se definen mediante unidades de diálogo (DLUs). Una DLU se basa en el tamaño de la fuente del cuadro de diálogo, normalmente 8 puntos MS Shell Dlg. Una DLU horizontal es el ancho medio de la fuente del cuadro de diálogo dividido por cuatro. Una DLU vertical es el alto medio de la fuente dividida por 8.

  • Para cambiar los intervalos de las marcas de graduación, vaya al menú Configuración dela>guía de formato y, a continuación, en el campo Espaciado de cuadrícula, especifique un nuevo ancho y alto en archivos DLUS.

Cuadrícula de diseño

Al colocar o organizar controles en un cuadro de diálogo, use la cuadrícula de diseño para un posicionamiento más preciso. Cuando la cuadrícula está activada, los controles se ajustarán a las líneas de puntos de la cuadrícula como si se imagnizara.

  • Para activar o desactivar la cuadrícula de diseño, vaya al menú Configuración de la>guía de formato y seleccione o desactive el botón Cuadrícula.

    Todavía puede controlar la cuadrícula en ventanas individuales del Editor de cuadros de diálogo mediante el botón Alternar cuadrícula de la barra de herramientas del Editor de cuadros de diálogo.

  • Para cambiar el tamaño de la cuadrícula de diseño, vaya al menú Configuración de la>guía de formato y escriba el alto y el ancho de las DLL para las celdas de la cuadrícula. El alto o ancho mínimo es 4.

Deshabilitar guías

Puede usar teclas especiales junto con el mouse para deshabilitar el efecto de ajuste de las guías. El uso de la tecla Alt deshabilita los efectos de ajuste de la guía seleccionada. Mover una guía con la tecla Mayús impide que los controles acoplados se muevan con la guía.

  • Para deshabilitar el efecto de ajuste de las guías, arrastre el control mientras mantiene presionada la tecla Alt.

  • Para mover guías sin mover los controles acoplados, arrastre la guía mientras mantiene presionada la tecla Shift.

  • Para desactivar las guías, vaya al menú Configuración> de la guía de formato. A continuación, en Guías de diseño, seleccione Ninguno.

    Sugerencia

    También puede usar el acceso directo en el menú Formato>de guías de alternancia.

Seleccionar controles

Seleccione controles para ajustar, alinear, mover, copiar o eliminarlos y, a continuación, completar la operación que desee. En la mayoría de los casos, debe seleccionar más de un control para usar las herramientas de ajuste de tamaño y alineación en la barra de herramientas del Editor de cuadros de diálogo.

Cuando se selecciona un control, tiene un borde sombreado alrededor de él con controladores de tamaño sólidos (activos) o huecos (inactivos), pequeños cuadrados que aparecen en el borde de selección. Cuando se seleccionan varios controles, el control dominante tiene controladores de tamaño sólidos y todos los demás controles seleccionados tienen controladores de ajuste de tamaño huecos.

  • Para seleccionar controles, en la ventana cuadro de herramientas, seleccione la herramienta Puntero y use uno de los pasos siguientes para realizar la selección:

    • Arrastre el puntero para dibujar un cuadro de selección alrededor de los controles que desea seleccionar en el cuadro de diálogo. Al liberar el botón del mouse, se seleccionan todos los controles dentro y intersección del cuadro de selección.

    • Mantenga presionada la tecla Shift y seleccione los controles que desea incluir en la selección.

    • Mantenga presionada la tecla Ctrl y seleccione los controles que desea incluir en la selección.

  • Para agregar o quitar un control del grupo de controles seleccionados, mantenga presionada la tecla Shift y seleccione el control que desea agregar o quitar.

Controles dominantes

Al ajustar o ajustar el tamaño de varios controles, el Editor de cuadros de diálogo usa el control dominante para determinar cómo se ajusta o ajusta el tamaño de los demás controles. De forma predeterminada, el control dominante es el primer control seleccionado.

  • Para especificar el control dominante, mantenga presionada la tecla Ctrl y seleccione el control que desea usar para influir primero en el tamaño o la ubicación de otros controles. Mantener presionada la tecla Ctrl y seleccionar un control dentro de una selección también hará que controle el control dominante en esa selección.

  • Para cambiar el control dominante, desactive la selección actual seleccionando fuera de todos los controles seleccionados actualmente y repita el procedimiento anterior, seleccionando primero otro control.

Nota:

Los controladores de tamaño del control dominante son sólidos mientras que los controladores de los controles subordinados son huecos. Todo cambio de tamaño o alineación se basa en el control dominante.

Controles de tamaño

Use los identificadores de ajuste de tamaño para cambiar el tamaño de un control. Cuando el puntero se coloca en un controlador de ajuste de tamaño, cambia la forma para indicar las direcciones en las que se puede cambiar el tamaño del control. Los controladores de ajuste de tamaño activos son sólidos y, si un controlador de ajuste de tamaño es hueco, el control no se puede cambiar de tamaño a lo largo de ese eje.

  • Para ajustar el tamaño de un control, seleccione el control y arrastre los controladores de ajuste de tamaño para cambiar el tamaño.

    • Los controladores de tamaño en la parte superior y los lados cambian el tamaño horizontal o vertical.

    • Los identificadores de tamaño en las esquinas cambian tanto de tamaño horizontal como vertical.

    Sugerencia

    Puede cambiar el tamaño del control una unidad de diálogo (DLU) a la vez manteniendo presionada la tecla Shift y usando las teclas de flecha Derecha y Abajo.

  • Para ajustar automáticamente el tamaño de un control para ajustar el texto dentro de él, vaya al menú Formato o haga clic con el botón derecho en el control y elija Tamaño en Contenido.

  • Para que los controles sean del mismo tamaño, seleccione los controles que desea cambiar de tamaño y vaya al menú Formato>Hacer mismo tamaño y, a continuación, elija Ambos, Alto o Ancho.

    Cambia el tamaño de un grupo de controles en función del tamaño del control dominante, que es el control seleccionado primero en la serie. El tamaño final de los controles del grupo depende del tamaño del control dominante.

  • Para ajustar el tamaño de un grupo de controles con guías, ajuste un lado del control (o controles) a una guía y, a continuación, arrastre una guía al otro lado del control (o controles). Ahora puede mover una guía para ajustar el tamaño del control (o controles).

    Si es necesario con varios controles, ajuste el tamaño de cada uno a la segunda guía.

Otros controles

Puede ajustar el tamaño de un cuadro combinado al agregarlo al cuadro de diálogo. También puede especificar el tamaño del cuadro de lista desplegable. Para obtener más información, vea Agregar valores a un control de cuadro combinado.

  1. Seleccione el botón de flecha desplegable situado a la derecha del cuadro combinado.

    Arrow on a combo box in an MFC project.

    El esquema del control cambia para mostrar el tamaño del cuadro combinado con el área de lista desplegable extendida.

  2. Use el identificador de ajuste de tamaño inferior para cambiar el tamaño inicial del área de lista desplegable.

    Combo box sizing in an MFC project.

  3. Vuelva a seleccionar la flecha desplegable para cerrar la parte de lista desplegable del cuadro combinado.

Nota:

Al agregar un cuadro de lista con una barra de desplazamiento horizontal a un cuadro de diálogo mediante MFC, la barra de desplazamiento no aparecerá automáticamente en la aplicación.

Establezca un ancho máximo para el elemento más ancho llamando a CListBox::SetHorizontalExtent en el código. Sin este conjunto de valores, la barra de desplazamiento no aparecerá, incluso cuando los elementos del cuadro de lista sean más anchos que el cuadro.

Alinear controles

  • Para alinear los controles, seleccione los controles que desea alinear. Vaya al menú Format>Alinear y elija una de las siguientes alineaciones:

    Alignment Descripción
    Izquierdas Alinea los controles seleccionados a lo largo de sus lados izquierdos.
    Centros Alinea los controles seleccionados horizontalmente a lo largo de sus puntos centrales.
    Derechos Alinea los controles seleccionados a lo largo de sus lados derecho.
    Tops Alinea los controles seleccionados a lo largo de sus bordes superiores.
    Middles Alinea los controles seleccionados verticalmente a lo largo de sus puntos centrales.
    Bottoms Alinea los controles seleccionados a lo largo de sus bordes inferiores.

    Asegúrese de seleccionar el control que desea que sea dominante en primer lugar o establecerlo como el control dominante antes de ejecutar el comando de alineación o ajuste de tamaño como la posición final del grupo de controles depende de la posición del control dominante.

  • Para los controles de espacio uniforme, seleccione los controles que desea reorganizar. Vaya al menú Format> Space Evenly y elija una de las siguientes alineaciones de espaciado:

    Espaciado Descripción
    A través de El espacio controla uniformemente entre el extremo izquierdo y el control situado más a la derecha seleccionado.
    Bajar El espacio controla uniformemente entre el extremo superior y el control más bajo seleccionado.
  • Para centrar los controles, seleccione el control o los controles que desea reorganizar. Vaya al menú Centro de formato>en el cuadro de diálogo y elija uno de los siguientes arreglos:

    Organización Descripción
    Vertical Central controla verticalmente en el cuadro de diálogo.
    Horizontal Central controla horizontalmente en el cuadro de diálogo.
  • Para alinear los botones de inserción, seleccione uno o varios botones de inserción. Vaya al menú Formato>Organizar botones y, a continuación, elija uno de los siguientes arreglos:

    Organización Descripción
    Right Alinea los botones de inserción a lo largo del borde derecho del cuadro de diálogo.
    Bottom Alinea los botones de inserción a lo largo del borde inferior del cuadro de diálogo.

    Si selecciona un control distinto de un botón de inserción, su posición no se verá afectada.

Requisitos

Win32

Consulte también

Administrar controles de cuadro de diálogo
Procedimiento Agregar, editar o eliminar controles
Cómo definir el control de acceso y los valores