Share via

Procedura dettagliata: disposizione di controlli Windows Form in WPF

  • Articolo

In questa procedura dettagliata viene illustrato come utilizzare le funzionalità di layout di WPF per disporre controlli Windows Forms in un'applicazione ibrida.

Di seguito vengono elencate le attività illustrate nella procedura dettagliata:

  • Creazione del progetto.

  • Utilizzo delle impostazioni di layout predefinite.

  • Ridimensionamento in base al contenuto.

  • Utilizzo delle posizioni assolute.

  • Specifica esplicita delle dimensioni.

  • Impostazione delle proprietà di layout.

  • Informazioni sulle limitazioni dell'ordine Z.

  • Ancoraggio.

  • Impostazione della visibilità.

  • Hosting di un controllo che non si adatta.

  • Ridimensionamento.

  • Rotazione.

  • Impostazione della spaziatura interna e dei margini.

  • Utilizzo di contenitori di layout dinamici.

Per un elenco di codice completo delle attività illustrate in questa procedura dettagliata, vedere Esempio di disposizione di controlli Windows Form in WPF (la pagina potrebbe essere in inglese).

Questa procedura consente di approfondire le funzionalità di layout di Windows Forms nelle applicazioni basate su WPF.

Prerequisiti

Per completare la procedura dettagliata, è necessario disporre dei componenti seguenti:

  • Visual Studio 2010.

Creazione del progetto

Per creare e configurare il progetto

  1. Creare un progetto di applicazione WPF denominato WpfLayoutHostingWf.

  2. In Esplora soluzioni aggiungere riferimenti agli assembly indicati di seguito.

    • WindowsFormsIntegration

    • System.Windows.Forms

    • System.Drawing

  3. Fare doppio clic su MainWindow.xaml per aprirlo in visualizzazione XAML.

  4. Nell'elemento Window aggiungere il mapping dello spazio dei nomi Windows Forms seguente.

    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"

  5. Nell'elemento Grid impostare la proprietà ShowGridLines su true e definire cinque righe e tre colonne.

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

  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>

Utilizzo delle impostazioni di layout predefinite

Per impostazione predefinita, l'elemento WindowsFormsHost gestisce il layout del controllo Windows Forms ospitato.

Per utilizzare le impostazioni di layout predefinite

  1. Copiare il codice XAML riportato di seguito nell'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. Premere F5 per compilare ed eseguire l'applicazione. Il controllo System.Windows.Forms.Button Windows Forms verrà visualizzato in Canvas. Il controllo ospitato viene ridimensionato in base al contenuto e l'elemento WindowsFormsHost viene ridimensionato in base al controllo ospitato.

Ridimensionamento in base al contenuto

L'elemento WindowsFormsHost garantisce che il controllo ospitato venga ridimensionato per visualizzare correttamente il contenuto.

Per ridimensionare in base al contenuto

  1. Copiare il codice XAML riportato di seguito nell'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. Premere F5 per compilare ed eseguire l'applicazione. I due nuovi controlli pulsante vengono ridimensionati per visualizzare correttamente la stringa di testo più lunga e la dimensione del carattere più grande e gli elementi WindowsFormsHost vengono ridimensionati in base ai controlli ospitati.

Utilizzo delle posizioni assolute

È possibile utilizzare le posizioni assolute per posizionare l'elemento WindowsFormsHost in qualsiasi punto dell'interfaccia utente.

Per utilizzare le posizioni assolute

  1. Copiare il codice XAML riportato di seguito nell'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. Premere F5 per compilare ed eseguire l'applicazione. L'elemento WindowsFormsHost viene posizionato a 20 pixel dal lato superiore della cella della griglia e a 20 pixel da sinistra.

Specifica esplicita delle dimensioni

È possibile specificare la dimensione dell'elemento WindowsFormsHost mediante le proprietà Width e Height.

Per specificare in modo esplicito le dimensioni

  1. Copiare il codice XAML riportato di seguito nell'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. Premere F5 per compilare ed eseguire l'applicazione. L'elemento WindowsFormsHost viene impostato a una dimensione di 50 pixel di larghezza per 70 pixel di altezza, impostazioni più ridotte rispetto a quelle del layout predefinito. Il contenuto del controllo Windows Forms viene ridisposto di conseguenza.

