Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von FlowLayoutPanel

Artikel
08/10/2011

Einige Anwendungen setzen ein Layout voraus, das bei Änderungen der Größe des Formulars oder des Inhalts automatisch angepasst wird. Wenn Sie ein dynamisches Layout benötigen und keine Layout-Ereignisse explizit im Code behandeln möchten, sollten Sie einen Layoutbereich verwenden.

Das FlowLayoutPanel-Steuerelement und das TableLayoutPanel-Steuerelement bieten intuitive Möglichkeiten zum Anordnen von Steuerelementen auf dem Formular. Mit beiden lassen sich die relativen Positionen untergeordneter Steuerelemente, die in ihnen enthalten sind, automatisch und konfigurierbar steuern. Außerdem bieten diese beiden Steuerelemente dynamische Layoutfeatures zur Laufzeit, mit denen die Größe und Position untergeordneter Steuerelemente an die Maße des übergeordneten Formulars angepasst werden können. Layoutbereiche können in anderen Layoutbereichen verschachtelt sein, um anspruchsvolle Benutzeroberflächen zu ermöglichen.

Der Inhalt des TableLayoutPanel ist in einem Raster angeordnet, dessen Funktionalität mit dem HTML-Element <table> vergleichbar ist. Die Zellen sind in Zeilen und Spalten angeordnet, die unterschiedliche Größen aufweisen können. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von TableLayoutPanel.

Der Inhalt des FlowLayoutPanel wird in einer bestimmten Flussrichtung angeordnet: horizontal oder vertikal. Dieser Inhalt kann von einer Zeile zur nächsten oder von einer Spalte zur nächsten umbrochen werden. Statt umbrochen zu werden, kann der Inhalt aber auch abgeschnitten werden. Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

Erstellen eines Windows Forms-Projekts
Anordnen von Steuerelementen in horizontaler und vertikaler Richtung
Ändern der Flussrichtung
Einfügen von Flussumbrüchen
Anordnen von Steuerelementen mithilfe von Abständen und Rändern
Einfügen von Steuerelementen durch Doppelklicken in der Toolbox
Einfügen eines Steuerelements durch Zeichnen seiner Kontur
Einfügen von Steuerelementen mit der Einfügemarke
Neuzuweisen von vorhandenen Steuerelementen zu einem anderen übergeordneten Steuerelement

Anschließend werden Sie verstehen, welche Rolle diese wichtigen Layoutfeatures spielen.

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.

Erstellen des Projekts

Zunächst wird das Projekt erstellt und das Formular eingerichtet.

So erstellen Sie das Projekt

Erstellen Sie ein Windows-basiertes Anwendungsprojekt mit dem Namen "FlowLayoutPanelExample". Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines neuen Windows Forms-Anwendungsprojekts.
Wählen Sie das Formular im Windows Forms-Designer aus.

Anordnen von Steuerelementen in horizontaler und vertikaler Richtung

Das FlowLayoutPanel-Steuerelement ermöglicht es Ihnen, Steuerelemente an Zeilen und Spalten zu platzieren, ohne dass Sie die genaue Position der einzelnen Steuerelemente angeben müssen.

Mit dem FlowLayoutPanel-Steuerelement können die Größe und die Flussrichtung der untergeordneten Steuerelemente an die Maße des übergeordneten Formulars angepasst werden.

So ordnen Sie Steuerelemente mit einem FlowLayoutPanel horizontal und vertikal an

