Procedura dettagliata: Disposizione dei controlli Windows Form in WPF

Questa procedura dettagliata illustra come usare le funzionalità di layout WPF per disporre i controlli Windows Form in un'applicazione ibrida.

Le attività illustrate in questa procedura dettagliata includono:

• Creazione del progetto.
• Uso delle impostazioni di layout predefinite.
• Ridimensionamento nel contenuto.
• Utilizzo del posizionamento assoluto.
• Specificare esplicitamente le dimensioni.
• Impostazione delle proprietà del layout.
• Comprendere le limitazioni dell'ordine z.
• Attracco.
• Impostazione della visibilità.
• Ospitare un controllo che non si estende.
• Scalabilità.
• Rotante.
• Impostazione di riempimento e margini.
• Uso di contenitori di layout dinamico.

Per un elenco completo del codice delle attività illustrate in questa procedura, vedere Disposizione dei controlli di Windows Forms nell'esempio WPF.

Al termine, si avrà una conoscenza delle funzionalità di layout di Windows Form nelle applicazioni basate su WPF.

Prerequisiti

Per completare questa procedura dettagliata, è necessario Visual Studio.

Creazione del progetto

Per creare e configurare il progetto, seguire questa procedura:

1. Crea un progetto di applicazione WPF denominato WpfLayoutHostingWf.

2. In Esplora soluzioni, aggiungi riferimenti agli assembly seguenti:

   • WindowsFormsIntegration
   • System.Windows.Forms
   • System.Drawing

3. Fare doppio clic MainWindow.xaml per aprirlo nella visualizzazione XAML.

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

   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>
   

Uso delle impostazioni di layout predefinite

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

Per usare le impostazioni di layout predefinite, seguire questa procedura:

1. Copiare il codice XAML seguente 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 Windows Forms System.Windows.Forms.Button viene visualizzato nel Canvas. Il controllo ospitato viene ridimensionato in base al relativo contenuto e l'elemento WindowsFormsHost viene ridimensionato per contenere il controllo ospitato.

Adattamento delle dimensioni al contenuto

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

Per adattare alla dimensione del contenuto, segui questi passaggi:

1. Copiare il codice XAML seguente 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 le dimensioni del carattere maggiori e gli elementi WindowsFormsHost vengono ridimensionati in modo da contenere i controlli ospitati.

Uso del posizionamento assoluto

È possibile usare il posizionamento assoluto per posizionare l'elemento WindowsFormsHost ovunque nell'interfaccia utente.

Per usare il posizionamento assoluto, seguire questa procedura:

1. Copiare il codice XAML seguente 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 dal lato sinistro.

Specificare le dimensioni esplicitamente

È possibile specificare le dimensioni dell'elemento WindowsFormsHost usando le proprietà Width e Height.

Per specificare le dimensioni in modo esplicito, seguire questa procedura:

1. Copiare il codice XAML seguente 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 è impostato su una dimensione di 50 pixel di larghezza di 70 pixel, minore delle impostazioni di layout predefinite. Il contenuto del controllo Windows Forms viene riorganizzato di conseguenza.

Impostazione delle proprietà del layout

Impostare sempre le proprietà correlate al layout nel controllo ospitato usando le proprietà dell'elemento WindowsFormsHost. L'impostazione delle proprietà di layout direttamente nel controllo ospitato produrrà 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 ospitato, seguire questa procedura:

1. Copiare il codice XAML seguente 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 di codice.

3. Copiare il codice seguente nella definizione della classe 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;
   }
   

   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
   

4. Premere F5 per compilare ed eseguire l'applicazione.

5. Fare clic sul pulsante Cliccami. Il gestore eventi button1_Click imposta le proprietà Top e Left nel controllo ospitato. In questo modo il controllo ospitato viene riposizionato all'interno dell'elemento WindowsFormsHost. L'host mantiene la stessa area dello schermo, ma il controllo ospitato viene troncato. Al contrario, il controllo ospitato deve sempre riempire l'elemento WindowsFormsHost.

Comprendere le limitazioni dello Z-Order

Gli elementi visibili WindowsFormsHost vengono sempre disegnati sopra altri elementi WPF e non sono interessati dall'ordine z. Per visualizzare questo comportamento dell'ordine z, eseguire le operazioni seguenti:

1. Copiare il codice XAML seguente nell'elemento Grid:

   <!-- Z-order demonstration. -->
   <Canvas Grid.Row="1" Grid.Column="1">
     <WindowsFormsHost Canvas.Top="20" Canvas.Left="20" Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
     <Label Content="A WPF label" FontSize="24"/>
   </Canvas>
   