Impostazione delle proprietà di layout

Impostare sempre le proprietà correlate al layout del controllo ospitato utilizzando le proprietà dell'elemento WindowsFormsHost. L'impostazione diretta delle proprietà di layout nel controllo ospitato darà risultati imprevisti.

L'impostazione delle proprietà correlate al layout nel controllo ospitato in XAML non ha alcun effetto.

Per visualizzare gli effetti dell'impostazione delle proprietà nel controllo

  1. Copiare il codice XAML riportato di seguito nell'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. In Esplora soluzioni fare doppio clic su MainWindow.xaml. vb o MainWindow.xaml.cs per aprirlo nell'editor del codice.

  3. Copiare il codice riportato di seguito nella definizione della classe MainWindow.

    Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim b As System.Windows.Forms.Button = sender

    b.Top = 20
    b.Left = 20

End Sub

    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. Premere F5 per compilare ed eseguire l'applicazione.

  5. Scegliere il pulsante Fare clic qui. Il gestore eventi button1_Click imposta le proprietà Top e Left nel controllo ospitato. Ciò fa sì che il controllo ospitato venga riposizionato all'interno dell'elemento WindowsFormsHost. L'host mantiene la stessa area dello schermo, ma il controllo ospitato viene ritagliato. Al contrario, il controllo ospitato dovrebbe sempre occupare l'elemento WindowsFormsHost.

Informazioni sulle limitazioni dell'ordine Z

Gli elementi WindowsFormsHost visibili vengono sempre tracciati sopra altri elementi WPF e non vengono influenzati dall'ordine Z.

Per comprendere le limitazioni dell'ordine Z

  1. Copiare il codice XAML riportato di seguito nell'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. Premere F5 per compilare ed eseguire l'applicazione. L'elemento WindowsFormsHost viene disegnato sopra l'elemento etichetta.

Ancoraggio

L'elemento WindowsFormsHost supporta l'ancoraggio WPF. Impostare la proprietà associata Dock per ancorare il controllo ospitato in un elemento DockPanel.

Per ancorare un controllo ospitato

  1. Copiare il codice XAML riportato di seguito nell'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. Premere F5 per compilare ed eseguire l'applicazione. L'elemento WindowsFormsHost viene ancorato al lato destro dell'elemento DockPanel.

Impostazione della visibilità

È possibile rendere il controllo Windows Forms invisibile o comprimerlo impostando la proprietà Visibility dell'elemento WindowsFormsHost. Quando un controllo non è visibile, non viene visualizzato ma occupa spazio del layout. Quando un controllo è compresso, non viene visualizzato né occupa spazio del layout.

Per impostare la visibilità di un controllo ospitato

  1. Copiare il codice XAML riportato di seguito nell'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. In MainWindow.xaml.vb o MainWindow.xaml.cs copiare il codice seguente nella definizione della classe.

    Private Sub button2_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Me.host1.Visibility = Windows.Visibility.Hidden
End Sub


Private Sub button3_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Me.host1.Visibility = Windows.Visibility.Collapsed
End Sub

    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. Premere F5 per compilare ed eseguire l'applicazione.

  4. Fare clic sul pulsante Fare clic per rendere invisibile per rendere invisibile l'elemento WindowsFormsHost.

  5. Fare clic sul pulsante Fare clic per comprimere per nascondere completamente l'elemento WindowsFormsHost dal layout. Dopo avere compresso il controllo Windows Forms, gli elementi circostanti vengono ridisposti per occuparne lo spazio.

Hosting di un controllo che non si adatta

Alcuni controlli Windows Forms hanno una dimensione fissa e non si adattano per occupare lo spazio disponibile nel layout. Ad esempio il controllo MonthCalendar consente di visualizzare un mese in uno spazio fisso.

