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

Artikel
05/04/2023

Einige Anwendungen erfordern ein Formular mit einem Layout, das sich selbst entsprechend neu anordnet, wenn sich die Größe des Formulars oder des Inhalts ändert. Wenn Sie ein dynamisches Layout benötigen und Layout -Ereignisse nicht explizit im Code verarbeiten möchten, ziehen Sie die Verwendung eines Layoutbereichs in Erwägung.

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.

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. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Anordnen von Steuerelementen in Windows Forms mithilfe von FlowLayoutPanel.

Das TableLayoutPanel-Steuerelement ordnet seinen Inhalt in einem Raster an und bietet eine ähnliche Funktionalität wie das HTML-Element <table>. Das TableLayoutPanel-Steuerelement ermöglicht es Ihnen, Steuerelemente in einem Rasterlayout zu platzieren, ohne dass Sie die genaue Position der einzelnen Steuerelemente angeben müssen. Seine Zellen sind in Zeilen und Spalten angeordnet, und diese können verschiedene Größen haben. Zellen können über Zeilen und Spalten hinweg zusammengeführt werden. Zellen können alle Elemente enthalten, die in einem Formular auftreten können, und verhalten sich in den meisten anderen Aspekten wie Container.

Das TableLayoutPanel-Steuerelement bietet außerdem Funktionen zur proportionalen Größenänderung zur Laufzeit, sodass sich das Layout reibungslos anpassen kann, wenn sich die Größe Ihres Formulars ändert. Dadurch eignet sich das TableLayoutPanel-Steuerelement u. a. gut für Dateneingabeformulare und lokalisierte Anwendungen. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen eines in der Größe veränderbaren Windows Forms für die Dateneingabe und Exemplarische Vorgehensweise: Erstellen eines Layouts, das sich proportional an die Lokalisierung anpasst.

Im Allgemeinen sollten Sie kein TableLayoutPanel-Steuerelement als Container für das gesamte Layout verwenden. Verwenden Sie TableLayoutPanel-Steuerelemente, um Funktionen zur proportionalen Größenänderung für Teile des Layouts bereitzustellen.

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

Erstellen eines Windows Forms-Projekts
Anordnen von Steuerelementen in Zeilen und Spalten
Festlegen von Zeilen- und Spalteneigenschaften
Überspannen von Zeilen und Spalten mit einem Steuerelement
Automatische Behandlung von Überläufen
Einfügen von Steuerelementen durch Doppelklicken in der Toolbox
Einfügen eines Steuerelements durch Zeichnen seiner Kontur
Erneutes Zuweisen von vorhandenen Steuerelementen zu einem anderen übergeordneten Element

Wenn Sie diese Aufgaben durchgearbeitet haben, besitzen Sie ein Verständnis für die Rolle, die diese wichtigen Layoutfunktionen spielen.

Erstellen des Projekts

Im ersten Schritt wird das Projekt erstellt und das Formular eingerichtet.

So erstellen Sie das Projekt

Erstellen Sie ein Windows-Anwendungsprojekt mit dem Namen „TableLayoutPanelExample“. Weitere Informationen finden Sie unter Tutorial: Erstellen einer Bildanzeige-App in Windows Forms in Visual Studio.
Wählen Sie das Formular im WindowsForms-Designer aus.

Anordnen von Steuerelementen in Zeilen und Spalten

Mit dem TableLayoutPanel-Steuerelement können Sie Steuerelemente ganz einfach in Zeilen und Spalten anordnen.

So ordnen Sie Steuerelemente mithilfe von TableLayoutPanel in Zeilen und Spalten an

