Compartir a través de

Guía: Organizar el contenido de WPF en formularios de Windows Forms en tiempo de diseño

En este artículo se muestra cómo usar las características de diseño de Windows Forms, como el delimitador y las líneas de acoplamiento, para organizar controles de Windows Presentation Foundation (WPF).

Prerrequisitos

Necesita Visual Studio para completar este tutorial.

Creación del proyecto

Abra Visual Studio y cree un proyecto de aplicación de Windows Forms en Visual Basic o Visual C# denominado 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 WPF UserControl al proyecto. Use el nombre predeterminado para el tipo de control, UserControl1.xaml. Para obtener más información, vea Guía paso a paso: Crear nuevo contenido de WPF en tiempo de diseño en formularios de Windows Forms.

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

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

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

  5. Compile el proyecto.

Hospedar controles WPF en un panel de diseño

Puedes usar controles WPF en paneles de diseño de la misma manera que usas otros controles de Windows Forms.

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

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

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

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

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

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

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

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

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

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

Usar líneas guías para alinear controles WPF

Las líneas de ajuste permiten una alineación sencilla de los controles de un formulario. También puede utilizar líneas de ajuste para alinear los controles WPF. Para obtener más información, vea Tutorial: Organizar controles en formularios Windows Forms mediante líneas de ajuste.

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

    La instancia de UserControl1 se hospeda en un nuevo ElementHost control denominado elementHost3.

  2. Con las líneas de ajuste, alinee el borde izquierdo de elementHost3 con el borde izquierdo del control TableLayoutPanel.

  3. Ajuste el tamaño de elementHost3 al mismo ancho que el control TableLayoutPanel usando líneas de ajuste.

  4. Desplaza elementHost3 hacia TableLayoutPanel hasta que aparezca una línea guía central entre los controles.

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

  6. Mueve el elementHost3 lejos del control TableLayoutPanel hasta que vuelva a aparecer la línea de acoplamiento central. La línea de ajuste central ahora indica un margen de 20.

  7. Vaya elementHost3 a la derecha hasta que su borde izquierdo se alinee con el borde izquierdo de elementHost1.

  8. Cambie el ancho de elementHost3 hasta que su borde derecho se alinee con el borde derecho de elementHost2.

Anclar y acoplar controles de WPF

Un control WPF hospedado en un formulario tiene el mismo comportamiento de anclaje y acoplamiento que otros controles de Windows Forms.

  1. Seleccione elementHost1.

  2. En la ventana Propiedades , establezca la Anchor propiedad en Top, Bottom, Left, Right.

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

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

  4. Seleccione elementHost2.

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

    El elementHost2 control cambia de tamaño para rellenar la celda.

  6. Seleccione el control TableLayoutPanel.

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

  8. Seleccione elementHost3.

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

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

  10. Cambie el tamaño del formulario.

    Los tres ElementHost controles se redimensionan adecuadamente.

    Para obtener más información, vea Cómo anclar y acoplar controles secundarios en un control TableLayoutPanel.

Consulte también

  • Last updated on