Die Winforms-Controls bieten einen enormen Umfang an Layout-Möglichkeiten, welche vorbildlich intuitiv im Form-Designer einzurichten sind.
Der Form-Designer ist ein Wysiwyg-Editor (“What You See Is What You Get”) für die gesamte Oberfläche. Dieses geniale Tool ist, was das “Visual” vom Visual-Studio ausmacht, und kann man glaub als den Meilenstein der Entwicklung der Oberflächen-Programmiererung überhaupt betrachten.
Bei der Layout-Entwicklung werden die LayoutContainer in Zusammenarbeit mit dem Docking-Feature eingesetzt, über welches alle Controls verfügen - nicht nur die LayoutContainer.
Parallel zum Docking existiert auch noch das Anchoring-Konzept, was ich aber für weniger flexibel und leistungsfähig halte (darin wird mir auch gelegentlich widersprochen, also ich würde mich wirklich freuen, wenn einer sich die Mühe machte, mir Gegenentwürfe zu meinen Samples zu präsentieren, die vergleichbare Useability bieten).
NebenBemerkung: Für einen Schnelleinstieg hab ich (inzwischen) in Post#6 2 Videos eingestellt. Ich denke, die "Visual"-Denke schnackelt man schneller, wenn mans mal sieht ("Visual" eben
).
Layout-Prinzipien
Einige (meiner) Layout-Prinzipien sind:
Die LayoutContainer repräsentieren jeweils andere Unterkonzepte von Layouting:
Ich habe meine LayoutSamples auf einem Tabcontrol organisiert, also das Sample-Form weist insgesamt eine komplexe Struktur auf.
Im folgenden führe ich alle Controls, die auf dem TabControl plaziert sind, auf, und die Einstellungen, zT. kommentiert, wasse bewirken.
Richtig verstehen kanns natürlich nur, wer das Sample runterlädt, und mit dem Sizing-Verhalten bischen rumspielt.
Im Download enthalten ist diese Besprechung auch als Word-Dokument - vlt. bisserl leichter lesbar als die nun folgende Aufstellung
Ansicht "DokumentenGliederung"
Den Struktur-Aufbau eines Forms kann man sich wunderbar in der Ansicht "Menu-WeitereFenster-Dokumentengliederung" angucken – dort hat man alle Controls zur Ansicht, direkt zugreifbar, und kann sie sogar von einem Container in einen anneren verschieben:
Der Form-Designer ist ein Wysiwyg-Editor (“What You See Is What You Get”) für die gesamte Oberfläche. Dieses geniale Tool ist, was das “Visual” vom Visual-Studio ausmacht, und kann man glaub als den Meilenstein der Entwicklung der Oberflächen-Programmiererung überhaupt betrachten.
Bei der Layout-Entwicklung werden die LayoutContainer in Zusammenarbeit mit dem Docking-Feature eingesetzt, über welches alle Controls verfügen - nicht nur die LayoutContainer.
Parallel zum Docking existiert auch noch das Anchoring-Konzept, was ich aber für weniger flexibel und leistungsfähig halte (darin wird mir auch gelegentlich widersprochen, also ich würde mich wirklich freuen, wenn einer sich die Mühe machte, mir Gegenentwürfe zu meinen Samples zu präsentieren, die vergleichbare Useability bieten).
NebenBemerkung: Für einen Schnelleinstieg hab ich (inzwischen) in Post#6 2 Videos eingestellt. Ich denke, die "Visual"-Denke schnackelt man schneller, wenn mans mal sieht ("Visual" eben
).Layout-Prinzipien
Einige (meiner) Layout-Prinzipien sind:
- die gesamte Oberfläche muß sizeable sein
sowohl die Forms selbst als auch Arbeitsflächen innerhalb - kein Platz verschwenden
also egal, ob das Form, oder nur ein Teilbereich vergrößert wird: Es sollen keine ungenutzten Lücken entstehen - keine Überlappungen
vor allem darf nicht passieren, dass Controls durch Verkleinerungen irgendwo drunter geschoben werden, und ggfs. Für den User nicht mehr verfügbar sind. In komplizierten Szenarien ist das vlt. nicht optimal umsetzbar, aber dann muss es Scrollbars geben die dem User anzeigen: “Da ist noch mehr - und du kannst es jederzeit hervorholen”
Die LayoutContainer repräsentieren jeweils andere Unterkonzepte von Layouting:
- Panel:
könnte man als Panel-Layouting auffassen - hat keine weitere Funktion als eben eine Gruppe von Controls zu präsentieren - Groupbox:
wie Panel - fügt noch bischen Grafik hinzu, und vor allem eine Beschriftung der in der Groupbox gruppierten Controls - SplitContainer:
Splitter-Layouting: Zwischen 2 Panels liegt ein SplitBalken, mit dem der User das Verhältnis beider Flächen sich einstellen kann - entweder in ihrer Breite oder in ihrer Höhe - TableLayoutPanel:
Table-Layouting: Man kann eine Tabelle definieren, und jede Zelle präsentiert ein Control. Das Sizing-Verhalten der Zeilen und Spalten ist differenziert einstellbar, also ob eine Zeile/Spalte in Breite/Höhe mitgeht, wenn der User die Abmaße der Gesamt-Tabelle verändert.
Es können auch Zellen gemergt werden, sodaß ein Control auch mehrere Zellen überspannt. Dieses wird am Control eingestellt - nicht am TLP. - FlowlayoutPanel
Flow-Layouting: die Controls sind einfach in Flussrichtung (zb nach rechts oder nach unten) aufgereiht - ist die reihe voll, gibt’s einen Zeilenumbruch (bzw. “Spaltenumbruch) - TabControl:
Tabbed-Layouting: beliebig viele Panels liegen übereinander, wie Registerkarten. In einer Leiste darüber guckt von jeder Registerkarte der “Reiter” heraus, über den man die entsprechende Tabpage nach vorne holen kann.
Tabcontrol ist also dazu da, die verfügbare Arbeitsfläche zu vervielfachen.
Ich habe meine LayoutSamples auf einem Tabcontrol organisiert, also das Sample-Form weist insgesamt eine komplexe Struktur auf.
Im folgenden führe ich alle Controls, die auf dem TabControl plaziert sind, auf, und die Einstellungen, zT. kommentiert, wasse bewirken.
Richtig verstehen kanns natürlich nur, wer das Sample runterlädt, und mit dem Sizing-Verhalten bischen rumspielt.
Im Download enthalten ist diese Besprechung auch als Word-Dokument - vlt. bisserl leichter lesbar als die nun folgende Aufstellung
Quellcode
- ● Tabpage1
- Komplexes Beispiel:
- Zeigt v.a. einerseits die Layout-Möglichkeiten des SplitContainer im Zusammenspiel mit dem Docking der enthaltenen Controls.
- Ausserdem einen Teil der Layout-Möglichkeiten von TableLayoutPanel.
- ● SplitContainer1:
- ◦ .Orientation.Horizontal
- ◦ .Dock.Fill
- ◦ .FixedPanel.Panel1
- bewirkt, dass bei horizontalem Resizing des Forms nur Panel2 seine Breite anpasst
- ● Groupbox1 (auf dem linken SplitPanel (alias "Panel1"):
- ◦ .Dock.Fill
- ● Label4:
- ◦ .Dock.Top
- bewirkt, dass das Label seine Breite an die Groupbox anpasst, in seiner Höhe aber konstant bleibt
- ◦ .AutoSize.False
- bei .AutoSize.True würde das Label das Docking ignorieren, und stattdessen seine Größe auf
- seinen Inhalt abstimmen
- ◦ .TextAlign.Center
- ● Treeview1:
- ◦ .Dock.Fill
- füllt den verbleibenden Rest der Groupbox aus (also abzüglich Label4). Dazu muß der Treeview im
- Vordergrund sein + kann man per Kontextmenü einstellen
- ● Groupbox2 (auf dem rechten SplitPanel (alias "Panel2"):
- ◦ .Dock.Fill
- ● SplitContainer2:
- ◦ .BackColor.LightSalmon (man sieht aber nur den Splitterbalken gefärbt, da alles andere überdeckt ist)
- ◦ .Orientation.Vertical
- ◦ .Dock.Fill
- ◦ .FixedPanel.Panel1
- bewirkt, dass bei vertikalem Resizing des Forms nur Panel2 seine Höhe anpasst
- ● Label3 (auf dem oberen SplitPanel (alias Panel1):
- ◦ .AutoSize.False, .Dock.Fill, .TextAlign.Center
- ● Groupbox3 (auf Panel2):
- ◦ .Dock.Fill
- ◦ .BackColor.Control, um die SplitContainer-BackColor zu überdecken
- ● TablelayoutPanel1 (auf Panel2):
- ◦ .Dock.Top
- ◦ innerhalb des TLP wird über die Zeilen und Spalten des TLP gelayoutet:
- ◦ 2 Zeilen, 2 Spalten
- ◦ beide Zeilen Percent 50%, also gleich hoch
- ◦ Column1: Absolute 98, also 98pix breit
- ◦ Column2: Percent 100%, also füllt die restliche Breite.
- Veränderungen der Breite des TLP, ob durch Form-Resizing, oder durch Betätigen des
- horizontalen Splitters bewirken also, dass sich Column2 anpasst, nicht aber Column1
- ● Richtextbox1:
- ◦ .Dock.Fill
- ● Tabpage2
- ● FlowLayoutPanel1:
- FlowlayoutPanel ist ein ContainerControl, in das man einfach andere Controls hineinschmeißen kann,
- und die werden dann im Grunde wie in Listbox aufgereiht präsentiert.
- Nachteil ist, dass die reingeworfenen Controls in ihren Abmaßen fix sein müssen, also zB kein Docking
- verwenden können,
- ◦ .Dock.Fill
- ● TableLayoutPanel2:
- ◦ .Dock.None
- ◦ nur eine Zeile und Spalte
- ● Button1:
- ◦ Anchor.None
- Dieser Trick bewirkt, dass der Button sich immer genau in der Mitte der TableLayout-Zelle zentriert.
- ● Button2 – Button5:
- beliebige TestControls zur Demonstration des Flow-Verhaltens des FlowlayoutPanels
- ● Tabpage3
- ● SplitContainer3:
- ● TablelayoutPanel3 (auf Panel1): 2 Columns, 3 Rows
- ◦ .Dock.Fill
- ◦ Column1: Absolute 52py
- ◦ Columns2: Percent 100%
- (also Spalte 2 folgt dem Sizing des TLP, Column1 ist fix)
- ◦ Row1: Absolute 25
- ◦ Row2 Absolute 25
- ◦ Row3 Percent 100%
- also nur Row3 folgt dem Sizing des TLP
- ● Label5+Label6:
- ◦ .Autosize.False, .Dock.Fill, .TextAlign.MiddleRight
- Text-Rechtsbündigkeit, um die Beschriftung den rechts davon liegenden Textboxen noch klarer
- zuzuordnen
- ● Textbox3 + Textbox4:
- ◦ .Dock.Fill
- ◦ .Multiline.False (einzeilige Textbox)
- einzeilige Textboxen haben ein spezifisches AutoSize-Verhalten: sie sind in Höhe fix
- ● Picturebox1:
- ◦ .Dock.Fill
- ◦ .ColumnSpan = 2
- Die Picturebox überspannt beide Spalten des TablelayoutPanels
- ◦ .Sizemode.Zoom
- das Bild wird komplett und unverzerrt zentriert in der Picturebox angezeigt.
- ● FlowlayoutPanel2 (auf Panel2):
- ◦ .Dock.Fill
- ● Panel1, Panel2:
- (diese Panels fassen jeweils eine Textbox zusammen mit einem Label zur Beschriftung)
- ● Jeweils Label:
- ◦ .Dock.Left, .TextAlign.MiddleRight
- ● jeweils Textbox:
- ◦ .Dock.Fill
- ● Picturebox2
- ● Groupbox4, darin Picturebox3
Ansicht "DokumentenGliederung"
Den Struktur-Aufbau eines Forms kann man sich wunderbar in der Ansicht "Menu-WeitereFenster-Dokumentengliederung" angucken – dort hat man alle Controls zur Ansicht, direkt zugreifbar, und kann sie sogar von einem Container in einen anneren verschieben:
