Benutzer-Werkzeuge

Webseiten-Werkzeuge


k18:k18.8:start

18.8 HBox und VBox

Die beiden Klassen HBox und VBox präsentieren Container, in denen die Objekte automatisch horizontal oder vertikal angeordnet werden:

A1

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.­

A1

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

EigenschaftDatentypBeschreibung
.AutoResize BooleanWenn wahr, dann passt sich die Größe der HBox an den Inhalt im Container an.
.IndentBooleanWenn 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.
.InvertBooleanWenn wahr, dann wird der Inhalt im Container nicht von links nach rechts sondern umgekehrt angeordnet.
.MarginBooleanWenn wahr, dann wird ein Zwischenraum zwischen dem Containerrand und den Elementen im Container eingefügt. Dieser Abstand beträgt Desktop.Scale (Pixel).
.PaddingIntegerEs wird ein Abstand von k Pixel (Default 0) zwischen dem Containerrand und den Elementen im Container eingefügt.
.SpacingBooleanWenn 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

EigenschaftDatentypBeschreibung
.AutoResize BooleanWenn wahr, dann passt sich die Größe der VBox an den Inhalt im Container an.
.IndentBooleanWenn wahr, dann wird das erste Element eingerückt. Die Einrücktiefe beträgt Desktop.Scale (Pixel).
.MarginBooleanWenn wahr, dann wird ein Zwischenraum zwischen dem Containerrand und den Elementen im Container eingefügt. Dieser Abstand beträgt Desktop.Scale (Pixel).
.PaddingIntegerEs wird ein Abstand von k Pixel (Default 0) zwischen dem Containerrand und den Elementen im Container eingefügt.
.SpacingBooleanWenn 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.

Download

k18/k18.8/start.txt · Zuletzt geändert: 20.06.2016 (Externe Bearbeitung)

Seiten-Werkzeuge