Ziehen Sie ein TableLayoutPanel -Steuerelement aus der Toolbox auf das Formular. Beachten Sie, dass das TableLayoutPanel-Steuerelement standardmäßig vier Zellen enthält.
Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das TableLayoutPanel-Steuerelement, und legen Sie es in einer der Zellen ab. Beachten Sie, dass das Button-Steuerelement innerhalb der ausgewählten Zelle erstellt wird.
Ziehen Sie drei weitere Button-Steuerelemente aus der Toolbox auf das TableLayoutPanel-Steuerelement, damit jede Zelle eine Schaltfläche enthält.
Ziehen Sie den Ziehpunkt für die vertikale Größenanpassung zwischen den beiden Spalten nach links. Beachten Sie, dass die Breite der Button-Steuerelemente in der ersten Spalte verringert wird, während die Größe der Button-Steuerelemente in der zweiten Spalte unverändert bleibt.
Ziehen Sie den Ziehpunkt für die vertikale Größenanpassung zwischen den beiden Spalten nach rechts. Beachten Sie, dass die Größe der Button-Steuerelemente in der ersten Spalte auf ihre ursprüngliche Größe zurückgesetzt werden, die Button-Steuerelemente in der zweiten Spalte werden hingegen nach rechts verschoben.
Bewegen Sie den Ziehpunkt für die horizontale Größenanpassung nach oben und unten, um den Effekt auf die Steuerelemente im Bereich zu sehen.

Positionieren von Steuerelementen in Zellen durch Andocken und Verankern

Das Verankerungsverhalten untergeordneter Steuerelemente in einem TableLayoutPanel-Steuerelement unterscheidet sich von dem Verhalten in anderen Containersteuerelementen. Das Andockverhalten untergeordneter Steuerelemente ist mit dem Verhalten anderer Containersteuerelemente identisch.

Positionieren von Steuerelementen innerhalb von Zellen

Wählen Sie das erste Button-Steuerelement aus. Legen Sie den Wert seiner Dock -Eigenschaft auf Fillfest. Beachten Sie, dass das Button-Steuerelement vergrößert wird, um die Zelle auszufüllen.
Wählen Sie eines der anderen Button-Steuerelemente aus. Legen Sie den Wert seiner Anchor -Eigenschaft auf Rightfest. Beachten Sie, dass es so verschoben wird, dass sich seine rechte Kante nahe des rechen Zellenrands befindet. Der Abstand zwischen den Rahmen ist die Summe der Margin-Eigenschaft des Button-Steuerelements und der Padding-Eigenschaft des Panels.
Ändern Sie den Wert der Anchor-Eigenschaft des Button-Steuerelements in Right und Left. Beachten Sie, dass die Größe des Steuerelements an die Breite der Zelle angepasst wird. Dabei werden die Werte Margin und Padding berücksichtigt.
Wiederholen Sie die Schritte 2 und 3 mit den Stilen Top und Bottom.

Festlegen von Zeilen- und Spalteneigenschaften

Sie können einzelne Eigenschaften von Zeilen und Spalten mithilfe der Auflistungen RowStyles und ColumnStyles festlegen.

So legen Sie Zeilen- und Spalteneigenschaften fest

