Exemplarische Vorgehensweise: Anordnen von WPF-Inhalt in Windows Forms zur Entwurfszeit

Artikel
08/10/2011

In dieser exemplarischen Vorgehensweise wird die Verwendung von Windows Forms-Layoutfeatures, z. B. Verankern und Ausrichtungslinien, zum Anordnen von Windows Presentation Foundation (WPF)-Steuerelementen veranschaulicht.

Im Verlauf dieser exemplarischen Vorgehensweise führen Sie folgende Aufgaben aus:

Erstellen des Projekts
Erstellen des WPF-Steuerelements
Hosten von WPF-Steuerelementen in einem Layoutbereich
Verwenden von Ausrichtungslinien zum Ausrichten von WPF-Steuerelementen
Verankern und Andocken von WPF-Steuerelementen

Tipp

Je nach den aktiven Einstellungen oder der Version unterscheiden sich die Dialogfelder und Menübefehle auf Ihrem Bildschirm möglicherweise von den in der Hilfe beschriebenen. Klicken Sie im Menü Extras auf Einstellungen importieren und exportieren, um die Einstellungen zu ändern. Weitere Informationen finden Sie unter Arbeiten mit Einstellungen.

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

Visual Studio 2010.

Erstellen des Projekts

Zunächst muss das Windows Forms-Projekt erstellt werden.

Tipp

Beim Hosten von WPF-Inhalt werden nur C#- und Visual Basic-Projekte unterstützt.

So erstellen Sie das Projekt

Erstellen Sie in Visual Basic oder Visual C# ein neues Windows Forms-Anwendungsprojekt mit dem Namen ArrangeElementHost. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines neuen Windows Forms-Anwendungsprojekts.

Erstellen des WPF-Steuerelements

Nachdem Sie dem Projekt ein WPF-Steuerelement hinzugefügt haben, können Sie es auf dem Formular anordnen.

So erstellen Sie WPF-Steuerelemente

Fügen Sie dem Projekt ein neues WPF-UserControl hinzu. Verwenden Sie den Standardnamen UserControl1.xaml für den Steuerelementtyp. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen neuen WPF-Inhalts in Windows Forms zur Entwurfszeit.
Stellen Sie in der Entwurfsansicht sicher, dass UserControl1 ausgewählt ist. Weitere Informationen finden Sie unter Gewusst wie: Auswählen und Verschieben von Elementen auf der Entwurfsoberfläche.
Legen Sie im Eigenschaftenfenster den Wert der Width-Eigenschaft und der Height-Eigenschaft auf 200 fest.
Legen Sie den Wert der Background-Eigenschaft auf Blue fest.
Erstellen Sie das Projekt.

Hosten von WPF-Steuerelementen in einem Layoutbereich

Sie können WPF-Steuerelemente in Layoutbereichen genauso verwenden wie andere Windows Forms-Steuerelemente.

So hosten Sie WPF-Steuerelemente in einem Layoutbereich

Öffnen Sie Form1 im Windows Forms-Designer.
Ziehen Sie ein TableLayoutPanel-Steuerelement aus der Toolbox auf das Formular.
Wählen Sie im Smarttagbereich des TableLayoutPanel-Steuerelements die Option Letzte Zeile entfernen aus.
Ändern Sie die Größe des TableLayoutPanel-Steuerelements, sodass es eine größere Breite und Höhe aufweist.
Doppelklicken Sie in der Toolbox auf UserControl1, um eine Instanz von UserControl1 in der ersten Zelle des TableLayoutPanel-Steuerelements zu erstellen.

Die Instanz von UserControl1 wird in einem neuen ElementHost-Steuerelement mit dem Namen elementHost1 gehostet.
Doppelklicken Sie in der Toolbox auf UserControl1, um in der zweiten Zelle des TableLayoutPanel-Steuerelements eine weitere Instanz zu erstellen.
Wählen Sie im Fenster Dokumentgliederung tableLayoutPanel1 aus. Weitere Informationen finden Sie unter Fenster "Dokumentgliederung".
Legen Sie im Eigenschaftenfenster den Wert der Padding-Eigenschaft auf 10, 10, 10, 10 fest.

