Exportar (0) Imprimir
Expandir todo
Este artículo se tradujo de forma manual. Mueva el puntero sobre las frases del artículo para ver el texto original.
Traducción
Original

Tutorial: Organizar controles de formularios Windows Forms en WPF

En este tutorial se muestra cómo utilizar las características de diseño de WPF para organizar controles de Windows Forms en una aplicación híbrida.

Las tareas ilustradas en este tutorial 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 ajusta.

  • 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 mostradas en este tutorial, vea Arranging Windows Forms Controls in WPF Sample.

Cuando termine, comprenderá las características de diseño de Windows Forms en aplicaciones basadas en WPF.

Necesita los componentes siguientes para completar este tutorial:

  • Visual Studio 2010.

Para crear y configurar el proyecto

  1. Cree un proyecto de aplicación de WPF denominado WpfLayoutHostingWf.

  2. En el Explorador de soluciones, agregue referencias a los ensamblados siguientes.

    • WindowsFormsIntegration

    • System.Windows.Forms

    • System.Drawing

  3. Haga doble clic en MainWindow.xaml para abrirlo en la vista XAML.

  4. En el elemento Window, agregue la siguiente asignación de espacio de nombres Windows Forms.

    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
    
  5. En el elemento Grid, establezca la propiedad ShowGridLines en true y defina cinco filas y tres columnas.

    
    <Grid ShowGridLines="true">
      <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
      </Grid.RowDefinitions>
    
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
    
    
    

De manera predeterminada, el elemento WindowsFormsHost administra el diseño para el control de Windows Forms hospedado.

Para utilizar la configuración de diseño predeterminada

  1. Copie el XAML siguiente 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>
    
    
    
  2. Presione F5 para compilar y ejecutar la aplicación. Aparecerá el control System.Windows.Forms.Button de 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.

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

  1. Copie el XAML siguiente en el elemento Grid.

    
    <!-- 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>
    
    
    
  2. Presione F5 para compilar 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.

Puede utilizar posiciones absolutas para colocar el elemento WindowsFormsHost en cualquier ubicación de la interfaz de usuario.

Para utilizar posiciones absolutas

  1. Copie el XAML siguiente en el elemento Grid.

    
    <!-- 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>
    
    
    
  2. Presione F5 para compilar 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.

Puede especificar el tamaño del elemento WindowsFormsHost utilizando las propiedades Width y Height.

Para especificar explícitamente el tamaño

  1. Copie el XAML siguiente en el elemento Grid.

    
    <!-- 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>
    
    
    
  2. Presione F5 para compilar 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 Windows Forms se reorganiza en consecuencia.

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

  1. Copie el XAML siguiente en el elemento Grid.

    
    <!-- Setting hosted control properties directly. -->
    <Canvas Grid.Row="0" Grid.Column="1">
      <WindowsFormsHost Width="160" Height="50" Background="Yellow">
        <wf:Button Name="button1" Click="button1_Click" Text="Click me" FlatStyle="Flat" BackColor="Green"/>
      </WindowsFormsHost>
    </Canvas>
    
    
    
  2. En el Explorador de soluciones haga doble clic en MainWindow.xaml. vb o MainWindow.xaml.cs para abrirlo en el Editor de código.

  3. Copie el código siguiente en la definición de la clase MainWindow.

    
    private void button1_Click(object sender, EventArgs e )
    {
        System.Windows.Forms.Button b = sender as System.Windows.Forms.Button;
    
        b.Top = 20;
        b.Left = 20;
    }
    
    
    
  4. Presione F5 para compilar y ejecutar la aplicación.

  5. Haga clic en el botón Click me. El controlador de eventos button1_Click 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.

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

  1. Copie el XAML siguiente en el elemento Grid.

    
    <!-- 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>
    
    
    
  2. Presione F5 para compilar y ejecutar la aplicación. El elemento WindowsFormsHost se pinta encima del elemento de etiqueta.

El elemento WindowsFormsHost admite el acoplamiento de WPF. Establezca la propiedad Dock adjunta para acoplar el control hospedado en un elemento DockPanel.

