Exemplarische Vorgehensweise: Anordnen von Windows Forms-Steuerelementen in WPF

In dieser exemplarischen Vorgehensweise wird gezeigt, wie Sie WPF-Layoutfeatures verwenden, um Windows Forms-Steuerelemente in einer Hybridanwendung anzuordnen.

In dieser exemplarischen Vorgehensweise werden u. a. folgende Aufgaben veranschaulicht:

• Erstellen des Projekts.
• Verwenden von Standardlayouteinstellungen.
• Größe an Inhalt anpassen.
• Absolute Positionierung verwenden.
• Explizite Angabe der Größe.
• Festlegen von Layouteigenschaften.
• Verstehen von Einschränkungen der Z-Reihenfolge.
• Andocken.
• Festlegen der Sichtbarkeit.
• Hosten einer Steuerung, die sich nicht ausdehnt.
• Skalierung.
• Rotierend.
• Festlegen des Abstands und der Seitenränder.
• Verwenden von dynamischen Layoutcontainern.

Eine vollständige Codeauflistung der in dieser exemplarischen Vorgehensweise veranschaulichten Aufgaben finden Sie unter Anordnen von Windows Forms-Steuerelementen im WPF-Beispiel.

Wenn Sie fertig sind, verfügen Sie über kenntnisse der Windows Forms-Layoutfeatures in WPF-basierten Anwendungen.

Voraussetzungen

Sie benötigen Visual Studio, um diese Anleitung abzuschließen.

Projekt erstellen

Führen Sie die folgenden Schritte aus, um das Projekt zu erstellen und einzurichten:

1. Erstellen Sie ein WPF-Anwendungsprojekt mit dem Namen WpfLayoutHostingWf.

2. Fügen Sie im Projektmappen-Explorer Verweise auf die folgenden Assemblys hinzu:

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

3. Doppelklicken Sie auf "MainWindow.xaml" , um sie in der XAML-Ansicht zu öffnen.

4. Fügen Sie im Window Element die folgende Windows Forms-Namespacezuordnung hinzu.

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

5. Legen Sie im Grid-Element die ShowGridLines-Eigenschaft auf true fest und definieren Sie fünf Zeilen und drei Spalten.

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

Verwenden von Standardlayouteinstellungen

Standardmäßig behandelt das WindowsFormsHost Element das Layout für das gehostete Windows Forms-Steuerelement.

Führen Sie die folgenden Schritte aus, um standardlayouteinstellungen zu verwenden:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

   <!-- Default layout. -->
   <Canvas Grid.Row="0" Grid.Column="0">
     <WindowsFormsHost Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen. Das Windows Forms-Steuerelement System.Windows.Forms.Button wird in der Canvas. Das gehostete Steuerelement wird basierend auf seinem Inhalt angepasst, und das WindowsFormsHost Element wird angepasst, um das gehostete Steuerelement aufzunehmen.

Größe an Inhalt anpassen

Das WindowsFormsHost Element stellt sicher, dass die Größe des gehosteten Steuerelements so angepasst wird, dass der Inhalt ordnungsgemäß angezeigt wird.

Führen Sie die folgenden Schritte aus, um die Größe entsprechend dem Inhalt anzupassen:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

   <!-- 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. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen. Die beiden neuen Schaltflächen sind so dimensioniert, dass die längere Textzeichenfolge und der größere Schriftgrad ordnungsgemäß angezeigt werden, und die Größe der WindowsFormsHost Elemente wird angepasst, um die gehosteten Steuerelemente unterzubringen.

Verwenden der absoluten Positionierung

Sie können die absolute Positionierung verwenden, um das WindowsFormsHost Element an einer beliebigen Stelle auf der Benutzeroberfläche (UI) zu platzieren.

Führen Sie die folgenden Schritte aus, um die absolute Positionierung zu verwenden:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

   <!-- 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. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen. Das WindowsFormsHost Element wird 20 Pixel von der oberen Seite der Rasterzelle und 20 Pixel von links platziert.

Explizite Angabe der Größe

Sie können die Größe des WindowsFormsHost-Elements mithilfe der Width- und Height-Eigenschaften angeben.

