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

Artikel
08/20/2007

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

Der Inhalt des TableLayoutPanel ist in einem Raster angeordnet, dessen Funktionalität mit dem HTML-Element <table> vergleichbar ist. 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. Die Zellen sind in Zeilen und Spalten angeordnet, die unterschiedliche Größen aufweisen können. Zellen können zwischen Zeilen und Spalten zusammengeführt werden. Sie können denselben Inhalt wie ein Formular enthalten und verhalten sich in den meisten anderen Beziehungen wie Container.

Das TableLayoutPanel-Steuerelement bietet zudem die Möglichkeit der proportionalen Größenanpassung zur Laufzeit, d. h., das Layout kann an die Größe des Formulars angepasst werden. Dadurch eignet sich das TableLayoutPanel-Steuerelement speziell 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 sowie unter 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 für Teile des Layouts die proportionale Größenanpassung zu ermöglichen.

Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

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
Neuzuweisen von vorhandenen Steuerelementen zu einem anderen übergeordneten Steuerelement

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

Hinweis

Je nach den aktiven Einstellungen oder der verwendeten Version können die angezeigten Dialogfelder und Menübefehle von den in der Hilfe beschriebenen abweichen. Klicken Sie im Menü Extras auf Einstellungen importieren und exportieren, um die Einstellungen zu ändern. Weitere Informationen finden Sie unter Visual Studio-Einstellungen.

Erstellen des Projekts

Zunächst 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 Gewusst wie: Erstellen eines Windows-Anwendungsprojekts.
Wählen Sie im Windows Forms-Designer das Formular aus.

Anordnen von Steuerelementen in Zeilen und Spalten

Das TableLayoutPanel-Steuerelement ermöglicht es Ihnen, Steuerelemente mühelos in Zeilen und Spalten anzuordnen.

So ordnen Sie Steuerelemente mit 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 über vier Zellen verfügt.
Ziehen Sie ein Button-Steuerelement aus der Toolbox in das TableLayoutPanel-Steuerelement, und fügen Sie es in eine der Zellen ein. Beachten Sie, dass das Button-Steuerelement innerhalb der Zelle erstellt wird, die Sie ausgewählt haben.
Ziehen Sie drei weitere Button-Steuerelemente aus der Toolbox in das TableLayoutPanel-Steuerelement, sodass jede Zelle über eine Schaltfläche verfügt.
Klicken Sie auf den vertikalen Ziehpunkt zwischen den beiden Spalten, und verschieben Sie ihn bei gedrückter Maustaste nach links. Beachten Sie, dass die Button-Steuerelemente in der ersten Spalte schmaler werden, während die Größe der Button-Steuerelemente in der zweiten Spalte unverändert bleibt.
Klicken Sie auf den vertikalen Ziehpunkt zwischen den beiden Spalten, und verschieben Sie ihn bei gedrückter Maustaste nach rechts. Beachten Sie, dass die Button-Steuerelemente in der ersten Spalte auf ihre ursprüngliche Größe zurückgesetzt werden, während die Button-Steuerelemente in der zweiten Spalte nach rechts verschoben werden.
Bewegen Sie den horizontalen Ziehpunkt nach oben und unten, um die Auswirkung auf die Steuerelemente im Bereich zu beobachten.

Positionieren von Steuerelementen in Zellen durch Andocken und Verankern

Das Ankerverhalten von untergeordneten Steuerelementen in einem TableLayoutPanel unterscheidet sich vom Verhalten in anderen Containersteuerelementen. Das Andockverhalten von untergeordneten Steuerelementen ist mit dem anderer Containersteuerelemente identisch.

Positionieren von Steuerelementen in Zellen

Wählen Sie das erste Button-Steuerelement aus. Ändern Sie den Wert der Dock-Eigenschaft in Fill. Beachten Sie, dass das Button-Steuerelement auf die Größe seiner Zelle erweitert wird.
Wählen Sie eines der anderen Button-Steuerelemente aus. Ändern Sie den Wert der Anchor-Eigenschaft in Right. Beachten Sie, dass es verschoben wird, sodass sich der rechte Rand in der Nähe des rechten Rands der Zelle befindet. Der Abstand zwischen den Rändern entspricht der Summe der Margin-Eigenschaft des Button-Steuerelements und der Padding-Eigenschaft des Bereichs.
Ändern Sie den Wert der Anchor-Eigenschaft des Button-Steuerelements in Right und Left. Beachten Sie, dass das Steuerelement anhand der Werte für Margin und Padding an die Breite der Zelle angepasst wird.
Wiederholen Sie die Schritte 2 und 3 mit dem Top-Stil und dem Bottom-Stil.