Die Größe beider ElementHost-Steuerelemente wird entsprechend dem neuen Layout angepasst.

Verwenden von Ausrichtungslinien zum Ausrichten von WPF-Steuerelementen

Mithilfe von Ausrichtungslinien können Sie Steuerelemente auf einem Formular leicht ausrichten. Sie können Ausrichtungslinien auch zum Ausrichten von WPF-Steuerelementen verwenden. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von Ausrichtungslinien.

So verwenden Sie Ausrichtungslinien zum Ausrichten von WPF-Steuerelementen

Ziehen Sie eine Instanz von UserControl1 aus der Toolbox auf das Formular, und platzieren Sie sie in dem Bereich unterhalb des TableLayoutPanel-Steuerelements.

Die Instanz von UserControl1 wird in einem neuen ElementHost-Steuerelement mit dem Namen elementHost3 gehostet.
Richten Sie den linken Rand von elementHost3 mithilfe der Ausrichtungslinien am linken Rand des TableLayoutPanel-Steuerelements aus.
Passen Sie die Größe von elementHost3 mithilfe der Ausrichtungslinien an die Breite des TableLayoutPanel-Steuerelements an.
Verschieben Sie das elementHost3 zum TableLayoutPanel-Steuerelement, bis zwischen den Steuerelementen eine mittige Ausrichtungslinie angezeigt wird.
Legen Sie den Wert der Margin-Eigenschaft im Eigenschaftenfenster auf 20, 20, 20, 20 fest.
Verschieben Sie das elementHost3 weg vom TableLayoutPanel-Steuerelement, bis die mittige Ausrichtungslinie erneut angezeigt wird. Die mittige Ausrichtungslinie zeigt jetzt einen Rand von 20 an.
Verschieben Sie elementHost3 nach rechts, bis dessen linker Rand am linken Rand von elementHost1 ausgerichtet ist.
Ändern Sie die Breite von elementHost3, bis dessen rechter Rand am rechten Rand von elementHost2 ausgerichtet ist.

Verankern und Andocken von WPF-Steuerelementen

Ein auf einem Formular gehostetes WPF-Steuerelement weist dasselbe Verankerungs- und Andockverhalten auf wie andere Windows Forms-Steuerelemente.

So verankern und docken Sie WPF-Steuerelemente an

Klicken Sie auf elementHost1.
Legen Sie im Eigenschaftenfenster die Anchor-Eigenschaft auf Top, Bottom, Left, Right fest.
Vergrößern Sie die Größe des TableLayoutPanel-Steuerelements.

Die Größe des elementHost1-Steuerelements wird geändert, sodass es die Zelle ausfüllt.
Klicken Sie auf elementHost2.
Legen Sie im Fenster Eigenschaften den Wert der Dock-Eigenschaft auf Fill fest.

Die Größe des elementHost2-Steuerelements wird geändert, sodass es die Zelle ausfüllt.
Wählen Sie das TableLayoutPanel-Steuerelement aus.
Legen Sie den Wert der Dock-Eigenschaft auf Top fest.
Klicken Sie auf elementHost3.
Legen Sie den Wert der Dock-Eigenschaft auf Fill fest.

Die Größe des elementHost3-Steuerelements wird geändert, sodass es den übrigen Platz auf dem Formular ausfüllt.
Ändern Sie die Größe des Formulars.

Die Größe aller drei ElementHost-Steuerelemente wird entsprechend angepasst.

Weitere Informationen finden Sie unter Gewusst wie: Verankern und Andocken von untergeordneten Steuerelementen in einem TableLayoutPanel-Steuerelement.

Siehe auch

Freigeben über