Per ospitare un controllo che non si adatta

  1. Copiare il codice XAML riportato di seguito nell'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. Premere F5 per compilare ed eseguire l'applicazione. L'elemento WindowsFormsHost viene centrato nella riga della griglia, ma non si adatta per occupare lo spazio disponibile. Se la finestra è sufficientemente grande, potrebbero essere visibili due o più mesi tramite il controllo MonthCalendar ospitato, ma saranno centrati nella riga. Il motore di layout WPF centra gli elementi che non possono essere ridimensionati per occupare lo spazio disponibile.

Ridimensionamento

A differenza degli elementi WPF la maggior parte dei controlli Windows Forms non è continuamente ridimensionabile. L'elemento WindowsFormsHost ridimensiona il controllo ospitato quando possibile.

Per ridimensionare un controllo ospitato

  1. Copiare il codice XAML riportato di seguito nell'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. Premere F5 per compilare ed eseguire l'applicazione. Il controllo ospitato e gli elementi che lo circondano vengono ridimensionati in base a un fattore di 0,5. Tuttavia il tipo di carattere del controllo ospitato non viene ridimensionato.

Rotazione

A differenza degli elementi WPF, i controlli Windows Forms non supportano la rotazione. L'elemento WindowsFormsHost non ruota con gli altri elementi WPF quando viene applicata una trasformazione di rotazione. Qualsiasi valore di rotazione diverso da 180 gradi genera l'evento LayoutError.

Per verificare l'effetto della rotazione in un'applicazione ibrida

  1. Copiare il codice XAML riportato di seguito nell'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. Premere F5 per compilare ed eseguire l'applicazione. Il controllo ospitato non viene ruotato, ma gli elementi che lo circondano vengono ruotati in base a un angolo di 180 gradi. Potrebbe essere necessario ridimensionare la finestra per vedere gli elementi.

Impostazione della spaziatura interna e dei margini

La spaziatura interna e i margini nel layout di WPF sono simili alla spaziatura interna e ai margini in Windows Forms. Impostare semplicemente le proprietà Padding e Margin nell'elemento WindowsFormsHost.

Per impostare la spaziatura interna e i margini per un controllo ospitato

  1. Copiare il codice XAML riportato di seguito nell'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. Premere F5 per compilare ed eseguire l'applicazione. Le impostazioni della spaziatura interna e dei margini vengono applicate ai controlli Windows Forms ospitati nello stesso modo in cui verrebbero applicate in Windows Forms.

Utilizzo di contenitori di layout dinamici

Windows Forms fornisce due contenitori di layout dinamici, FlowLayoutPanel e TableLayoutPanel. È anche possibile utilizzare questi contenitori nei layout di WPF.

Per utilizzare un contenitore di layout dinamico

  1. Copiare il codice XAML riportato di seguito nell'elemento Grid.

    <!-- Flow layout. -->
<DockPanel Grid.Row="4" Grid.Column="2">
  <WindowsFormsHost Name="flowLayoutHost" Background="Yellow">
    <wf:FlowLayoutPanel/>
  </WindowsFormsHost>
</DockPanel>

  2. In MainWindow.xaml.vb o MainWindow.xaml.cs copiare il codice seguente nella definizione della classe.

    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 Sub

    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. Aggiungere nel costruttore una chiamata al metodo InitializeFlowLayoutPanel.

    Public Sub New()
    InitializeComponent()

    Me.InitializeFlowLayoutPanel()

End Sub

    public MainWindow()
{
    InitializeComponent();

    this.InitializeFlowLayoutPanel();
}

  4. Premere F5 per compilare ed eseguire l'applicazione. L'elemento WindowsFormsHost occupa DockPanel e FlowLayoutPanel dispone i controlli figlio nell'oggetto FlowDirection predefinito.

Vedere anche

Riferimenti

ElementHost

WindowsFormsHost

Concetti

Considerazioni sul layout per l'elemento WindowsFormsHost

Procedura dettagliata: hosting di controlli Windows Form compositi in WPF

Procedura dettagliata: hosting di controlli compositi di WPF in Windows Form

Altre risorse

WPF Designer

Esempio di disposizione di controlli Windows Form in WPF

Cronologia delle modifiche

Data

Cronologia

Motivo

Agosto 2010

Aggiornamento per Visual Studio 2010

Commenti e suggerimenti dei clienti.