Freigeben über

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

  • Artikel

Einige Anwendungen erfordern ein Formular mit einem Layout, das sich entsprechend anordnet, wenn die Größe des Formulars geändert wird oder sich der Inhalt in der Größe ändert. Wenn Sie ein dynamisches Layout benötigen und nicht Layout Ereignisse explizit in Ihrem Code behandeln möchten, sollten Sie ein Layoutpanel verwenden.

Das FlowLayoutPanel-Steuerelement und das TableLayoutPanel-Steuerelement stellen intuitive Verfahren zum Anordnen von Steuerelementen auf Formularen dar. Beide bieten die Möglichkeit, die relativen Positionen der in ihnen enthaltenen untergeordneten Steuerelemente automatisch und konfigurierbar zu steuern, und beide stellen dynamische Layoutfunktionen zur Laufzeit zur Verfügung, sodass sie Größe und Position von untergeordneten Steuerelementen ändern können, wenn sich die Abmessungen des übergeordneten Formulars ändern. Layoutbereiche können in Layoutbereichen geschachtelt werden, um die Realisierung raffinierter Benutzeroberflächen zu ermöglichen.

Der TableLayoutPanel ordnet seinen Inhalt in einem Raster an und bietet Funktionen, die dem HTML-<-Tabellenelement> ähneln. Die Zellen werden in Zeilen und Spalten angeordnet, und diese können unterschiedliche Größen aufweisen. Weitere Informationen finden Sie unter Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel.

Das FlowLayoutPanel ordnet seinen Inhalt in einer bestimmten Flussrichtung an: horizontal oder vertikal. Dieser Inhalt kann von einer Zeile zur nächsten oder von einer Spalte zur nächsten umbrochen werden. Alternativ kann dieser Inhalt abgeschnitten werden, statt dass er umbrochen wird. In dieser exemplarischen Vorgehensweise werden u. a. folgende Aufgaben veranschaulicht:

  • Erstellen eines Windows Forms-Projekts

  • Horizontale und vertikale Anordnung von Steuerelementen

  • Flussrichtung ändern

  • Einfügen von Flussumbrüchen

  • Anordnen von Steuerelementen mithilfe von Auffüllung 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

  • Erneutes Zuweisen von vorhandenen Steuerelementen zu einem anderen übergeordneten Element

Wenn Sie fertig sind, haben Sie ein besseres Verständnis für die Rolle dieser wichtigen Layoutfunktionen.

Projekt erstellen

  1. Erstellen Sie in Visual Studio ein Windows basiertes Anwendungsprojekt namens „FlowLayoutPanelExample" (Datei>Neues>Projekt>Visual C# oder Visual Basic>Classic Desktop>Windows Forms-Anwendung).

  2. Wählen Sie das Formular im Forms-Designer aus.

Anordnen von Steuerelementen in horizontaler und vertikaler Richtung

Mit dem FlowLayoutPanel-Steuerelement können Sie Steuerelemente entlang von Zeilen oder Spalten platzieren, ohne dass Sie die Position jedes einzelnen Steuerelements genau angeben müssen.

Das FlowLayoutPanel-Steuerelement kann Größe und Umbruch seiner untergeordneten Steuerelemente ändern, wenn sich die Abmessungen des übergeordneten Formulars ändern.

So ordnen Sie Steuerelemente mithilfe eines FlowLayoutPanels horizontal und vertikal an.

  1. Ziehen Sie ein FlowLayoutPanel -Steuerelement aus der Toolbox auf das Formular.

  2. Ziehen Sie ein Button -Steuerelement aus der Toolbox auf das FlowLayoutPanel. Beachten Sie, dass es automatisch in die obere linke Ecke des FlowLayoutPanel -Steuerelements verschoben wird.

  3. Ziehen Sie ein weiteres Button -Steuerelement aus der Toolbox auf das FlowLayoutPanel. Beachten Sie, dass das Button-Steuerelement automatisch an eine Position neben dem ersten Button-Steuerelement verschoben wird. Wenn Ihr FlowLayoutPanel zu schmal ist, um die beiden Steuerelemente in derselben Zeile unterzubringen, wird das neue Button-Steuerelement automatisch in die nächste Zeile verschoben.

  4. Ziehen Sie weitere Button-Steuerelemente aus der Toolbox auf das FlowLayoutPanel. Fahren Sie mit dem Platzieren von Button -Steuerelementen fort, bis bei einem der Umbruch in die nächste Zeile erfolgt.

  5. Ändern Sie den Wert der FlowLayoutPanel-Eigenschaft des WrapContents-Steuerelements in false. Beachten Sie, dass für die untergeordneten Steuerelemente kein Umbruch in die nächste Zeile mehr auftritt. Stattdessen werden sie in die erste Zeile verschoben und abgeschnitten.

  6. Ändern Sie den Wert der FlowLayoutPanel-Eigenschaft des WrapContents-Steuerelements in true. Beachten Sie, dass die untergeordneten Steuerelemente wieder in die nächste Zeile fließen.

  7. Verringern Sie die Breite des FlowLayoutPanel -Steuerelements, bis alle Button -Steuerelemente in der ersten Spalte platziert werden.

  8. Erhöhen Sie die Breite des FlowLayoutPanel-Steuerelements, bis alle Button-Steuerelemente in der ersten Zeile platziert werden. Möglicherweise müssen Sie die Größe Ihres Formulars ändern, um die größere Breite zu ermöglichen.

