Compartir vía


Diseño dinámico

Con MFC en Visual Studio 2015, puede crear diálogos que el usuario puede cambiar de tamaño, y puede controlar la forma en que el diseño se ajusta al cambio de tamaño. Por ejemplo, puede adjuntar los botones de la parte inferior de un diálogo al borde inferior para que permanezcan siempre en la parte inferior. También puede configurar ciertos controles, como cuadros de lista, cuadros de edición y campos de texto, para que se expandan cuando el usuario expanda el diálogo.

Especificar una configuración de diseño dinámico para un cuadro de diálogo de MFC

Cuando el usuario cambia el tamaño de un diálogo, los controles del diálogo pueden cambiar de tamaño o moverse en las direcciones X e Y. El cambio de tamaño o posición de un control cuando el usuario cambia el tamaño de un diálogo se denomina diseño dinámico. Por ejemplo, el siguiente es un diálogo antes de que se cambie su tamaño:

Dialog before being resized.

Después de que se haya cambiado su tamaño, se incrementa el área del cuadro de lista para que se muestren más elementos y los botones se mueven junto con la esquina inferior derecha:

Dialog after being resized.

Puede controlar la disposición dinámica especificando los detalles de cada control en el editor de recursos del IDE, o puede hacerlo mediante programación accediendo al objeto CMFCDynamicLayout para un control determinado y estableciendo las propiedades.

Configurar las propiedades de diseño dinámico en el editor de recursos

Mediante el editor de recursos puede configurar el comportamiento del diseño dinámico de un cuadro de diálogo sin tener que escribir código alguno.

Para configurar las propiedades del diseño dinámico en el editor de recursos

  1. Con un proyecto de MFC abierto, abra el diálogo sobre el que desee trabajar en el editor de diálogos.

    Open the dialog in the resource editor.

  2. Seleccione un control y, en la ventana de Propiedades (en Vista de clases), establezca sus propiedades de diseño dinámico. La secciónDiseño dinámicode la ventanaPropiedades contiene las propiedades Tipo de movimiento, Tipo de tamañoy, en función de los valores seleccionados para esas propiedades, propiedades específicas que definen la cantidad de controles que se mueven o cambian de tamaño. Tipo móvil determina cómo se mueve el control cuando se cambia el tamaño del diálogo, mientras que Tipo de ajuste de tamaño determina cómo se cambia el tamaño de un control cuando se modifica el tamaño del diálogo. Mover tipo y Tipo de tamaño puede ser Horizontal, Vertical, Amboso Ninguno según las dimensiones que quiera cambiar de forma dinámica. Horizontal es la dimensión X, mientras que Vertical es la dirección del eje Y.

  3. Si desea que un control, como puede ser un botón, tenga un tamaño fijo y permanezca en la parte inferior derecha, como suele ser el caso de los botones Aceptar o Cancelar establezca el valor de Tipo de ajuste de tamaño en Ninguno y el de Tipo móvil en Ambos. Para los valores de X móvil e Y móvil bajo Tipo móvil, establezca el 100% para que el control permanezca a una distancia fija con respecto a la esquina inferior derecha.

    Dynamic Layout.

  4. Supongamos que también tiene un control que quiere que se expanda a medida que se expanda el diálogo. Normalmente los usuarios expanden un diálogo para que se expanda un cuadro de edición de varias líneas y aumentar así el tamaño del área de texto o expanden un control de lista para poder ver más datos. En este caso, establezca el Tipo de ajuste de tamaño en Ambos y el Tipo móvil en Ninguno. A continuación, establezca los valores de X de ajuste de tamaño e Y de ajuste de tamaño en 100.

    Dynamic Layout Settings.

  5. Pruebe otros valores que podrían tener sentido para sus controles. Un diálogo con un cuadro de texto de una línea podría tener la propiedad Tipo de ajuste de tamaño establecida únicamente en Horizontal, por ejemplo.

Configurar las propiedades del diseño dinámico mediante programación

El procedimiento anterior es útil para configurar las propiedades del diseño dinámico de diálogo en tiempo de diseño, pero si desea controlar el diseño dinámico en tiempo de ejecución, puede configurar las propiedades del diseño dinámico mediante programación.