Ziehen Sie ein FlowLayoutPanel-Steuerelement aus der Toolbox auf das Formular.
Ziehen Sie ein Button-Steuerelement aus der Toolbox in den FlowLayoutPanel. Beachten Sie, dass es automatisch in die linke obere Ecke des FlowLayoutPanel-Steuerelements verschoben wird.
Ziehen Sie ein weiteres Button-Steuerelement aus der Toolbox in den FlowLayoutPanel. Beachten Sie, dass das Button-Steuerelement automatisch neben das erste Button-Steuerelement verschoben wird. Wenn der FlowLayoutPanel zu schmal ist, um beide Steuerelemente auf derselben Zeile zu platzieren, wird das neue Button-Steuerelement automatisch in die nächste Zeile verschoben.
Ziehen Sie weitere Button-Steuerelemente aus der Toolbox in den FlowLayoutPanel. Platzieren Sie so lange weitere Button-Steuerelemente, bis eines in die nächste Zeile umbrochen wird.
Ändern Sie den Wert der WrapContents-Eigenschaft des FlowLayoutPanel-Steuerelements in false. Beachten Sie, dass die untergeordneten Steuerelemente nicht mehr in die nächste Zeile fließen. Stattdessen werden sie in die erste Zeile verschoben und abgeschnitten.
Ändern Sie den Wert der WrapContents-Eigenschaft des FlowLayoutPanel-Steuerelements in true. Beachten Sie, dass die untergeordneten Steuerelemente wieder in die nächste Zeile umbrochen werden.
Reduzieren Sie die Breite des FlowLayoutPanel-Steuerelements, bis alle Button-Steuerelemente in die erste Spalte verschoben werden.
Erhöhen Sie die Breite des FlowLayoutPanel-Steuerelements, bis alle Button-Steuerelemente in die erste Zeile verschoben werden. Unter Umständen müssen Sie die Größe des Formulars an die vergrößerte Breite anpassen.

Ändern der Flussrichtung

Die FlowDirection-Eigenschaft ermöglicht es Ihnen, die Richtung zu ändern, in der Steuerelemente angeordnet werden. Sie können die untergeordneten Steuerelemente von links nach rechts, rechts nach links, oben nach unten oder unten nach oben anordnen.

So ändern Sie die Flussrichtung in einem FlowLayoutPanel

Ändern Sie den Wert der FlowDirection-Eigenschaft des FlowLayoutPanel-Steuerelements in TopDown. Beachten Sie, dass die untergeordneten Steuerelemente je nach Höhe des Steuerelements in einer oder mehreren Spalten neu angeordnet werden.
Passen Sie die Größe des FlowLayoutPanel an, sodass seine Höhe kleiner als die Spalte der Button-Steuerelemente ist. Beachten Sie, dass der FlowLayoutPanel die untergeordneten Steuerelemente so anordnet, dass sie in die nächste Spalte fließen. Reduzieren Sie die Höhe weiter, und beachten Sie, dass die untergeordneten Steuerelemente in nebenstehende Spalten fließen. Ändern Sie den Wert der FlowDirection-Eigenschaft des FlowLayoutPanel-Steuerelements in RightToLeft. Beachten Sie, dass die Positionen der untergeordneten Steuerelemente zurückgesetzt werden. Beachten Sie das Layout, wenn Sie den Wert der FlowDirection-Eigenschaft in BottomUp ändern.

Einfügen von Flussumbrüchen

Das FlowLayoutPanel-Steuerelement stellt eine FlowBreak-Eigenschaft für seine untergeordneten Steuerelemente bereit. Wenn Sie den Wert der FlowBreak-Eigenschaft auf true festlegen, ordnet das FlowLayoutPanel-Steuerelement andere Steuerelemente nicht mehr in der aktuellen Flussrichtung an und bricht diese nicht mehr in die nächste Zeile oder Spalte um.

So fügen Sie Flussumbrüche ein

Ändern Sie den Wert der FlowDirection-Eigenschaft des FlowLayoutPanel-Steuerelements in TopDown.
Wählen Sie eines der Button-Steuerelemente in der Mitte der äußersten linken Spalte aus.
Legen Sie den Wert der FlowBreak-Eigenschaft des Button-Steuerelements auf true fest. Beachten Sie, dass die Spalte umbrochen wird und die Steuerelemente, die auf das ausgewählte Button-Steuerelement folgen, in die nächste Spalte fließen. Legen Sie den Wert der FlowBreak-Eigenschaft des Button-Steuerelements auf false fest, um zum ursprünglichen Verhalten zurückzukehren.

Positionieren von Steuerelementen durch Andocken und Verankern

Das Andock- und Verankerungsverhalten von untergeordneten Steuerelementen unterscheidet sich vom Verhalten in anderen Containersteuerelementen. Sowohl das Andocken als auch das Verankern erfolgt relativ zum größten Steuerelement in der Flussrichtung.

So positionieren Sie Steuerelemente durch Andocken und Verankern