Wählen Sie im Windows Forms-Designer das Steuerelement TableLayoutPanel aus.
Öffnen Sie im Fenster Eigenschaften die Auflistung ColumnStyles, indem Sie neben dem Eintrag Spalten auf die Schaltfläche mit den Auslassungspunkten () klicken.
Wählen Sie die erste Spalte aus, und ändern Sie den Wert ihrer SizeType-Eigenschaft in AutoSize. Klicken Sie auf OK, um die Änderung anzunehmen. Beachten Sie, dass die Breite der ersten Spalte reduziert wird, um sie an die Größe des Button-Steuerelements anzupassen. Beachten Sie außerdem, dass die Breite der Spalte nicht geändert werden kann.
Öffnen Sie im Fenster Eigenschaften die Auflistung ColumnStyles, und wählen Sie die erste Spalte aus. Legen Sie den Wert seiner SizeType -Eigenschaft auf Percentfest. Klicken Sie auf OK, um die Änderung anzunehmen. Ändern Sie die Größe des TableLayoutPanel-Steuerelements, sodass es breiter wird, und Sie sehen, dass die erste Spalte breiter wird. Ändern Sie die Größe des TableLayoutPanel Steuerelements, sodass es schmaler wird, und Sie sehen, dass die Größe der Schaltflächen in der ersten Spalte an die Zelle angepasst wird. Beachten Sie außerdem, dass die Breite der Spalte geändert werden kann.
Öffnen Sie im Fenster Eigenschaften die Auflistung ColumnStyles, und wählen Sie alle aufgelisteten Spalten aus. Legen Sie den Wert jeder SizeType-Eigenschaft auf Percent fest. Klicken Sie auf OK, um die Änderung anzunehmen. Wiederholen Sie diesen Vorgang für die Auflistung RowStyles.
Ändern Sie mithilfe eines der Eckziehpunkte für die Größenänderung sowohl die Breite als auch die Höhe des TableLayoutPanel-Steuerelements. Beachten Sie, dass sich die Größe der Zeilen und Spalten ändert, wenn sich die Größe des TableLayoutPanel-Steuerelements ändert. Beachten Sie außerdem, dass die Zeilen und Spalten mit den Ziehpunkten für die horizontale und vertikale Größenanpassung geändert werden können.

Überspannen von Zeilen und Spalten mit einem Steuerelement

Das TableLayoutPanel-Steuerelement fügt Steuerelementen zur Entwurfszeit mehrere neue Eigenschaften hinzu. RowSpan und ColumnSpan sind zwei dieser Eigenschaften. Mit diesen Eigenschaften können Sie festlegen, dass sich ein Steuerelement über mehrere Zeilen oder Spalten erstreckt.

So überspannen Sie Zeilen und Spalten mit einem Steuerelement

Wählen Sie das Button-Steuerelement in der ersten Zeile und der ersten Spalte aus.
Ändern Sie im Fenster Eigenschaften den Wert der ColumnSpan-Eigenschaft in 2. Beachten Sie, dass das Button-Steuerelement die erste Spalte und die zweite Spalte ausfüllt. Beachten Sie außerdem, dass eine zusätzliche Zeile hinzugefügt wurde, um diese Änderung zu berücksichtigen.
Wiederholen Sie Schritt 2 für die RowSpan-Eigenschaft.

Einfügen von Steuerelementen durch Doppelklicken in der Toolbox

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

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

Ziehen Sie ein TableLayoutPanel -Steuerelement aus der Toolbox auf das Formular.
Doppelklicken Sie auf das Symbol des Button -Steuerelements in der Toolbox. Beachten Sie, dass ein neues Schaltflächen-Steuerelement in der ersten Zelle des TableLayoutPanel-Steuerelements angezeigt wird.
Doppelklicken Sie in der Toolboxauf verschiedene weitere Steuerelemente. Beachten Sie, dass die neuen Steuerelemente nacheinander in den nicht belegten Zellen des TableLayoutPanel-Steuerelements angezeigt werden. Beachten Sie außerdem, dass das TableLayoutPanel-Steuerelement vergrößert wird, um die neuen Steuerelemente aufzunehmen, wenn keine offenen Zellen verfügbar sind.

Automatische Behandlung von Überläufen

Wenn Sie Steuerelemente in das TableLayoutPanel-Steuerelement einfügen, sind möglicherweise nicht mehr genügend leere Zellen für Ihre neuen Steuerelemente verfügbar. Das TableLayoutPanel-Steuerelement behandelt diese Situation automatisch, indem die Anzahl der Zellen erhöht wird.

So beobachten Sie die automatische Behandlung von Überläufen

Wenn das TableLayoutPanel-Steuerelement noch leere Zellen enthält, fügen Sie weiterhin neue Button-Steuerelemente ein, bis das TableLayoutPanel-Steuerelement voll ist.
Sobald das TableLayoutPanel-Steuerelement voll ist, doppelklicken Sie in der Toolbox auf das Symbol Button, um ein weiteres Button-Steuerelement einzufügen. Beachten Sie, dass das TableLayoutPanel-Steuerelement neue Zellen erstellt, um das neue Steuerelement aufzunehmen. Fügen Sie einige weitere Steuerelemente ein, und beobachten Sie das Größenänderungsverhalten.
Ändern Sie den Wert der TableLayoutPanel -Eigenschaft des GrowStyle -Steuerelements in FixedSize. Doppelklicken Sie in der Toolbox auf das Symbol Button, um Button-Steuerelemente einzufügen, bis das TableLayoutPanel-Steuerelement voll ist. Doppelklicken Sie erneut auf das Symbol Button in der Toolbox. Beachten Sie, dass Sie eine Fehlermeldung aus dem Windows Forms-Designer mit dem Hinweis erhalten, dass keine zusätzlichen Zeilen und Spalten erstellt werden können.

Einfügen eines Steuerelements durch Zeichnen seiner Kontur

Sie können ein Steuerelement in ein TableLayoutPanel -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

Ziehen Sie ein TableLayoutPanel -Steuerelement aus der Toolbox auf das Formular.
Klicken Sie in der Toolboxauf das Symbol des Button -Steuerelements. Ziehen Sie es nicht auf das Formular.
Bewegen Sie den Mauszeiger auf das TableLayoutPanel -Steuerelement. Beachten Sie, dass der Mauszeiger die Form eines Fadenkreuzes annimmt, an das das Symbol des Button -Steuerelements angefügt ist.
Klicken Sie, und halten Sie die Maustaste gedrückt.
Ziehen Sie den Mauszeiger, um die Kontur des Button -Steuerelements zu zeichnen. Wenn Sie mit der Größe zufrieden sind, geben Sie die Maustaste frei. Beachten Sie, dass das Button-Steuerelement in der Zelle erstellt wird, in der Sie die Kontur des Steuerelements gezeichnet haben.

Mehrere Steuerelemente in Zellen sind nicht zulässig.

Das TableLayoutPanel-Steuerelement kann nur ein untergeordnetes Steuerelement pro Zelle enthalten.

So zeigen Sie, dass mehrere Steuerelemente in Zellen nicht zulässig sind

Ziehen Sie ein Button-Steuerelement aus der Toolbox auf das TableLayoutPanel-Steuerelement, und legen Sie es in einer der belegten Zellen ab. Beachten Sie, dass das TableLayoutPanel-Steuerelement es nicht zulässt, dass Sie das Button-Steuerelement in der belegten Zelle ablegen.

Austauschen von Steuerelementen

Mit dem TableLayoutPanel-Steuerelement können Sie die Steuerelemente austauschen, die zwei verschiedene Zellen belegen.

So tauschen Sie Steuerelemente aus

Ziehen Sie eines der Button-Steuerelemente aus einer belegten Zelle, und legen Sie es in einer anderen belegten Zelle ab. Beachten Sie, dass die beiden Steuerelemente von einer Zelle in die andere verschoben werden.

Nächste Schritte

Mithilfe einer Kombination aus Layoutbereichen und Steuerelementen können Sie ein komplexes Layout verwirklichen. Mit folgenden Funktionen können Sie Ihre Fähigkeiten vertiefen:

Versuchen Sie, die Größe eines der Button-Steuerelemente zu erhöhen, und beobachten Sie die Auswirkung auf das Layout.
Fügen Sie eine Auswahl mehrerer Steuerelemente in das TableLayoutPanel-Steuerelement ein, und notieren Sie, wie die Steuerelemente eingefügt werden.
Layoutbereiche können andere Layoutbereiche enthalten. Experimentieren Sie mit dem Ablegen eines TableLayoutPanel -Steuerelements auf dem vorhandenen Steuerelement.
Docken Sie das TableLayoutPanel -Steuerelement am übergeordneten Formular an. Ändern Sie die Größe des Formulars, und beobachten Sie die Auswirkung auf das Layout.