Tutorial: Organizar el contenido de Windows Presentation Foundation en formularios Windows Forms en tiempo de diseño

Actualización: noviembre 2007

En este tutorial se explica cómo utilizar las características de diseño de formularios Windows Forms, como delimitaciones y líneas de ajuste, para organizar los controles de Windows Presentation Foundation (WPF).

Realizará las tareas siguientes:

• Crear el proyecto.

• Crear el control de WPF.

• Hospedar controles de WPF en un panel de diseño.

• Usar líneas de ajuste para alinear los controles de WPF.

• Delimitar y acoplar controles de WPF.

Nota:
Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, dependiendo de los valores de configuración o de edición activos. Para cambiar la configuración, elija Importar y exportar configuraciones en el menú Herramientas. Para obtener más información, consulte Valores de configuración de Visual Studio.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

• Visual Studio 2008.

Creación del proyecto

El primer paso es crear el proyecto de formularios Windows Forms.

Nota:
Cuando se hospeda contenido WPF, sólo se admiten proyectos de C# y Visual Basic.

Para crear el proyecto

• Cree un nuevo proyecto de aplicación de formularios Windows Forms en Visual Basic o Visual C# denominado ArrangeElementHost. Para obtener más información, consulte Cómo: Crear un proyecto de aplicación para Windows.

Crear el control de WPF

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

Para crear controles de WPF

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

2. En la vista Diseño, asegúrese de que UserControl1 está seleccionado. Para obtener más información, consulte Cómo: Seleccionar y mover elementos en la superficie de diseño.

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. Genere el proyecto.

Hospedar controles de WPF en un panel de diseño

Puede utilizar los controles de WPF en paneles de diseño del mismo modo que utiliza otros controles de formularios Windows Forms.

Para hospedar controles de WPF en un panel de diseño

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. Aumente el ancho y el alto del control TableLayoutPanel.

5. En el Cuadro de herramientas, haga doble clic 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 denominado elementHost1.

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

7. En la ventana Esquema del documento, seleccione tableLayoutPanel1. Para obtener más información, consulte Esquema del documento (Ventana).

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

   Se cambia el tamaño de ambos controles ElementHost para ajustarlos al nuevo diseño.

Usar líneas de ajuste para alinear controles de WPF

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

Para usar líneas de ajuste para alinear controles de WPF

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

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

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

3. Con las líneas de ajuste, cambie el tamaño de elementHost3 para que tenga el 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. Mueva elementHost3 lejos del control TableLayoutPanel hasta que vuelva a aparecer la línea de ajuste central. La línea de ajuste central indica ahora un margen de 20.

7. Mueva elementHost3 a 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.

Delimitar y acoplar controles de WPF

Un control de WPF hospedado en un formulario se comporta del mismo modo en cuanto a las características de delimitación y acoplamiento que otros controles de formularios Windows Forms.

Para delimitar y acoplar controles de WPF

1. Seleccione elementHost1.

2. En la ventana Propiedades, establezca la propiedad Anchor en Superior, Inferior, Izquierda, Derecha.

3. Aumente el tamaño del control TableLayoutPanel.

   El control elementHost1 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 control elementHost2 cambia de tamaño para rellenar la celda.

6. Seleccione el control TableLayoutPanel.

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

8. Seleccione elementHost3.

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

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

10. Cambie el tamaño del formulario.

    Los tres controles ElementHost adoptan el tamaño correcto.

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

Vea también

Tareas

Cómo: Delimitar y acoplar controles secundarios en un control TableLayoutPanel

Cómo: Alinear un control con los bordes de los formularios en tiempo de diseño

Tutorial: Organizar controles en formularios Windows Forms mediante líneas de ajuste

Referencia

ElementHost

WindowsFormsHost

Otros recursos

Migración e interoperabilidad

Usar controles de Windows Presentation Foundation

WPF Designer