Führen Sie die folgenden Schritte aus, um die Größe explizit anzugeben:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

   <!-- 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. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen. Das WindowsFormsHost Element wird auf eine Breite von 50 Pixeln um 70 Pixel hoch festgelegt, was kleiner als die Standardlayouteinstellungen ist. Der Inhalt des Windows Forms-Steuerelements wird entsprechend neu angeordnet.

Festlegen von Layouteigenschaften

Legen Sie layoutbezogene Eigenschaften für das gehostete Steuerelement immer mithilfe der Eigenschaften des WindowsFormsHost Elements fest. Das Direkte Festlegen von Layouteigenschaften im gehosteten Steuerelement führt zu unbeabsichtigten Ergebnissen.

Das Festlegen layoutbezogener Eigenschaften für das gehostete Steuerelement in XAML hat keine Auswirkung.

Führen Sie folgende Schritte aus, um die Effekte von Einstellungen der Eigenschaften auf das gehostete Steuerelement zu sehen:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

   <!-- 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. Doppelklicken Sie im Projektmappen-Explorer auf MainWindow.xaml.vb oder MainWindow.xaml.cs, um sie im Code-Editor zu öffnen.

3. Kopieren Sie den folgenden Code in die MainWindow Klassendefinition:

   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. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen.

5. Klicken Sie auf die Schaltfläche "Ich klicken ". Der button1_Click Ereignishandler legt die Top- und Left-Eigenschaften für das gehostete Steuerelement fest. Dies bewirkt, dass das gehostete Steuerelement innerhalb des WindowsFormsHost Elements neu positioniert wird. Der Host verwaltet denselben Bildschirmbereich, aber das gehostete Steuerelement wird abgeschnitten. Stattdessen sollte das gehostete Steuerelement das WindowsFormsHost Element immer ausfüllen.

Grundlegendes zu den Einschränkungen der Z-Reihenfolge

Die sichtbaren WindowsFormsHost Elemente werden immer über andere WPF-Elemente gezeichnet und sind nicht durch die Z-Reihenfolge beeinflusst. Gehen Sie wie folgt vor, um das Verhalten der Z-Reihenfolge zu sehen:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

   <!-- 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. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen. Das WindowsFormsHost Element wird über das Bezeichnungselement gezeichnet.

Andocken

WindowsFormsHost -Element unterstützt WPF-Docking. Legen Sie die Dock angefügte Eigenschaft fest, um das gehostete Steuerelement in einem DockPanel Element anzudocken.

Führen Sie die folgenden Schritte aus, um ein gehostetes Steuerelement anzudocken:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

   <!-- 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. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen. Das WindowsFormsHost Element ist an der rechten Seite des DockPanel Elements verankert.

Festlegen der Sichtbarkeit

Sie können das Windows Forms-Steuerelement unsichtbar machen oder reduzieren, indem Sie die Visibility Eigenschaft für das WindowsFormsHost Element festlegen. Wenn ein Steuerelement unsichtbar ist, wird es nicht angezeigt, aber es belegt den Layoutbereich. Wenn ein Steuerelement reduziert ist, wird es nicht angezeigt, noch belegt es den Layoutbereich.

Führen Sie die folgenden Schritte aus, um die Sichtbarkeit eines gehosteten Steuerelements festzulegen:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

   <!-- 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. Kopieren Sie in MainWindow.xaml.vb oder MainWindow.xaml.cs den folgenden Code in die Klassendefinition:

   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. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen.

4. Klicken Sie auf die Schaltfläche 'Zum Unsichtbarmachen klicken', um das WindowsFormsHost Element unsichtbar zu machen.

5. Klicken Sie auf die Schaltfläche zum Reduzieren, um das Element vollständig aus dem Layout WindowsFormsHost. Wenn das Windows Forms-Steuerelement reduziert ist, werden die umgebenden Elemente neu angeordnet, um den Platz zu belegen.

Bereitstellung eines Bedienelements, das nicht gestreckt wird

Einige Windows Forms-Steuerelemente haben eine feste Größe und werden nicht gestreckt, um den verfügbaren Platz im Layout auszufüllen. Beispielsweise zeigt das MonthCalendar Steuerelement einen Monat in einem festen Bereich an.

