Inhaltsverzeichnis
18.8 HBox und VBox
Die beiden Klassen HBox und VBox präsentieren Container, in denen die Objekte automatisch horizontal oder vertikal angeordnet werden:
Abbildung 18.8.1: HBox (3) und VBox (1) in einem Container HSplit
Der Container (2) im Container HSplit (horizontaler Splitter) ist ein Panel ohne Rahmen und mit der Eigenschaft Panel.Arrangement = Arrange.Vertical und verhält sich somit wie eine VBox.
Abbildung 18.8.2: HBoxen und VBoxen sowie ein Panel mit speziellen Eigenschaften in einer Anwendung
- Der Container VBox (1) hat 4 vertikal angeordnete Container vom Typ HBox, in die jeweils ein (Text-)Label und eine Textbox eingefügt wurden.
- Die Quasi-VBox (2) hat nur zwei Container, aber auch vom Typ HBox. In der oberen HBox wurde ein Label eingefügt und in der unteren HBox eine Listbox, welche die Anhänge anzeigt.
- Der Container HBox (3) nimmt zwei Button und ein Panel auf, das durch eine spezielle Wahl seiner .Expand-Eigenschaft die beiden Button an den linken und rechten Rand zwingt.
- Die beiden Container-Komponenten HBox und VBox besitzen keinen Rand. Im Bild 18.8.2 ist aber die Lage der beiden Container im Container HSplit durch die gesetzte Hintergrundfarbe grau sichtbar gemacht worden.
- Die Größe der beiden Container VBox (1) und Quasi-VBox (2) im Container HSplit kann an den Inhalt der Anhänge zum Beispiel bei sehr langen Dateinamen angepasst werden. Dafür können Sie die graue Linie zwischen VBox (1) und Quasi-VBox (2) mit der Maus horizontal verschieben.
- Die beiden Container-Komponenten HBox und VBox besitzen keine speziellen Methoden oder Ereignisse.
18.8.1 Die Eigenschaften HBox
| Eigenschaft | Datentyp | Beschreibung |
|---|---|---|
| .AutoResize | Boolean | Wenn wahr, dann passt sich die Größe der HBox an den Inhalt im Container an. |
| .Indent | Boolean | Wenn wahr, dann wird das erste Element eingerückt. Die Einrücktiefe beträgt Desktop.Scale (Pixel). Die Richtung wird durch den Wert von .Invert festgelegt. |
| .Invert | Boolean | Wenn wahr, dann wird der Inhalt im Container nicht von links nach rechts sondern umgekehrt angeordnet. |
| .Margin | Boolean | Wenn wahr, dann wird ein Zwischenraum zwischen dem Containerrand und den Elementen im Container eingefügt. Dieser Abstand beträgt Desktop.Scale (Pixel). |
| .Padding | Integer | Es wird ein Abstand von k Pixel (Default 0) zwischen dem Containerrand und den Elementen im Container eingefügt. |
| .Spacing | Boolean | Wenn wahr, dann wird ein (horizontaler) Zwischenraum zwischen die Elemente im Container eingefügt. Dieser Abstand beträgt Desktop.Scale (Pixel). |
Tabelle 18.8.1.1: Übersicht Eigenschaften HBox
Die Eigenschaften der beiden Container HBox und VBox unterscheiden sich nur sehr gering und bei der VBox fehlt die Eigenschaft .Invert.
18.8.2 Die Eigenschaften VBox
| Eigenschaft | Datentyp | Beschreibung |
|---|---|---|
| .AutoResize | Boolean | Wenn wahr, dann passt sich die Größe der VBox an den Inhalt im Container an. |
| .Indent | Boolean | Wenn wahr, dann wird das erste Element eingerückt. Die Einrücktiefe beträgt Desktop.Scale (Pixel). |
| .Margin | Boolean | Wenn wahr, dann wird ein Zwischenraum zwischen dem Containerrand und den Elementen im Container eingefügt. Dieser Abstand beträgt Desktop.Scale (Pixel). |
| .Padding | Integer | Es wird ein Abstand von k Pixel (Default 0) zwischen dem Containerrand und den Elementen im Container eingefügt. |
| .Spacing | Boolean | Wenn wahr, dann wird ein (horizontaler) Zwischenraum zwischen die Elemente im Container eingefügt. Dieser Abstand beträgt Desktop.Scale (Pixel). |
Tabelle 18.8.2.1: Übersicht Eigenschaften VBox
18.8.3 Projekt EMail-Client
In diesem Projekt stehen nicht die Client-Funktionen im Mittelpunkt, sondern das Design der Komponenten auf dem Formular (IDE). Um die Container auf dem Formular so anzuordnen wie im Bild 18.8.2 sind einige Eigenschaften der verwendeten Container und deren Inhalte in spezieller Weise festzulegen. Diese Forderungen sollten erfüllt werden:
- Die Größe des Programmfensters sollte dynamisch verändern werden können (→ Vollbild)
- Alle drei (Haupt-)Container (HSplit, TextArea, HBox mit den 2 Button) werden vertikal angeordnet.
- Die Anzeige für die Anhänge sollte sich dynamisch vergrößern lassen (→ HSplit).
- In der HBox mit den 2 Button sollten die Button sowohl am linken als auch am rechten Rand im Container platziert werden (→ Panel als variables Zwischenelement)
Im nächsten Abschnitt sehen Sie nur den Ausschnitt aus dem Quelltext, der die o.a. Forderungen umsetzt:
Public Sub Form_Open() FMain.Center FMain.Arrangement = Arrange.Vertical FMain.Expand = False FMain.Margin = True FMain.Spacing = True ' Container HSplit HSplit1.Layout = [100, 0] ' Man sieht nach dem Programmstart die Box für die Anhänge zunächst nicht ' Container VBox links im Container HSplit vboxLeft.Margin = True ' Fester Abstand zwischen VBox-Rand und den 4 inneren HBoxen vboxLeft.Spacing = True ' Fester vertikaler Abstand zwischen den 4 inneren HBoxen hboxTo.Spacing = True ' Fester Abstand zwischen TextLabel und TextBox in der HBox (Empfänger) txlTo.W = 120 ' Feste Breite des TextLabels. Gilt für alle 4 TextLabel! txlTo.Alignment = Align.Right ' Text-Ausrichtung auf dem TextLabel ist "rechts" txbTo.Expand = True ' Die Weite der Textbox passt sich dynamisch an die Container-Weite von VBox an hboxCC.Spacing = True txlCC.W = 120 txlCC.Alignment = Align.Right txbCC.Expand = True hboxBCC.Spacing = True txlBCC.W = 120 txlBCC.Alignment = Align.Right txbBCC.Expand = True hboxSubject.Spacing = True lblSubject.W = 120 lblSubject.Alignment = Align.Right txbSubject.Expand = True ' Container rechts im Container HSplit ' vboxSubstitute ist ein Panel mit spezifischen Eigenschaftswerten (ohne Rand, Anordnung vertikal) vboxSubstitute.Border = Border.None ' Panel ohne Rand vboxSubstitute.Arrangement = Arrange.Vertical ' Vertikale Anordnung der 2 inneren Komponenten vboxSubstitute.Margin = True ' Fester Abstand zwischen VBox-Substitute und den zwei inneren HBoxen vboxSubstitute.Spacing = True ' Fester (vertikaler) Abstand zwischen den zwei inneren HBoxen lblAttachment.Alignment = Align.TopLeft ' Textanzeige in der linken, oberen Ecke hboxLIstBox.Expand = True ' Maximale Ausdehnung ListBox1.Expand = True ' Maximale Ausdehnung ListBox1.ScrollBar = Scroll.Both ' Komponente TextArea txaMailBody.Expand = True ' Füllt automatisch die Fläche, die HSplit und HBox (unten) frei lassen ' Container HBox unten hboxBottom.Height = 24 hboxBottom.Margin = False hboxBottom.Spacing = True panelSpace.Expand = True ' Schiebt die 2 Button an den linken bzw. an den rechten Rand des Containers End ' Form_Open()
Alle Farbwerte sind in der IDE gesetzt worden. Diese haben ja mit der Anordnung der Container und deren Inhalt nichts zu tun.