Vergrößern Sie den FlowLayoutPanel, bis die Button-Steuerelemente alle in einer Spalte angeordnet sind.
Wählen Sie das obere Button-Steuerelement aus. Vergrößern Sie seine Breite auf ungefähr das Doppelte der Breite der anderen Button-Steuerelemente.
Wählen Sie das zweite Button-Steuerelement aus. Ändern Sie den Wert der Anchor-Eigenschaft in Right. Beachten Sie, dass es verschoben wird, sodass sein rechter Rand am rechten Rand des ersten Button-Steuerelements ausgerichtet ist.
Ändern Sie den Wert der Anchor-Eigenschaft in Right und Left. Beachten Sie, dass seine Breite an die des ersten Button-Steuerelements angepasst wird.
Wählen Sie das dritte Button-Steuerelement aus. Ändern Sie den Wert der Dock-Eigenschaft in Fill. Beachten Sie, dass seine Breite an die des ersten Button-Steuerelements angepasst wird.

Anordnen von Steuerelementen mithilfe von Abständen und Rändern

Sie können Steuerelemente im FlowLayoutPanel-Steuerelement auch anordnen, indem Sie die Padding-Eigenschaft und die Margin-Eigenschaft ändern.

Die Padding-Eigenschaft ermöglicht es Ihnen, die Platzierung von Steuerelementen innerhalb einer Zelle eines FlowLayoutPanel-Steuerelements zu steuern. Sie gibt den Abstand zwischen den untergeordneten Steuerelementen und dem Rahmen des FlowLayoutPanel-Steuerelements an.

Die Margin-Eigenschaft ermöglicht es Ihnen, den Abstand zwischen Steuerelementen zu steuern.

So ordnen Sie Steuerelemente mit der Padding-Eigenschaft und der Margin-Eigenschaft an

Ändern Sie den Wert der Dock-Eigenschaft des FlowLayoutPanel-Steuerelements in Fill. Wenn das Formular groß genug ist, werden die Button-Steuerelemente in die erste Spalte des FlowLayoutPanel-Steuerelements verschoben.
Ändern Sie den Wert der Padding-Eigenschaft des FlowLayoutPanel-Steuerelements, indem Sie den Padding-Eintrag im Eigenschaftenfenster erweitern und die All-Eigenschaft auf 20 festlegen. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Anordnen von Windows Forms-Steuerelementen mithilfe von Abständen, Rändern und der AutoSize-Eigenschaft. Beachten Sie, dass die untergeordneten Steuerelemente zur Mitte des FlowLayoutPanel-Steuerelements verschoben werden. Der erhöhte Wert für die Padding-Eigenschaft bewirkt, dass die untergeordneten Steuerelemente von den Rändern des FlowLayoutPanel-Steuerelements weg verschoben werden.
Wählen Sie alle Button-Steuerelemente im FlowLayoutPanel aus, und legen Sie den Wert der Margin-Eigenschaft auf 20 fest. Beachten Sie, dass der Abstand zwischen den Button-Steuerelementen zunimmt, d. h., sie werden weiter auseinander verschoben. Unter Umständen müssen Sie die Größe des FlowLayoutPanel-Steuerelements anpassen, um alle untergeordneten Steuerelemente zu sehen.

Einfügen von Steuerelementen durch Doppelklicken in der Toolbox

Sie können das FlowLayoutPanel-Steuerelement füllen, indem Sie in der Toolbox auf Steuerelemente doppelklicken.

So fügen Sie Steuerelemente durch Doppelklicken in der Toolbox ein

Doppelklicken Sie auf das Button-Steuerelementsymbol in der Toolbox. Beachten Sie, dass ein neues Button-Steuerelement im FlowLayoutPanel-Steuerelement angezeigt wird.
Doppelklicken Sie auf weitere Steuerelemente in der Toolbox. Beachten Sie, dass die neuen Steuerelemente nacheinander im FlowLayoutPanel-Steuerelement angezeigt werden.

Einfügen eines Steuerelements durch Zeichnen seiner Kontur

Sie können ein Steuerelement in ein FlowLayoutPanel-Steuerelement einfügen und seine Größe festlegen, indem Sie in einer Zelle seine Kontur zeichnen.

So fügen Sie ein Steuerelement durch Zeichnen seiner Kontur ein