2. Premere F5 per compilare ed eseguire l'applicazione. L'elemento WindowsFormsHost viene sovrapposto all'elemento etichetta.

Attracco

L'elemento WindowsFormsHost supporta il docking di WPF. Impostare la proprietà associata Dock per agganciare il controllo ospitato in un elemento DockPanel.

Per ancorare un controllo ospitato, seguire questa procedura:

1. Copiare il codice XAML seguente 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 è ancorato al lato destro dell'elemento DockPanel.

Impostazione della visibilità

È possibile rendere invisibile o comprimere il controllo Windows Form impostando la proprietà Visibility sull'elemento WindowsFormsHost. Quando un controllo è invisibile, non viene visualizzato, ma occupa spazio di layout. Quando un controllo viene compresso, non viene visualizzato né occupa spazio di layout.

Per impostare la visibilità di un controllo ospitato, seguire questa procedura:

1. Copiare il codice XAML seguente 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.cscopiare il codice seguente nella definizione della classe:

   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;
   }
   

   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
   

3. Premere F5 per compilare ed eseguire l'applicazione.

4. Fare clic sul pulsante 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. Quando il controllo Windows Forms viene ridotto, gli elementi circostanti vengono riorganizzati per occuparne lo spazio.

Hosting di un controllo che non si estende

Alcuni controlli Windows Form hanno una dimensione fissa e non si estendono per riempire lo spazio disponibile nel layout. Ad esempio, il controllo MonthCalendar visualizza un mese in uno spazio fisso.

Per integrare un controllo che non si allarga, segui questi passaggi:

1. Copiare il codice XAML seguente 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 è centrato nella riga della griglia, ma non viene esteso per riempire lo spazio disponibile. Se la dimensione della finestra è sufficientemente grande, potrebbero essere visualizzati due o più mesi dal controllo MonthCalendar incorporato, ma essi sono centrati nella riga. Il motore di layout WPF centra gli elementi che non possono essere ridimensionati per riempire lo spazio disponibile.

Scalabilità

A differenza degli elementi WPF, la maggior parte dei controlli Windows Form non è scalabile in modo continuo. Per fornire scalabilità personalizzata, eseguire l'override del metodo WindowsFormsHost.ScaleChild.

Per ridimensionare un controllo ospitato usando il comportamento predefinito, seguire questa procedura:

1. Copiare il codice XAML seguente 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 i relativi elementi circostanti vengono ridimensionati di un fattore di 0,5. Tuttavia, il tipo di carattere del controllo ospitato non viene ridimensionato.

Rotativo

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

Per visualizzare l'effetto della rotazione in un'applicazione ibrida, seguire questa procedura:

1. Copiare il codice XAML seguente 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 i relativi elementi circostanti vengono ruotati da un angolo di 180 gradi. Potrebbe essere necessario ridimensionare la finestra per visualizzare gli elementi.

Impostazione di padding e margini

La spaziatura interna e i margini nel layout di WPF sono simili alla spaziatura interna e ai margini in Windows Forms. È sufficiente impostare le proprietà Padding e Margin sull'elemento WindowsFormsHost.

Per impostare spaziatura interna e margini per un controllo ospitato, seguire questa procedura:

1. Copiare il codice XAML seguente 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 di spaziatura interna e margine vengono applicate ai controlli Windows Forms ospitati nello stesso modo in cui verrebbero applicate in Windows Forms.

Uso di contenitori di layout dinamico

Windows Form offre due contenitori di layout dinamici, FlowLayoutPanel e TableLayoutPanel. È anche possibile usare questi contenitori nei layout WPF.

Per usare un contenitore di layout dinamico, seguire questa procedura:

1. Copiare il codice XAML seguente 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.cscopiare il codice seguente nella definizione della classe:

   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);
       }
   }
   

   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
   

3. Aggiungere una chiamata al metodo InitializeFlowLayoutPanel nel costruttore :

   public MainWindow()
   {
       InitializeComponent();
   
       this.InitializeFlowLayoutPanel();
   }
   

   Public Sub New()
       InitializeComponent()
   
       Me.InitializeFlowLayoutPanel()
   
   End Sub
   

4. Premere F5 per compilare ed eseguire l'applicazione. L'elemento WindowsFormsHost riempie il DockPanele FlowLayoutPanel dispone i relativi controlli figlio nel FlowDirectionpredefinito .

Vedere anche

• ElementHost
• WindowsFormsHost
• progettare XAML in Visual Studio
• Considerazioni sul layout per l'elemento WindowsFormsHost
• Disposizione dei controlli Windows Forms nell'esempio WPF
• procedura dettagliata: Hosting di un controllo composito di Windows Form in WPF
• Procedura dettagliata: Hosting di un controllo composito WPF in Windows Forms