Para acoplar un control hospedado

  1. Copie el XAML siguiente en el elemento Grid.

    
    <!-- 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>
    
    
    
  2. Presione F5 para compilar y ejecutar la aplicación. El elemento WindowsFormsHost se acopla en el lado derecho del elemento DockPanel.

Puede hacer que el control de 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

  1. Copie el XAML siguiente en el elemento Grid.

    
    <!-- Setting Visibility to hidden and collapsed. -->
    <StackPanel Grid.Row="3" Grid.Column="1">
      <Button Name="button2" Click="button2_Click" 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="button3_Click" Content="Click to collapse" Background="OrangeRed"/>
    </StackPanel>
    
    
    
  2. En MainWindow.xaml.vb o MainWindow.xaml.cs, copie el código siguiente en la definición de clase.

    
    private void button2_Click(object sender, EventArgs e)
    {
        this.host1.Visibility = Visibility.Hidden;
    }
    
    private void button3_Click(object sender, EventArgs e)
    {
        this.host1.Visibility = Visibility.Collapsed;
    }
    
    
    
  3. Presione F5 para compilar y ejecutar la aplicación.

  4. Haga clic en el botón Click to make invisible para hacer invisible el elemento WindowsFormsHost.

  5. Haga clic en el botón Click to collapse para ocultar completamente el elemento WindowsFormsHost del diseño. Cuando se contrae el control de Windows Forms, los elementos circundantes se reorganizan para ocupar su espacio.

Algunos controles de Windows Forms tienen un tamaño fijo y no se ajustan 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 ajusta

  1. Copie el XAML siguiente en el elemento Grid.

    
    <!-- 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>
    
    
    
  2. Presione F5 para compilar y ejecutar la aplicación. El elemento WindowsFormsHost se centra en la fila de la cuadrícula, pero no se ajusta 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.

A diferencia de los elementos de WPF, la escala de la mayoría de los controles de 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

  1. Copie el XAML siguiente en el elemento Grid.

    
    <!-- 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>
    
    
    
  2. Presione F5 para compilar 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.

A diferencia de los elementos de WPF, los controles de 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

  1. Copie el XAML siguiente en el elemento Grid.

    
    <!-- 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>
    
    
    
  2. Presione F5 para compilar 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. Es posible que deba cambiar de tamaño la ventana para ver los elementos.

El relleno y los márgenes en el diseño de WPF son similares a los de 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

  1. Copie el XAML siguiente en el elemento Grid.

    
    <!-- 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>
    
    
    
  2. Presione F5 para compilar y ejecutar la aplicación. La configuración de los márgenes y del relleno se aplica a los controles de Windows Forms hospedados de la misma manera que se aplicarían en Windows Forms.

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

  1. Copie el XAML siguiente en el elemento Grid.

    
    <!-- Flow layout. -->
    <DockPanel Grid.Row="4" Grid.Column="2">
      <WindowsFormsHost Name="flowLayoutHost" Background="Yellow">
        <wf:FlowLayoutPanel/>
      </WindowsFormsHost>
    </DockPanel>
    
    
    
  2. En MainWindow.xaml.vb o MainWindow.xaml.cs, copie el código siguiente en la definición de clase.

    
    private 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);
        }
    }
    
    
    
  3. Agregue una llamada al método InitializeFlowLayoutPanel en el constructor.

    
    public MainWindow()
    {
        InitializeComponent();
    
        this.InitializeFlowLayoutPanel();
    }
    
    
    
  4. Presione F5 para compilar y ejecutar la aplicación. El elemento WindowsFormsHost rellena DockPanel, y FlowLayoutPanel organiza sus controles secundarios de acuerdo con la propiedad FlowDirection predeterminada.

date

Historial

Motivo

Agosto de 2010

Se ha actualizado para Visual Studio 2010.

Comentarios de los clientes.

Adiciones de comunidad

AGREGAR
Mostrar:
© 2014 Microsoft