Klicken Sie im Fenster Toolbox auf das Symbol für das Button-Steuerelement. Ziehen Sie es nicht auf das Formular.
Bewegen Sie den Mauszeiger über das FlowLayoutPanel-Steuerelement. Beachten Sie, dass sich der Zeiger zu einem Fadenkreuz mit angefügtem Symbol des Button-Steuerelements ändert.
Halten Sie die Maustaste gedrückt.
Ziehen Sie den Mauszeiger, um die Kontur des Button-Steuerelements zu zeichnen. Wenn die gewünschte Größe erreicht ist, lassen Sie die Maustaste los. Beachten Sie, dass das Button-Steuerelement an der nächsten verfügbaren Position des FlowLayoutPanel-Steuerelements erstellt wird.

Einfügen von Steuerelementen mit der Einfügemarke

Sie können Steuerelemente an einer bestimmten Position in einem FlowLayoutPanel-Steuerelement einfügen. Wenn Sie ein Steuerelement in den Clientbereich des FlowLayoutPanel-Steuerelements ziehen, wird an der Stelle, an der das Steuerelement eingefügt wird, eine Einfügemarke angezeigt.

So fügen Sie ein Steuerelement mit der Einfügemarke ein

Ziehen Sie ein Button-Steuerelement aus der Toolbox in das FlowLayoutPanel-Steuerelement, und zeigen Sie auf den Abstand zwischen zwei Button-Steuerelementen. Beachten Sie, dass eine Einfügemarke gezeichnet wird. Diese gibt die Stelle an, an der der Button platziert wird, wenn der in dasFlowLayoutPanel-Steuerelement eingefügt wird. Bevor Sie das neue Button-Steuerelement in das FlowLayoutPanel-Steuerelement einfügen, verschieben Sie den Mauszeiger, um zu sehen, wie sich die Einfügemarke verschiebt.
Fügen Sie das neue Button-Steuerelement in das FlowLayoutPanel-Steuerelement ein. Beachten Sie, dass das neue Button-Steuerelement nicht an den anderen Steuerelementen ausgerichtet ist, da seine Margin-Eigenschaft einen anderen Wert aufweist.

Neuzuweisen von vorhandenen Steuerelementen zu einem anderen übergeordneten Steuerelement

Sie können Steuerelemente auf dem Formular einem neuen FlowLayoutPanel-Steuerelement zuweisen.

So weisen Sie vorhandene Steuerelemente einem übergeordneten Steuerelement neu zu

Ziehen Sie drei Button-Steuerelemente aus der Toolbox auf das Formular. Positionieren Sie sie nahe beieinander, ohne sie auszurichten.
Klicken Sie in der Toolbox auf das Symbol für das FlowLayoutPanel-Steuerelement. Ziehen Sie es nicht auf das Formular.
Bewegen Sie den Mauszeiger in die Nähe der drei Button-Steuerelemente. Beachten Sie, dass sich der Zeiger zu einem Fadenkreuz mit angefügtem Symbol des FlowLayoutPanel-Steuerelements ändert.
Halten Sie die Maustaste gedrückt.
Ziehen Sie den Mauszeiger, um die Kontur des FlowLayoutPanel-Steuerelements zu zeichnen. Ziehen Sie die Kontur um die drei Button-Steuerelemente.
Lassen Sie die Maustaste los. Beachten Sie, dass die drei Button-Steuerelemente in das FlowLayoutPanel-Steuerelement eingefügt werden.

Nächste Schritte

Mit einer Kombination aus Layoutbereichen und Steuerelementen können Sie ein komplexes Layout erzielen. Hier einige Vorschläge:

Vergrößern Sie eines der Button-Steuerelemente, und beachten Sie die Auswirkung auf das Layout.
Layoutbereiche können andere Layoutbereiche enthalten. Fügen Sie probeweise ein TableLayoutPanel-Steuerelement in das vorhandene Steuerelement ein.
Docken Sie das FlowLayoutPanel-Steuerelement am übergeordneten Formular an. Passen Sie die Größe des Formulars an, und beachten Sie die Auswirkung auf das Layout.
Legen Sie die Visible-Eigenschaft eines der Steuerelemente auf false fest, und beachten Sie die geänderte Flussrichtung des FlowLayoutPanel.

Siehe auch