Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Actualización: noviembre 2007
En este tutorial se muestra cómo utilizar las características de diseño de WPF para organizar controles de formularios Windows Forms en una aplicación híbrida.
Entre las tareas ilustradas en este tutorial se incluyen:
Crear el proyecto.
Utilizar la configuración de diseño predeterminada.
Ajustar el tamaño al contenido.
Utilizar posiciones absolutas.
Especificar explícitamente el tamaño.
Establecer las propiedades de diseño.
Entender las limitaciones del orden z.
Acoplamiento.
Establecer la visibilidad.
Hospedar un control que no se expande.
Cambiar la escala.
Girar.
Establecer relleno y márgenes.
Utilizar contenedores de diseño dinámico.
Para ver una lista de código completa de las tareas ilustradas en este tutorial, consulte Ejemplo Arranging Windows Forms Controls in Windows Presentation Foundation.
Cuando termine, comprenderá las características de diseño de formularios Windows Forms en aplicaciones basadas en WPF.
Nota
Los cuadros de diálogo y los 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, vea Valores de configuración de Visual Studio.
Requisitos previos
Necesita los componentes siguientes para completar este tutorial:
- Visual Studio 2008.
Crear el proyecto
Para crear y configurar el proyecto
Cree un proyecto de aplicación de WPF denominado WpfLayoutHostingWf.
En el Explorador de soluciones, agregue una referencia al ensamblado WindowsFormsIntegration, denominado WindowsFormsIntegration.dll.
En el Explorador de soluciones, agregue una referencia al ensamblado System.Windows.Forms, denominado System.Windows.Forms.dll. Además, agregue una referencia al ensamblado System.Drawing, que se denomina System.Drawing.dll.
Haga doble clic en Window1.xaml para abrirlo en la vista XAML.
Al principio del archivo, asigne el espacio de nombres de formularios Windows Forms con el código siguiente.
<Window x:Class="Window1" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" Title="Layout Demo for Interoperability" ><Window x:Class="WpfLayoutHostingWfWithXaml.Window1" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" Title="Layout Demo for Interoperability" >Configure el elemento Grid predeterminado creando cinco filas y tres columnas.
<Grid ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions><Grid ShowGridLines="true"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions>
Utilizar la configuración de diseño predeterminada
De manera predeterminada, el elemento WindowsFormsHost administra el diseño para el control de formularios Windows Forms hospedado.
Para utilizar la configuración de diseño predeterminada
Copie el siguiente código en el elemento Grid.
<!-- Default layout. --> <Canvas Grid.Row="0" Grid.Column="0"> <WindowsFormsHost Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas><!-- Default layout. --> <Canvas Grid.Row="0" Grid.Column="0"> <WindowsFormsHost Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas>Presione F5 para generar y ejecutar la aplicación. Aparecerá el control System.Windows.Forms.Button de formularios Windows Forms en el objeto Canvas. El control hospedado cambiará de tamaño de acuerdo con su contenido; el tamaño del elemento WindowsFormsHost se ajustará para alojar el control hospedado.
Ajustar el tamaño al contenido
El elemento WindowsFormsHost garantiza que el tamaño del control hospedado se ajuste para mostrar correctamente su contenido.
Para ajustar el tamaño al contenido
Copie el código siguiente en el elemento Grid, detrás del ejemplo de código anterior.
<!-- Sizing to content. --> <Canvas Grid.Row="1" Grid.Column="0"> <WindowsFormsHost Background="Orange"> <wf:Button Text="Windows Forms control with more content" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas> <Canvas Grid.Row="2" Grid.Column="0"> <WindowsFormsHost FontSize="24" Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas><!-- Sizing to content. --> <Canvas Grid.Row="1" Grid.Column="0"> <WindowsFormsHost Background="Orange"> <wf:Button Text="Windows Forms control with more content" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas> <Canvas Grid.Row="2" Grid.Column="0"> <WindowsFormsHost FontSize="24" Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas>Presione F5 para generar y ejecutar la aplicación. El tamaño de los dos nuevos controles de botón se ajusta para mostrar correctamente la cadena de texto más larga y el tamaño de fuente mayor, y se cambia el tamaño de los elementos WindowsFormsHost para alojar los controles hospedados.
Utilizar posiciones absolutas
Puede utilizar posiciones absolutas para colocar el elemento WindowsFormsHost en cualquier ubicación de la interfaz de usuario.
Para utilizar posiciones absolutas
Copie el código siguiente en el elemento Grid, detrás del ejemplo de código anterior.
<!-- Absolute positioning. --> <Canvas Grid.Row="3" Grid.Column="0"> <WindowsFormsHost Canvas.Top="20" Canvas.Left="20" Background="Yellow"> <wf:Button Text="Windows Forms control with absolute positioning" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas><!-- Absolute positioning. --> <Canvas Grid.Row="3" Grid.Column="0"> <WindowsFormsHost Canvas.Top="20" Canvas.Left="20" Background="Yellow"> <wf:Button Text="Windows Forms control with absolute positioning" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas>Presione F5 para generar y ejecutar la aplicación. El elemento WindowsFormsHost se coloca a 20 píxeles del lado superior de la celda de la cuadrícula y a 20 píxeles del lado izquierdo.
Especificar explícitamente el tamaño
Puede especificar el tamaño del elemento WindowsFormsHost utilizando las propiedades Width y Height.
Para especificar explícitamente el tamaño
Copie el código siguiente en el elemento Grid, detrás del ejemplo de código anterior.
<!-- Explicit sizing. --> <Canvas Grid.Row="4" Grid.Column="0"> <WindowsFormsHost Width="50" Height="70" Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas><!-- Explicit sizing. --> <Canvas Grid.Row="4" Grid.Column="0"> <WindowsFormsHost Width="50" Height="70" Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas>Presione F5 para generar y ejecutar la aplicación. El elemento WindowsFormsHost se establece en un tamaño de 50 píxeles de ancho por 70 píxeles de alto, menor que los valores de diseño predeterminados. El contenido del control de formularios Windows Forms se reorganiza en consecuencia.
Establecer las propiedades de diseño
Establezca siempre las propiedades del control hospedado relacionadas con el diseño mediante las propiedades del elemento WindowsFormsHost. Si establece directamente las propiedades de diseño del control hospedado, se producirán resultados imprevistos.
Establecer las propiedades relacionadas con el diseño del control hospedado en XAML no tiene ningún efecto.
Para ver los efectos de establecer las propiedades en el control hospedado
Copie el código siguiente en el elemento Grid, detrás del ejemplo de código anterior.
<!-- Setting hosted control properties directly. --> <Canvas Grid.Row="0" Grid.Column="1"> <WindowsFormsHost Width="160" Height="50" Background="Yellow"> <wf:Button Name="button1" Click="button1Click" Text="Click me" FlatStyle="Flat" BackColor="Green"/> </WindowsFormsHost> </Canvas><!-- Setting hosted control properties directly. --> <Canvas Grid.Row="0" Grid.Column="1"> <WindowsFormsHost Width="160" Height="50" Background="Yellow"> <wf:Button Name="button1" Click="button1Click" Text="Click me" FlatStyle="Flat" BackColor="Green"/> </WindowsFormsHost> </Canvas>En el Explorador de soluciones, haga doble clic en el archivo Window1.xaml para abrirlo en el Editor de código.
Copie el código siguiente en la definición de la clase Window1, a continuación del constructor Window1().
Private Sub button1Click(ByVal sender As Object, ByVal e As EventArgs) Dim b As System.Windows.Forms.Button = sender b.Top = 20 b.Left = 20 End Subprivate void button1Click(object sender, EventArgs e ) { System.Windows.Forms.Button b = sender as System.Windows.Forms.Button; b.Top = 20; b.Left = 20; }Presione F5 para generar y ejecutar la aplicación.
Haga clic en el botón Click me. El controlador de eventos button1Click establece las propiedades Top y Left del control hospedado. Esto hace que el control hospedado cambie de posición dentro del elemento WindowsFormsHost. El host mantiene la misma área de pantalla, pero el control hospedado se recorta. En lugar de ello, el control hospedado siempre debe rellenar el elemento WindowsFormsHost.
Entender las limitaciones del orden z
Los elementos WindowsFormsHost visibles siempre se dibujan encima de otros elementos de WPF y no les afecta el orden z.
Para ver las limitaciones del orden z
En el archivo Window1.xaml, copie el código siguiente en el elemento Grid, después del ejemplo de código anterior.
<!-- Z-order demonstration. --> <Canvas Grid.Row="1" Grid.Column="1"> <Label Content="A WPF label" FontSize="24"/> <WindowsFormsHost Canvas.Top="20" Canvas.Left="20" Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas><!-- Z-order demonstration. --> <Canvas Grid.Row="1" Grid.Column="1"> <Label Content="A WPF label" FontSize="24"/> <WindowsFormsHost Canvas.Top="20" Canvas.Left="20" Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas>Presione F5 para generar y ejecutar la aplicación. El elemento WindowsFormsHost se pinta encima del elemento de etiqueta.
Acoplamiento
El elemento WindowsFormsHost admite el acoplamiento de WPF. Establezca la propiedad Dock asociada para acoplar el control hospedado en un elemento DockPanel.
Para acoplar un control hospedado
Copie el código siguiente en el elemento Grid, detrás del ejemplo de código anterior.
<!-- Docking a WindowsFormsHost element. --> <DockPanel LastChildFill="false" Grid.Row="2" Grid.Column="1"> <WindowsFormsHost DockPanel.Dock="Right" Canvas.Top="20" Canvas.Left="20" Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </DockPanel><!-- Docking a WindowsFormsHost element. --> <DockPanel LastChildFill="false" Grid.Row="2" Grid.Column="1"> <WindowsFormsHost DockPanel.Dock="Right" Canvas.Top="20" Canvas.Left="20" Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> </DockPanel>Presione F5 para generar y ejecutar la aplicación. El elemento WindowsFormsHost se acopla en el lado derecho del elemento DockPanel.
Establecer la visibilidad
Puede hacer que el control de formularios Windows Forms sea invisible o contraerlo estableciendo la propiedad Visibility del elemento WindowsFormsHost. Cuando un control no está visible, no se muestra, pero ocupa espacio en el diseño. Cuando se contrae un control, no se muestra, ni ocupa el espacio en el diseño.
Para establecer la visibilidad de un control hospedado
Copie el código siguiente en el elemento Grid, detrás del ejemplo de código anterior.
<!-- Setting Visibility to hidden and collapsed. --> <StackPanel Grid.Row="3" Grid.Column="1"> <Button Name="button2" Click="button2Click" Content="Click to make invisible" Background="OrangeRed"/> <WindowsFormsHost Name="host1" Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> <Button Name="button3" Click="button3Click" Content="Click to collapse" Background="OrangeRed"/> </StackPanel><!-- Setting Visibility to hidden and collapsed. --> <StackPanel Grid.Row="3" Grid.Column="1"> <Button Name="button2" Click="button2Click" Content="Click to make invisible" Background="OrangeRed"/> <WindowsFormsHost Name="host1" Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> <Button Name="button3" Click="button3Click" Content="Click to collapse" Background="OrangeRed"/> </StackPanel>En el Explorador de soluciones, haga doble clic en el archivo Window1.xaml para abrirlo en el Editor de código.
Copie el código siguiente en la definición de la clase Window1.
Private Sub button2Click(ByVal sender As Object, ByVal e As RoutedEventArgs) Me.host1.Visibility = Windows.Visibility.Hidden End Sub Private Sub button3Click(ByVal sender As Object, ByVal e As RoutedEventArgs) Me.host1.Visibility = Windows.Visibility.Collapsed End Subprivate void button2Click(object sender, EventArgs e) { this.host1.Visibility = Visibility.Hidden; } private void button3Click(object sender, EventArgs e) { this.host1.Visibility = Visibility.Collapsed; }Presione F5 para generar y ejecutar la aplicación.
Haga clic en el botón Click to make invisible para hacer invisible el elemento WindowsFormsHost.
Haga clic en el botón Click to collapse para ocultar completamente el elemento WindowsFormsHost del diseño. Cuando se contrae el control de formularios Windows Forms, los elementos circundantes se reorganizan para ocupar su espacio.
Hospedar un control que no se expande
Algunos controles de formularios Windows Forms tienen un tamaño fijo y no se expanden para rellenar el espacio disponible en el diseño. Por ejemplo, el control MonthCalendar muestra un mes en un espacio fijo.
Para hospedar un control que no se expande
Copie el código siguiente en el elemento Grid, detrás del ejemplo de código anterior.
<!-- Hosting a control that does not stretch. --> <!-- The MonthCalendar has a discrete size. --> <StackPanel Grid.Row="4" Grid.Column="1"> <Label Content="A WPF element" Background="OrangeRed"/> <WindowsFormsHost Background="Yellow"> <wf:MonthCalendar/> </WindowsFormsHost> <Label Content="Another WPF element" Background="OrangeRed"/> </StackPanel><!-- Hosting a control that does not stretch. --> <!-- The MonthCalendar has a discrete size. --> <StackPanel Grid.Row="4" Grid.Column="1"> <Label Content="A WPF element" Background="OrangeRed"/> <WindowsFormsHost Background="Yellow"> <wf:MonthCalendar/> </WindowsFormsHost> <Label Content="Another WPF element" Background="OrangeRed"/> </StackPanel>Presione F5 para generar y ejecutar la aplicación. El elemento WindowsFormsHost se centra en la fila de la cuadrícula, pero no se expande para rellenar el espacio disponible. Si la ventana es lo bastante grande, puede que vea dos o más meses mostrados por el control MonthCalendar hospedado, pero éstos están centrados en la fila. El motor de diseño de WPF centra los elementos cuyo tamaño no se puede ajustar para rellenar el espacio disponible.
Cambiar la escala
A diferencia de los elementos de WPF, la escala de la mayoría de los controles de formularios Windows Forms no se puede cambiar continuamente. El elemento WindowsFormsHost ajusta la escala de su control hospedado cuando es posible.
Para ajustar la escala de un control hospedado
Copie el código siguiente en el elemento Grid, detrás del ejemplo de código anterior.
<!-- Scaling transformation. --> <StackPanel Grid.Row="0" Grid.Column="2"> <StackPanel.RenderTransform> <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5" ScaleY="0.5" /> </StackPanel.RenderTransform> <Label Content="A WPF UIElement" Background="OrangeRed"/> <WindowsFormsHost Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> <Label Content="Another WPF UIElement" Background="OrangeRed"/> </StackPanel><!-- Scaling transformation. --> <StackPanel Grid.Row="0" Grid.Column="2"> <StackPanel.RenderTransform> <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5" ScaleY="0.5" /> </StackPanel.RenderTransform> <Label Content="A WPF UIElement" Background="OrangeRed"/> <WindowsFormsHost Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> <Label Content="Another WPF UIElement" Background="OrangeRed"/> </StackPanel>Presione F5 para generar y ejecutar la aplicación. La escala del control hospedado y de los elementos que lo rodean se ajusta mediante un factor de 0,5. Sin embargo, no se ajusta el tamaño de la fuente del control hospedado.
Girar
A diferencia de los elementos de WPF, los controles de formularios Windows Forms no admiten el giro. El elemento WindowsFormsHost no gira con los demás elementos de WPF cuando se aplica una transformación de giro. Cualquier valor de giro distinto de 180 grados provoca el evento LayoutError.
Para ver el efecto del giro en una aplicación híbrida
Copie el código siguiente en el elemento Grid, detrás del ejemplo de código anterior.
<!-- Rotation transformation. --> <StackPanel Grid.Row="1" Grid.Column="2"> <StackPanel.RenderTransform> <RotateTransform CenterX="200" CenterY="50" Angle="180" /> </StackPanel.RenderTransform> <Label Content="A WPF element" Background="OrangeRed"/> <WindowsFormsHost Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> <Label Content="Another WPF element" Background="OrangeRed"/> </StackPanel><!-- Rotation transformation. --> <StackPanel Grid.Row="1" Grid.Column="2"> <StackPanel.RenderTransform> <RotateTransform CenterX="200" CenterY="50" Angle="180" /> </StackPanel.RenderTransform> <Label Content="A WPF element" Background="OrangeRed"/> <WindowsFormsHost Background="Yellow"> <wf:Button Text="Windows Forms control" FlatStyle="Flat"/> </WindowsFormsHost> <Label Content="Another WPF element" Background="OrangeRed"/> </StackPanel>Presione F5 para generar y ejecutar la aplicación. No se gira el control hospedado, pero los elementos que lo rodean se giran en un ángulo de 180 grados.
Establecer relleno y márgenes
El relleno y los márgenes en el diseño de WPF son similares a los de formularios Windows Forms. Basta con establecer las propiedades Padding y Margin del elemento WindowsFormsHost.
Para establecer el relleno y los márgenes para un control hospedado
Copie el código siguiente en el elemento Grid, detrás del ejemplo de código anterior.
<!-- Padding. --> <!--<Canvas Grid.Row="2" Grid.Column="2"> <WindowsFormsHost Padding="0, 20, 0, 0" Background="Yellow"> <wf:Button Text="Windows Forms control with padding" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas>--> ... <!-- Margin. --> <Canvas Grid.Row="3" Grid.Column="2"> <WindowsFormsHost Margin="20, 20, 0, 0" Background="Yellow"> <wf:Button Text="Windows Forms control with margin" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas><!-- Padding. --> <Canvas Grid.Row="2" Grid.Column="2"> <WindowsFormsHost Padding="0, 20, 0, 0" Background="Yellow"> <wf:Button Text="Windows Forms control with padding" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas> ... <!-- Margin. --> <Canvas Grid.Row="3" Grid.Column="2"> <WindowsFormsHost Margin="20, 20, 0, 0" Background="Yellow"> <wf:Button Text="Windows Forms control with margin" FlatStyle="Flat"/> </WindowsFormsHost> </Canvas>Presione F5 para generar y ejecutar la aplicación. La configuración de los márgenes y del relleno se aplica a los controles de formularios Windows Forms hospedados de la misma manera que se aplicarían en formularios Windows Forms.
Utilizar contenedores de diseño dinámico
formularios Windows Forms proporciona dos contenedores de diseño dinámico, FlowLayoutPanel y TableLayoutPanel. También puede utilizar estos contenedores en diseños de WPF.
Para utilizar un contenedor de diseño dinámico
Copie el código siguiente en el elemento Grid, detrás del ejemplo de código anterior.
<!-- Flow layout. --> <DockPanel Grid.Row="4" Grid.Column="2"> <WindowsFormsHost Name="flowLayoutHost" Background="Yellow"> <wf:FlowLayoutPanel/> </WindowsFormsHost> </DockPanel><!-- Flow layout. --> <DockPanel Grid.Row="4" Grid.Column="2"> <WindowsFormsHost Name="flowLayoutHost" Background="Yellow"> <wf:FlowLayoutPanel/> </WindowsFormsHost> </DockPanel>En el Explorador de soluciones, haga doble clic en el archivo Window1.xaml para abrirlo en el Editor de código.
Copie el código siguiente en la definición de la clase Window1.
Private Sub InitializeFlowLayoutPanel() Dim flp As System.Windows.Forms.FlowLayoutPanel = Me.flowLayoutHost.Child flp.WrapContents = True Const numButtons As Integer = 6 Dim i As Integer For i = 0 To numButtons Dim b As New System.Windows.Forms.Button() b.Text = "Button" b.BackColor = System.Drawing.Color.AliceBlue b.FlatStyle = System.Windows.Forms.FlatStyle.Flat flp.Controls.Add(b) Next i End Subprivate void InitializeFlowLayoutPanel() { System.Windows.Forms.FlowLayoutPanel flp = this.flowLayoutHost.Child as System.Windows.Forms.FlowLayoutPanel; flp.WrapContents = true; const int numButtons = 6; for (int i = 0; i < numButtons; i++) { System.Windows.Forms.Button b = new System.Windows.Forms.Button(); b.Text = "Button"; b.BackColor = System.Drawing.Color.AliceBlue; b.FlatStyle = System.Windows.Forms.FlatStyle.Flat; flp.Controls.Add(b); } }Agregue una llamada al método InitializeFlowLayoutPanel en el constructor.
Public Sub New() InitializeComponent() Me.InitializeFlowLayoutPanel() End Subpublic Window1() { InitializeComponent(); this.InitializeFlowLayoutPanel(); }Presione F5 para generar y ejecutar la aplicación. El elemento WindowsFormsHost rellena DockPanel, y FlowLayoutPanel organiza sus controles secundarios de acuerdo con la propiedad FlowDirection predeterminada.
Vea también
Tareas
Ejemplo Arranging Windows Forms Controls in Windows Presentation Foundation
Conceptos
Consideraciones sobre el diseño del elemento WindowsFormsHost
Tutorial: Hospedar un control de Windows Presentation Foundation en formularios Windows Forms