Compartir a través de

Tutorial: Organización de contenido de WPF en Windows Forms en tiempo de diseño

  • Artículo

En este artículo se muestra cómo usar las características de diseño de Windows Forms, como la delimitación y las guías de alineación, para organizar controles de Windows Presentation Foundation (WPF).

Prerrequisitos

Necesita Visual Studio para completar este tutorial.

Crear el proyecto

Abra Visual Studio y cree un proyecto de aplicación de Windows Forms en Visual Basic o Visual C# llamado ArrangeElementHost.

Nota

Al hospedar contenido de WPF, solo se admiten proyectos de C# y Visual Basic.

Creación del control WPF

Después de agregar un control WPF al proyecto, puede organizarlo en el formulario.

  1. Agregue un nuevo UserControl WPF al proyecto. Use el nombre predeterminado del tipo de control, UserControl1.xaml. Para obtener más información, consulte Tutorial: Creación de contenido de WPF en Windows Forms en tiempo de diseño.

  2. En la vista Diseño, asegúrese de que UserControl1 está seleccionado.

  3. En la ventana Propiedades, establezca el valor de las propiedades Width y Height en 200.

  4. Establezca el valor de la propiedad Background en Azul.

  5. Compile el proyecto.

Hospedaje de controles WPF en un panel de diseño

Puede usar controles WPF en paneles de diseño de la misma forma que usa otros controles de Windows Forms.

  1. Abra Form1 en el Diseñador de Windows Forms.

  2. En el Cuadro de herramientas, arrastre un control TableLayoutPanel al formulario.

  3. En el panel de etiquetas inteligentes del control TableLayoutPanel, seleccione Quitar la última fila.

  4. Cambie el tamaño del control TableLayoutPanel a un ancho y alto mayor.

  5. En el Cuadro de herramientas, haga doble clic en UserControl1 para crear una instancia de UserControl1 en la primera celda del control TableLayoutPanel.

    La instancia de UserControl1 se hospeda en un nuevo control ElementHost llamado elementHost1.

  6. En el Cuadro de herramientas, haga doble clic en UserControl1 para crear otra instancia de la segunda celda del control TableLayoutPanel.

  7. En la ventana Esquema del documento, seleccione tableLayoutPanel1.

  8. En la ventana Propiedades, establezca el valor de la propiedad Padding en 10, 10, 10, 10.

    Ambos controles ElementHost cambian de tamaño para ajustarse al nuevo diseño.

Uso de guías de alineación para alinear controles WPF

Las líneas de ajuste permiten alinear fácilmente los controles en un formulario. Puede usar líneas de ajuste para alinear también controles WPF. Para obtener más información, consulte Tutorial: Organización de controles en Windows Forms mediante guías de alineación.

  1. En el Cuadro de herramientas, arrastre una instancia de UserControl1 al formulario y colóquela en el espacio debajo del control TableLayoutPanel.

    La instancia de UserControl1 se hospeda en un nuevo control ElementHost llamado elementHost1.

  2. Use las líneas de ajuste para alinear el borde izquierdo de elementHost3 con el borde izquierdo del control TableLayoutPanel.

  3. Use las líneas de ajuste para ajustar el tamaño de elementHost3 al mismo ancho que el control TableLayoutPanel.

  4. Mueva elementHost3 hacia el control TableLayoutPanel hasta que aparezca una línea de ajuste central entre los controles.

  5. En la ventana Propiedades, establezca el valor de la propiedad Margin en 20, 20, 20, 20.

  6. Aleje elementHost3 del control TableLayoutPanel hasta que la línea de ajuste central aparezca de nuevo. Ahora, la línea de ajuste central indica un margen de 20.

  7. Mueva elementHost3 hacia la derecha, hasta que su borde izquierdo quede alineado con el borde izquierdo de elementHost1.

  8. Cambie el ancho de elementHost3 hasta que su borde derecho quede alineado con el borde derecho de elementHost2.

Delimitación y acoplamiento de controles WPF

La delimitación y el acoplamiento de un control WPF hospedado en un formulario se comportan igual que los de otros controles de Windows Forms.

  1. Seleccione elementHost1.

  2. En la ventana Propiedades, establezca la propiedad Anchor en Top, Bottom, Left, Right (Superior, inferior, izquierda, derecha).

  3. Cambie el tamaño del control TableLayoutPanel a un tamaño mayor.

    El control elementHost1 cambia de tamaño para llenar la celda.

  4. Seleccione elementHost1.

  5. En la ventana Propiedades, establezca el valor de la propiedad Dock en Fill.

    El control elementHost1 cambia de tamaño para llenar la celda.

  6. Seleccione el control TableLayoutPanel.

  7. Establezca el valor de su propiedad Dock en Top.

  8. Seleccione elementHost1.

  9. Establezca el valor de su propiedad Dock en Top.

    El control elementHost3 cambia de tamaño para llenar el espacio restante en el formulario.

  10. Cambie de tamaño el formulario.

    Los tres controles ElementHost ajustan su tamaño correctamente.

    Para obtener más información, consulte Procedimiento para delimitar y acoplar controles secundarios en un control TableLayoutPanel.

Consulte también