Para configurar las propiedades del diseño dinámico mediante programación

  1. Busque o cree un lugar en el código de implementación de la clase de su diálogo donde desee especificar el diseño dinámico del diálogo. Por ejemplo, puede que quiera agregar un método AdjustLayout en el diálogo y llamarlo desde los lugares donde se deba cambiar el diseño. Podría llamar primero a este método desde el constructor o después de haber realizado cambios en el diálogo.

  2. Para el diálogo, llame aGetDynamicLayout, un método de la claseCWnd. GetDynamicLayout devuelve un puntero a un objeto CMFCDynamicLayout .

    CMFCDynamicLayout* dynamicLayout = pDialog->GetDynamicLayout();
    
  3. Para el primer control al que desee agregar el comportamiento dinámico, utilice los métodos estáticos de la clase de diseño dinámico para crear la estructura MoveSettings, que codifica la forma en que se debe ajustar el control. Para ello, elija primero el método estático adecuado: CMFCDynamicLayout::MoveHorizontal, CMFCDynamicLayout::MoveVertical, CMFCDynamicLayout::MoveNoneo CMFCDynamicLayout::MoveHorizontalAndVertical. Se pasa un porcentaje de los aspectos horizontales o verticales del movimiento. Todos estos métodos estáticos devuelven un objeto MoveSettings recién creado que se puede utilizar para especificar el comportamiento de movimiento de un control.

    Tenga en cuenta que 100 significa que el control se moverá exactamente la misma cantidad que se cambie de tamaño el diálogo, lo que hace que el borde de un control permanezca a una distancia fija del nuevo borde.

    MoveSettings moveSettings = CMFCDynamicLayout::MoveHorizontal(100);
    
  4. Haga lo mismo para el comportamiento de tamaño, que utiliza el tipo SizeSettings. Por ejemplo, para especificar que un control no cambie de tamaño cuando lo haga el diálogo, utilice el siguiente código:

    SizeSettings sizeSettings = CMFCDynamicLayout::SizeNone();
    
  5. Agregue el control al administrador de diseño dinámico mediante el método CMFCDynamicLayout::AddItem. Hay dos sobrecargas para las distintas formas de especificar el control deseado. Una toma el identificador de ventana del control (HWND) y la otra toma el identificador del control.

    dynamicLayout->AddItem(hWndControl,
    moveSettings,
    sizeSettings);
    
  6. Repita este procedimiento para cada control que se deba mover o cambiar de tamaño.

  7. Si fuese necesario, puede usar el método CMFCDynamicLayout::HasItem para determinar si un control ya está incluido en la lista de controles sujetos a cambios de diseño dinámico o el método CMFCDynamicLayout::IsEmpty para determinar si existe algún control sujeto a cambios.

  8. Para habilitar el diseño del diálogo, llame al método CWnd::EnableDynamicLayout.

    pDialog->EnableDynamicLayout(TRUE);
    
  9. La próxima vez que el usuario cambie el tamaño del cuadro de diálogo, se llama al método CMFCDynamicLayout::Adjust, que aplica realmente los valores.

  10. Si desea desactivar el diseño dinámico, llame a CWnd::EnableDynamicLayout con FALSE como parámetro bEnabled.

    pDialog->EnableDynamicLayout(FALSE);
    

Para configurar el diseño dinámico mediante programación desde un archivo de recursos

  1. Use el método CMFCDynamicLayout::MoveHorizontalAndVerticalpara especificar un nombre de recurso en el archivo de script de recursos correspondiente (archivo .rc) que especifica la información de diseño dinámico, como en el siguiente ejemplo:

    dynamicLayout->LoadResource("IDD_DIALOG1");
    

    El recurso con nombre debe hacer referencia a un diálogo que contenga información de diseño en forma de una entrada AFX_DIALOG_LAYOUT en el archivo de recursos, como se muestra en el siguiente ejemplo:

    /////////////////////////////////////////////////////////////////////////////
    //
    // AFX_DIALOG_LAYOUT
    //
    
    IDD_MFCAPPLICATION1_DIALOG AFX_DIALOG_LAYOUT
    BEGIN
    0x0000,
    0x6400,
    0x0028,
    0x643c,
    0x0028
    END
    
    IDD_DIALOG1 AFX_DIALOG_LAYOUT
    BEGIN
    0x0000,
    0x6464,
    0x0000,
    0x6464,
    0x0000,
    0x0000,
    0x6464,
    0x0000,
    0x0000
    
    END
    

Consulte también

CMFCDynamicLayout (clase)
Clases de control
Clases de cuadro de diálogo
Editor de cuadros de diálogo
Diseño de diálogo dinámico para MFC en Visual C++ 2015