Führen Sie die folgenden Schritte aus, um ein Steuerelement zu hosten, das nicht gestreckt wird:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

   <!-- 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. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen. Das WindowsFormsHost Element wird in der Rasterzeile zentriert, aber nicht gestreckt, um den verfügbaren Platz auszufüllen. Wenn das Fenster groß genug ist, werden möglicherweise zwei oder mehr Monate vom gehosteten MonthCalendar Steuerelement angezeigt, aber diese sind mittig in der Zeile positioniert. Das WPF-Layoutmodul zentriert Elemente, die nicht dimensioniert werden können, um den verfügbaren Platz auszufüllen.

Skalierung

Im Gegensatz zu WPF-Elementen sind die meisten Windows Forms-Steuerelemente nicht kontinuierlich skalierbar. Um eine benutzerdefinierte Skalierung bereitzustellen, überschreiben Sie die WindowsFormsHost.ScaleChild Methode.

Führen Sie die folgenden Schritte aus, um ein gehostetes Steuerelement mithilfe des Standardverhaltens zu skalieren:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

   <!-- 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. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen. Das gehostete Steuerelement und seine umgebenden Elemente werden um den Faktor 0,5 skaliert. Die Schriftart des gehosteten Steuerelements wird jedoch nicht skaliert.

Rotierend

Im Gegensatz zu WPF-Elementen unterstützen Windows Forms-Steuerelemente keine Drehung. Das WindowsFormsHost Element wird nicht mit anderen WPF-Elementen gedreht, wenn eine Drehungstransformation angewendet wird. Jeder drehungswert außer 180 Grad löst das LayoutError Ereignis aus.

Führen Sie die folgenden Schritte aus, um die Auswirkung der Drehung in einer Hybridanwendung anzuzeigen:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

   <!-- 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. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen. Das gehostete Steuerelement wird nicht gedreht, aber seine umgebenden Elemente werden um einen Winkel von 180 Grad gedreht. Möglicherweise müssen Sie die Größe des Fensters ändern, um die Elemente anzuzeigen.

Festlegen von Abstand und Seitenrändern

Abstand und Ränder im WPF-Layout ähneln Abstand und Seitenrändern in Windows Forms. Legen Sie einfach die Padding Eigenschaften für Margin das WindowsFormsHost Element fest.

Führen Sie die folgenden Schritte aus, um Abstand und Seitenränder für ein gehostetes Steuerelement festzulegen:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

   <!-- 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. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen. Die Abstands- und Randeinstellungen werden auf die gehosteten Windows Forms-Steuerelemente auf die gleiche Weise angewendet wie in Windows Forms.

Verwenden von dynamischen Layoutcontainern

Windows Forms bietet zwei dynamische Layoutcontainer FlowLayoutPanel und TableLayoutPanel. Sie können diese Container auch in WPF-Layouts verwenden.

Führen Sie die folgenden Schritte aus, um einen dynamischen Layoutcontainer zu verwenden:

1. Kopieren Sie den folgenden XAML-Code in das Grid Element:

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

2. Kopieren Sie in MainWindow.xaml.vb oder MainWindow.xaml.cs den folgenden Code in die Klassendefinition:

   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. Fügen Sie dem Konstruktor einen Aufruf der InitializeFlowLayoutPanel Methode hinzu:

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

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

4. Drücken Sie F5-, um die Anwendung zu erstellen und auszuführen. Das WindowsFormsHost Element füllt das DockPanel, und FlowLayoutPanel ordnet seine untergeordneten Steuerelemente im standardmäßigen FlowDirection an.

Siehe auch

• ElementHost
• WindowsFormsHost
• Entwerfen von XAML-Code in Visual Studio
• Layoutüberlegungen für das WindowsFormsHost-Element
• Anordnen von Windows Forms-Steuerelementen im WPF-Beispiel
• Exemplarische Vorgehensweise: Hosten eines zusammengesetzten Windows Forms-Steuerelements in WPF
• Exemplarische Vorgehensweise: Hosten eines zusammengesetzten WPF-Steuerelements in Windows Forms