Ändern der Flussrichtung

Mit der FlowDirection-Eigenschaft können Sie die Richtung ändern, in der Steuerelemente angeordnet sind. 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

  1. Ändern Sie den Wert der FlowLayoutPanel-Eigenschaft des FlowDirection-Steuerelements in TopDown. Beachten Sie, dass die untergeordneten Steuerelemente je nach Höhe des Steuerelements in einer oder mehreren Spalten neu angeordnet werden.

  2. Ändern Sie die Größe des FlowLayoutPanel , sodass seine Höhe kleiner als die Spalte der Button -Steuerelemente ist. Beachten Sie, dass das FlowLayoutPanel die untergeordneten Steuerelemente so neu anordnet, dass sie in die nächste Spalte fließen. Während Sie die Höhe weiter verringern, können Sie beobachten, dass die untergeordneten Steuerelemente in benachbarte Spalten fließen. Ändern Sie den Wert der FlowLayoutPanel-Eigenschaft des FlowDirection-Steuerelements in RightToLeft. Beachten Sie, dass die Positionen der untergeordneten Steuerelemente umgekehrt werden. Beobachten Sie das Layout, wenn Sie den Wert der FlowDirection -Eigenschaft in BottomUpändern.

Einfügen von Flussumbrüchen

Das FlowLayoutPanel -Steuerelement stellt für seine untergeordneten Steuerelemente eine FlowBreak-Eigenschaft 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 auch nicht mehr in die nächste Zeile oder Spalte um.

So fügen Sie Flussumbrüche ein

  1. Ändern Sie den Wert der FlowLayoutPanel-Eigenschaft des FlowDirection-Steuerelements in TopDown.

  2. Wählen Sie eins der Button-Steuerelemente in der Mitte der äußerst linken Spalte aus.

  3. Legen Sie den Wert der FlowBreak-Eigenschaft des Steuerelements Button auf truefest. 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

  1. Vergrößern Sie das FlowLayoutPanel , bis alle Button -Steuerelemente in einer Spalte angeordnet sind.

  2. Wählen Sie das oberste Button-Steuerelement aus. Vergrößern Sie die Breite, sodass sie ungefähr doppelt so breit ist wie die anderen Button Steuerelemente.

  3. Wählen Sie das zweite Button-Steuerelement aus. Legen Sie den Wert seiner Anchor -Eigenschaft auf Rightfest. Beachten Sie, dass es so verschoben wird, dass seine rechte Kante an der rechten Kante des ersten Button -Steuerelements ausgerichtet ist.

  4. Ändern Sie den Wert seiner Anchor -Eigenschaft in Right und Left. Beachten Sie, dass seine Größe auf die Breite des ersten Button-Steuerelements geändert wird.

  5. Wählen Sie das dritte Button -Steuerelement aus. Legen Sie den Wert seiner Dock-Eigenschaft auf Fill fest. Beachten Sie, dass seine Größe auf die Breite des ersten Button -Steuerelements geändert wird.

Anordnen von Steuerelementen mithilfe von Auffüllung und Rändern

Sie können Steuerelemente auf Ihrem FlowLayoutPanel auch durch Ändern der Eigenschaften Padding und Margin anordnen.

Mithilfe der Padding -Eigenschaft können Sie die Platzierung von Steuerelementen innerhalb einer Zelle eines FlowLayoutPanel -Steuerelements steuern. Sie gibt den Abstand zwischen den untergeordneten Steuerelementen und der Kante des FlowLayoutPanel-Steuerelements an.

Mit der Margin-Eigenschaft können Sie den Abstand zwischen Steuerelementen steuern.

So ordnen Sie Steuerelemente mithilfe der Eigenschaften „Padding“ und „Margin“ an

  1. Ändern Sie den Wert der FlowLayoutPanel -Eigenschaft des Dock -Steuerelements in Fill. Wenn das Formular groß genug ist, werden die Button-Steuerelemente in die erste Spalte des FlowLayoutPanel-Steuerelements verschoben.

  2. Ändern Sie den Wert der Eigenschaft Padding des Steuerelements FlowLayoutPanel, indem Sie den Eintrag Padding im Fenster Eigenschaften erweitern und die Eigenschaft All auf 20festlegen. Weitere Details finden Sie unter Schritt-für-Schritt-Anleitung: Anordnen von Steuerelementen für Windows Forms mit Abständen, Rändern und der Größenanpassungseigenschaft. Beachten Sie, dass die untergeordneten Steuerelemente zur Mitte des FlowLayoutPanel-Steuerelements verschoben werden. Durch den höheren Wert für die Padding -Eigenschaft werden die untergeordneten Steuerelemente von den Kanten des FlowLayoutPanel -Steuerelements weg verschoben.

  3. Wählen Sie alle Button -Steuerelemente im FlowLayoutPanel aus, und legen Sie den Wert der Margin -Eigenschaft auf 20fest. Beachten Sie, dass sich der Abstand zwischen den Button -Steuerelementen vergrößert, sodass sie weiter auseinander gerückt werden. Möglicherweise müssen Sie die Größe des FlowLayoutPanel -Steuerelements erhöhen, damit Sie alle untergeordneten Steuerelemente sehen können.