Festlegen von Zeilen- und Spalteneigenschaften

Sie können individuelle Eigenschaften von Zeilen und Spalten festlegen, indem Sie die RowStyles-Auflistung und die ColumnStyles-Auflistung verwenden.

So legen Sie Zeilen- und Spalteneigenschaften fest

Wählen Sie das TableLayoutPanel-Steuerelement im Windows Forms-Designer aus.
Öffnen Sie im Eigenschaftenfenster die ColumnStyles-Auflistung, indem Sie auf die Schaltfläche mit den Auslassungszeichen () neben dem Eintrag Spalten klicken.
Wählen Sie die erste Spalte aus, und ändern Sie den Wert der SizeType-Eigenschaft in AutoSize. Klicken Sie auf OK, um die Änderung zu übernehmen. Beachten Sie, dass die Breite der ersten Spalte an das Button-Steuerelement angepasst wird. Beachten Sie außerdem, dass die Breite der Spalte nicht veränderbar ist.
Öffnen Sie im Eigenschaftenfenster die ColumnStyles-Auflistung, und wählen Sie die erste Spalte aus. Ändern Sie den Wert der SizeType-Eigenschaft in Percent. Klicken Sie auf OK, um die Änderung zu übernehmen. Vergrößern Sie die Breite des TableLayoutPanel-Steuerelements, und beachten Sie, dass die erste Spalte breiter wird. Reduzieren Sie die Breite des TableLayoutPanel-Steuerelements, und beachten Sie, dass die Schaltflächen in der ersten Spalte an die Größe der Zelle angepasst werden. Beachten Sie außerdem, dass die Breite der Spalte veränderbar ist.
Öffnen Sie im Eigenschaftenfenster die ColumnStyles-Auflistung, und wählen Sie alle aufgelisteten Spalten aus. Legen Sie den Wert aller SizeType-Eigenschaften auf Percent fest. Klicken Sie auf OK, um die Änderung zu übernehmen. Wiederholen Sie dies mit der RowStyles-Auflistung.
Klicken Sie auf einen der Eckziehpunkte, und ändern Sie bei gedrückter Maustaste sowohl die Breite als auch die Höhe des TableLayoutPanel-Steuerelements. Beachten Sie, dass die Größe der Zeilen und Spalten mit der Größe des TableLayoutPanel-Steuerelements geändert wird. Beachten Sie außerdem, dass die Größe der Zeilen und Spalten mit den horizontalen und vertikalen Ziehpunkten geändert werden kann.

Überspannen von Zeilen und Spalten mit einem Steuerelement

Das TableLayoutPanel-Steuerelement fügt Steuerelementen zur Entwurfszeit mehrere neue Eigenschaften hinzu. Zwei dieser Eigenschaften sind RowSpan und ColumnSpan. Sie können diese Eigenschaften verwenden, damit ein Steuerelement mehrere Zeilen und Spalten überspannt.

So überspannen Sie Zeilen und Spalten mit einem Steuerelement

Wählen Sie das Button-Steuerelement in der ersten Zeile und Spalte aus.
Ändern Sie im Eigenschaftenfenster 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 für diese Änderung eine zusätzliche Zeile hinzugefügt wurde.
Wiederholen Sie Schritt 2 für die RowSpan-Eigenschaft.

Einfügen von Steuerelementen durch Doppelklicken in der Toolbox

Sie können das TableLayoutPanel-Steuerelement füllen, indem Sie in der Toolbox auf 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 Button-Steuerelementsymbol in der Toolbox. Beachten Sie, dass ein neues Schaltflächensteuerelement in der ersten Zelle des TableLayoutPanel-Steuerelements angezeigt wird.
Doppelklicken Sie auf weitere Steuerelemente in der Toolbox. Beachten Sie, dass die neuen Steuerelemente nacheinander in den freien Zellen des TableLayoutPanel-Steuerelements angezeigt werden. Beachten Sie außerdem, dass das TableLayoutPanel-Steuerelement für die neuen Steuerelemente erweitert wird, wenn keine freien Zellen verfügbar sind.

Automatische Behandlung von Überläufen

Wenn Sie Steuerelemente in das TableLayoutPanel-Steuerelement einfügen, fehlen Ihnen möglicherweise leere Zellen für neue Steuerelemente. Das TableLayoutPanel-Steuerelement behandelt diese Situation automatisch, indem es die Anzahl der Zellen erhöht.

So erkennen Sie die automatische Behandlung von Überläufen

Wenn das TableLayoutPanel-Steuerelement noch leere Zellen enthält, fügen Sie weiterhin neue Button-Steuerelemente hinzu, bis das TableLayoutPanel-Steuerelement voll ist.
Wenn das TableLayoutPanel-Steuerelement voll ist, doppelklicken Sie auf das Button-Symbol in der Toolbox, um ein weiteres Button-Steuerelement einzufügen. Beachten Sie, dass das TableLayoutPanel-Steuerelement neue Zellen für das neue Steuerelement erstellt. Fügen Sie weitere Steuerelemente ein, und beachten Sie das Größenanpassungsverhalten.
Ändern Sie den Wert der GrowStyle-Eigenschaft des TableLayoutPanel-Steuerelements in FixedSize. Doppelklicken Sie auf das Button-Symbol in der Toolbox, um Button-Steuerelemente einzufügen, bis das TableLayoutPanel-Steuerelement voll ist. Doppelklicken Sie erneut auf das Button-Symbol in der Toolbox. Beachten Sie, dass Sie eine Fehlermeldung vom Windows Forms-Designer darüber erhalten, dass keine weiteren 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 festlegen, indem Sie in einer Zelle seine Kontur zeichnen.

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

Ziehen Sie ein TableLayoutPanel-Steuerelement aus der Toolbox auf das Formular.
Klicken Sie in der Toolbox auf das Symbol für das Button-Steuerelement. Ziehen Sie es nicht auf das Formular.
Bewegen Sie den Mauszeiger über das TableLayoutPanel-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 in der Zelle erstellt wird, in der Sie die Kontur des Steuerelements gezeichnet haben.

Mehrere Steuerelemente in Zellen sind nicht erlaubt

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

So veranschaulichen Sie, dass mehrere Steuerelemente in Zellen nicht erlaubt sind

Ziehen Sie ein Button-Steuerelement aus der Toolbox in das TableLayoutPanel-Steuerelement, und fügen Sie es in eine bereits gefüllte Zelle ein. Beachten Sie, dass das TableLayoutPanel-Steuerelement Sie daran hindert, das Button-Steuerelement in die gefüllte Zelle einzufügen.

Austauschen von Steuerelementen

Das TableLayoutPanel-Steuerelement ermöglicht Ihnen, Steuerelemente in zwei verschiedenen Zellen auszutauschen.

So tauschen Sie Steuerelemente aus

Ziehen Sie eines der Button-Steuerelemente aus einer gefüllten Zelle auf eine andere gefüllte Zelle. Beachten Sie, dass die beiden Steuerelemente von einer Zelle in die andere verschoben werden.

Nächste Schritte

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

Versuchen Sie, eines der Button-Steuerelemente zu vergrößern, und beachten Sie die Auswirkung auf das Layout.
Fügen Sie eine Auswahl mehrerer Steuerelemente in das TableLayoutPanel-Steuerelement ein, und beachten Sie, wie die Steuerelemente eingefügt werden.
Layoutbereiche können andere Layoutbereiche enthalten. Fügen Sie probeweise ein TableLayoutPanel-Steuerelement in das vorhandene Steuerelement ein.
Docken Sie das TableLayoutPanel-Steuerelement am übergeordneten Formular an. Passen Sie die Größe des Formulars an, und beachten Sie die Auswirkung auf das Layout.

Siehe auch