Layout

Größe, Abstände und Position von Steuerelementen.

Das Layout betrifft Eigenschaften des Steuerelements oder des Containers, mit denen Folgendes festgelegt werden kann:

Größe und Abstände

Dem Layout jedes Web UI Steuerelements liegt das sogenannte CSS-Box-Model zugrunde. Demnach ist jedes Element eine Box mit den folgenden Merkmalen:

CSS-Box-Model (Border-Box)

Inhalt

Inhalt, kann weitere Elemente enthalten.

Beispiel: Das Steuerelement Label beinhaltet zwei Elemente: Symbol und TextBlock (in der Grafik als "Text" bezeichnet). Ein TextBlock beinhaltet nur den eigentlichen Text.


Padding

Abstand nach innen, wird durch die Eigenschaft "Padding" festgelegt. Das Padding ist transparent.

Border

Rahmen, wird durch die Eigenschaften "BorderRadius", "BorderStyle" und "BorderWidth" festgelegt.

Margin

Abstand nach außen, wird durch die Eigenschaft "Margin" festgelegt. Die Margin ist transparent.

Die Größe des Steuerelements wird über die Eigenschaften "Width" und "Height" festgelegt. In VisiWin wird das alternative CSS-Box-Modell (Border-Box) angewendet. Demnach legen die Eigenschaften "Width" und "Height" die Breite und Höhe der Box inklusive des Innenabstands und des Rahmens fest.

Width/Height

Legt die Breite/Höhe des Elements mitsamt der Innenabstände und des Rahmens fest. Wird die Größe des Steuerelements im Designer mit Hilfe der Maus manuell angepasst, werden die entsprechenden Werte in die Eigenschaften "Width"/"Height" übertragen. Möglich sind Angaben in Pixeln oder in Prozent der Breite/Höhe des übergeordneten Elements. Der Wert "auto" bedeutet, dass die Breite/Höhe des Elements von seinem Inhalt automatisch bestimmt wird.

Margin

Legt die äußeren Abstände des Elements für oben, rechts, unten und links fest. Die Werte werden in Pixeln oder in Prozent der Länge/Breite des übergeordneten Elements angegeben. Negative Werte sind erlaubt. Wird ein Hintergrund (Eigenschaft "Background") oder eine Hintergrundfarbe (Eigenschaft "BackgroundColor") für das übergeordnete Element (z. B. FlexLayout) festgelegt, dann ist der Hintergrund bzw. die Hintergrundfarbe durch die Margin hindurch sichtbar.

Padding

Legt die inneren Abstände zwischen dem Rahmen und dem Inhalt des Elements für oben, rechts, unten und links fest. Die Werte werden in Pixel oder in Prozent der Länge/Breite des übergeordneten Elements angegeben. Negative Werte sind nicht erlaubt. Wird ein Hintergrund (Eigenschaft "Background") oder eine Hintergrundfarbe (Eigenschaft "BackgroundColor") für das Steuerelement festgelegt, dann ist der Hintergrund bzw. die Hintergrundfarbe durch das Padding hindurch sichtbar.

MinWidth/MinHeight

Legt die Mindestbreite/Mindesthöhe des Steuerelements fest. Die Eigenschaft verhindert, dass das Element kleiner wird als in "MinWidth"/"MinHeight" angegeben. Daher hat die Eigenschaft nur dann eine Auswirkung, wenn sie größer ist als "Width"/"Height" oder "MaxWidth"/"MaxHeight". Möglich sind Angaben in Pixel oder in Prozent der Breite/Höhe des übergeordneten Elements. Negative Werte sind nicht erlaubt.

MaxWidth/MaxHeight

Legt die maximale Breite/Höhe des Steuerelements fest. Die Eigenschaft verhindert, dass das Element größer wird als in "MaxWidth"/"MaxHeight" angegeben. Daher hat die Eigenschaft nur dann eine Auswirkung, wenn sie kleiner ist als "Width"/"Height". Möglich sind Angaben in Pixel oder in Prozent der Breite/Höhe des übergeordneten Elements. Negative Werte sind nicht erlaubt.

Manuelle (absolute) Positionierung

Die folgenden Eigenschaften stehen in einem Steuerelement zur Verfügung, wenn es fest (absolut) positioniert wird, z. B. in einem AbsoluteLayout oder in einer ViewBox.

Left/Top

Legt den Abstand des Elements zum linken/oberen Rand des übergeordneten Elements fest (in Pixeln). Negative Werte sind erlaubt.

Bottom/Right

Legt den Abstand zum unteren/rechten Rand des übergeordneten Elements fest (in Pixeln). Negative Werte sind erlaubt.