Einfügen von Steuerelementen durch Doppelklicken in der Toolbox

Sie können Ihr FlowLayoutPanel -Steuerelement auffüllen, indem Sie in der Toolboxauf Steuerelemente doppelklicken.

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

  1. Doppelklicken Sie auf das Symbol des Button -Steuerelements in der Toolbox. Beachten Sie, dass ein neues Button -Steuerelement im FlowLayoutPanel -Steuerelement angezeigt wird.

  2. Doppelklicken Sie in der Toolboxauf verschiedene weitere Steuerelemente. 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 angeben, indem Sie in einer Zelle seine Kontur zeichnen.

So fügen Sie ein Steuerelement ein, indem Sie seine Kontur zeichnen

  1. Klicken Sie in der Toolbox auf das Symbol des Button-Steuerelements. Ziehen Sie es nicht auf das Formular.

  2. Bewegen Sie den Mauszeiger auf das FlowLayoutPanel-Steuerelement. Beachten Sie, dass der Mauszeiger die Form eines Fadenkreuzes annimmt, an das das Symbol des Button -Steuerelements angefügt ist.

  3. Klicken Sie, und halten Sie die Maustaste gedrückt.

  4. Ziehen Sie den Mauszeiger, um die Kontur des Button-Steuerelements zu zeichnen. Wenn Sie mit der Größe zufrieden sind, lassen Sie die Maustaste los. Beachten Sie, dass das Button-Steuerelement an der nächsten freien Position des FlowLayoutPanel-Steuerelements erstellt wird.

Einfügen von Steuerelementen mithilfe der Einfügemarke

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

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

  1. Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das FlowLayoutPanel-Steuerelement, und zeigen Sie auf den Abstand zwischen zwei Button-Steuerelementen. Beachten Sie, dass eine Einfügemarke angezeigt wird, die angibt, wo das Button-Steuerelement beim Ablegen auf demFlowLayoutPanel-Steuerelements abgelegt wird. Bevor Sie das neue Button-Steuerelement auf dem FlowLayoutPanel-Steuerelement ablegen, bewegen Sie den Mauszeiger umher, um zu verfolgen, wie sich die Einfügemarke bewegt.

  2. Legen Sie das neue Button -Steuerelement auf dem FlowLayoutPanel -Steuerelement ab. Beachten Sie, dass das neue Button -Steuerelement nicht an den anderen ausgerichtet ist, da seine Margin -Eigenschaft einen anderen Wert aufweist.

Erneutes Zuweisen von vorhandenen Steuerelementen zu einem anderen übergeordneten Element

Sie können auf Ihrem Formular vorhandene Steuerelemente einem neuen FlowLayoutPanel -Steuerelement zuordnen.

So weisen Sie vorhandene Steuerelemente einem anderen übergeordneten Steuerelement zu

  1. Ziehen Sie drei Button-Steuerelemente aus der Toolbox auf das Formular. Positionieren Sie sie nahe beieinander, ohne sie aber auszurichten.

  2. Klicken Sie in der Toolbox auf das Symbol des FlowLayoutPanel-Steuerelements. Ziehen Sie es nicht auf das Formular.

  3. Bewegen Sie den Mauszeiger in die Nähe der drei Button-Steuerelemente. Beachten Sie, dass der Mauszeiger die Form eines Fadenkreuzes annimmt, an das das Symbol des FlowLayoutPanel-Steuerelements angefügt ist.

  4. Klicken Sie, und halten Sie die Maustaste gedrückt.

  5. Ziehen Sie den Mauszeiger, um die Kontur des FlowLayoutPanel -Steuerelements zu zeichnen. Ziehen Sie die Kontur um die drei Button-Steuerelemente.

  6. Lassen Sie die Maustaste los. Beachten Sie, dass die drei Button-Steuerelemente in das FlowLayoutPanel-Steuerelement eingefügt werden.

Nächste Schritte

Sie können ein komplexes Layout mithilfe einer Kombination aus Layoutbereichen und Steuerelementen erreichen. Vorschläge für weitere Erkundungen umfassen:

  • Erhöhen Sie die Größe eines der Button-Steuerelemente, und beobachten Sie die Auswirkung auf das Layout.

  • Layoutpaneele können andere Layoutpaneele enthalten. Experimentieren Sie mit dem Ablegen eines TableLayoutPanel-Steuerelements auf dem vorhandenen Steuerelement.

  • Docken Sie das FlowLayoutPanel-Steuerelement am übergeordneten Formular an. Ändern Sie die Größe des Formulars und beachten Sie den Effekt auf das Layout.

  • Legen Sie die Visible-Eigenschaft eines der Steuerelemente auf false fest, und beobachten Sie, wie das FlowLayoutPanel als Antwort darauf einen neuen Umbruch durchführt.

Siehe auch