Vorgehensweise: Erstellen einer Multipane-Benutzeroberfläche mit Windows Forms

  • Artikel

Durch das Anordnen von Steuerelementen in einem Formular können Sie eine Benutzeroberfläche mit mehreren Bereichen erstellen, die ähnlich wie die in Microsoft Outlook verwendete Benutzeroberfläche mit einer Ordnerliste, einem Nachrichtenbereich und einem Vorschaubereich aussieht. Diese Anordnung wird hauptsächlich durch Andocksteuerelemente im Formular erreicht.

Wenn Sie ein Steuerelement andocken, bestimmen Sie, an welchem Rand des übergeordneten Containers ein Steuerelement angedockt wird. Wenn Sie die Dock-Eigenschaft auf Right festlegen, wird der rechte Rand des Steuerelements am rechten Rand des übergeordneten Steuerelements angedockt. Darüber hinaus wird die Größe des angedockten Rands des Steuerelements dem jeweiligen Containersteuerelement entsprechend geändert. Weitere Informationen zur Funktionsweise der Dock-Eigenschaft finden Sie unter Vorgehensweise: Andocken von Steuerelementen in Windows Forms.

Dieses Verfahren konzentriert sich auf die Anordnung des SplitContainer-Steuerelements und der die anderen Steuerelemente im Formular, nicht auf das Hinzufügen von Funktionalität, damit die Anwendung Microsoft Outlook imitiert.

A form that's designed to look like an Outlook mail window.

Um diese Benutzeroberfläche zu erstellen, platzieren Sie alle Steuerelemente in einem SplitContainer-Steuerelement. SplitContainer enthält ein TreeView-Steuerelement im linken Bereich und ein anderes SplitContainer-Steuerelement im rechten Bereich. Der zweite SplitContainer enthält ein ListView-Steuerelement oben und ein RichTextBox-Steuerelement unten.

Diese SplitContainer-Steuerelemente ermöglichen eine unabhängige Größenänderung der anderen Steuerelemente im Formular. Sie können die Techniken in diesem Verfahren anpassen, um eigene benutzerdefinierte Benutzeroberflächen zu erstellen.

Steuerelementlayout

In der folgenden Tabelle wird beschrieben, wie die Steuerelemente so konfiguriert sind, dass Microsoft Outlook imitiert wird:

Control Eigenschaft Wert
SplitContainer Name splitContainer1
Andocken Fill
TabIndex 4
SplitterWidth 4
SplitterDistance 100
Panel1.Controls Fügen Sie das treeView1-Steuerelement zu diesem Bereich hinzu.
Panel2.Controls Fügen Sie das splitContainer2-Steuerelement zu diesem Bereich hinzu.
TreeView Name treeView1
Andocken Fill
TabIndex 0
Nodes Fügen Sie einen neuen Knoten namens Node0 hinzu.
SplitContainer Name splitContainer2
Andocken Fill
TabIndex 1
SplitterWidth 4
SplitterDistance 150
Ausrichtung Horizontal
Panel1.Controls Fügen Sie das listView1-Steuerelement zu diesem Bereich hinzu.
Panel2.Controls Fügen Sie das richTextBox1-Steuerelement zu diesem Bereich hinzu.
ListView Name listView1
Andocken Fill
TabIndex 2
Elemente Fügen Sie ein neues Element hinzu, und legen Sie den Text auf item1 fest.
RichTextBox Name richTextBox1
Andocken Fill
TabIndex 3
Text richTextBox1

Siehe auch