Die Eigenschaften "Bottom"/"Right" werden beim Platzieren des Steuerelements auf dem AbsoluteLayout im Designer automatisch berechnet. Werden sie explizit (manuell) gesetzt, dann haben sie nur dann eine Auswirkung, wenn die Eigenschaften "Width"/"Height" des Steuerelements auf "auto" gesetzt sind und die Eigenschaft "MaxWidth"/"MaxHeight" und "MinWidth"/"MinHeight" die Eigenschaft "Width"/"Height" nicht überschreiben. In diesem Fall bekommt das Steuerelement die Größe, die durch die Angaben in "Left"/"Top" und "Bottom"/"Right" vorgegeben ist.

Beispiel: Die Breite/Höhe des Steuerelements TextBlock ist standardmäßig auf "auto" eingestellt. Beim Platzieren des Steuerelements auf einem AbsoluteLayout im Designer wird die Eigenschaft "Left"/"Top" automatisch festgelegt. Werden die Eigenschaften "Bottom" und "Right" manuell gesetzt, dann bekommt das Steuerelement die Größe, die durch die Eigenschaften "Left", "Top", "Bottom" und "Right" vorgegeben ist.

Flexible Vergrößerung und Verkleinerung

In einem FlexLayout können Steuerelemente den zur Verfügung stehenden Raum für sich einnehmen, damit kein Leerraum entsteht. Ist zu wenig Platz vorhanden, können sie ihre Größe reduzieren, um hineinzupassen.

Wird das Steuerelement auf einem FlexLayout platziert, dann stehen im Steuerelement folgende Eigenschaften zur Verfügung:

FlexBasis

Legt die Anfangsbreite oder die Anfangshöhe des Steuerelements fest, von der aus das Steuerelement wachsen oder schrumpfen darf.

FlexGrow

Legt den Faktor für die Vergrößerung des Steuerelements in einem FlexLayout fest, wenn freier Raum im FlexLayout vorhanden ist. Ist "FlexGrow" auf 0 eingestellt, dann wird das Steuerelement nicht vergrößert.

Wie sich die Einstellung in "FlexGrow" auf die Breite des Steuerelements auswirkt, wird am folgenden Beispiel demonstriert.

Ein FlexLayout enthält drei Steuerelemente vom Typ Button.

Das FlexLayout hat folgende Einstellungen:

Container

Width

Orientation

FlexLayout

800 px

Horizontal

Die im FlexLayout enthaltenen Steuerelemente haben folgende Einstellungen:

Steuerelement

Width

Margin

FlexGrow

Button1

160 px

0,0,0,0

1

Button2

160 px

0,0,0,0

2

Button3

160 px

0,0,0,0

1

Steuerelemente, bei denen die Eigenschaft "FlexGrow" gesetzt ist (ungleich 0), versuchen den freien Raum untereinander aufzuteilen. Dazu wird zunächst der zu verteilende Raum ermittelt:

Der freie Raum wird nun auf die Steuerelemente gemäß ihrer Einstellung der Eigenschaft "FlexGrow" verteilt. So viel Raum bekommt jedes Steuerelement zu seiner Breite dazu:

Für die endgültige Breite des Steuerelements wird die zusätzliche Breite zur eingestellten Breite dazuaddiert:

FlexShrink

Legt fest, wie stark das Steuerelement im Vergleich zu den anderen Steuerelementen in einem FlexLayout schrumpfen darf, wenn die Breite des FlexLayout nicht für alle Steuerelemente ausreicht. Ist "FlexShrink" auf 0 eingestellt, dann wird die Breite des Steuerelements nicht verringert.

Beispiel: Die Berechnung der Schrumpfung lehnt sich an das Beispiel für "FlexGrow" an. Das FlexLayout hat in diesem Beispiel weniger Platz zur Verfügung (400 px statt 800 px). Es ist also zu wenig Raum für die Steuerelemente im FlexLayout vorhanden.

Der fehlende Raum wird nun auf die Steuerelemente gemäß ihrer Einstellung der Eigenschaft "FlexShrink" verteilt:

Für die endgültige Breite des Steuerelements wird die fehlende Breite zur eingestellten Breite dazuaddiert:

Umgang mit überschüssigem Inhalt

Bei einigen Containern (FlexLayout, Region, CardContent) kann eingestellt werden, was mit dem überschüssigen Inhalt des Containers passiert, wenn die Breite/Höhe eines Containers begrenzt ist. Der Umgang mit diesem überschüssigen Inhalt wird über die folgende Eigenschaft des Containers festgelegt:

Overflow

Legt fest, ob und wie überschüssiger Inhalt dargestellt wird.