Layout und Stil

App Studio bietet für das Layout der Apps umfangreiche Möglichkeiten der Anpassung, wobei verschiedene Container-Steuerelemente und Formgebungsmöglichkeiten für jedes Steuerelement verwendet werden

Anordnung Ihrer Steuerelemente

Customized page layout can be easily created using Container Layout control.

Steuerelemente können innerhalb einer Seite oder eines Containers unter Verwendung der Optionen Ausrichtung und Layout angeordnet werden.

Seiten- und Containersteuerelemente können die Position der darin enthaltenen Steuerelemente bestimmen, indem die Attribute „Richtung“ (Vertikal/Horizontal) und „Ausrichtung“ im Abschnitt „Layout“ verwendet werden. Standardmäßig reihen sich Steuerelemente in einer Zeile auf. Wenn die Eigenschaft „Umbrechen zulassen‟ ausgewählt ist, reihen sich die Steuerelemente bei Bedarf in mehreren Zeilen auf.

When enabled, the Allow wrapping property gets applied if the controls inside the container cannot fit in a line.

Steuerelemente in Containern können die übergeordnete Ausrichtung überschreiben, indem sie ihre eigene Ausrichtungsoption verwenden. Um die übergeordnete Ausrichtung standardmäßig zu verwenden, müssen Sie die ausgewählten Ausrichtungssymbole umschalten, damit die betreffende Ausrichtung deaktiviert wird.

Wenn eine Gruppe von Steuerelementen nach einer bestimmten Formation angeordnet werden soll, platzieren Sie sie in einem Container und konfigurieren Sie das Layout und die Ausrichtung des Containers.

Ändern der Größe Ihrer Steuerelemente

Die Größe der Steuerelemente wird standardmäßig automatisch angepasst. Mit „Auto‟ kann das Steuerelement die Größe des enthaltenen Inhalts übernehmen. Wenn beispielsweise die Breite und Höhe eines Schaltflächen-Steuerelements auf „Auto‟ festgelegt sind, wird die Größe der Schaltfläche basierend auf dem Text in der Schaltfläche vergrößert/verkleinert.

Bestimmte Höhe und Breite können ebenfalls festgelegt werden. Min. Breite/Höhe und Max. Breite/Höhe sind unter Mehr (...) im Abschnitt Größe verfügbar.

Die Maßeinheiten sind %, px (Pixel) und em (relativ zur Schriftgröße des Elements. 3em bedeutet z. B. das 3-Fache der Größe der aktuellen Schriftart).

Maßeinheiten auswählen

Maßeinheiten können ausgewählt werden, indem sie entweder aus der Dropdownliste der Einheiten ausgewählt werden, oder indem die Einheiten direkt über die Tastatur eingegeben werden und die Eingabetaste gedrückt wird. Beispielsweise kann eine Breite von 50 % ganz einfach festgelegt werden, indem man 50 % eingibt.

Wenn keine Maßeinheiten angegeben sind, wird das System standardmäßig Pixel (px) festlegen.

Schriftart anpassen

Sie können ändern, wie ein Text in Ihrer App angezeigt wird, indem Sie die Attribute Schriftfamilie, Schriftgröße, Schriftfarbe und Schriftart (Fett, Kursiv, Unterstrichen) anpassen.

Tipp:

Sie können zwischen RGB-, HEX- und HSL-Farbe wechseln, indem Sie auf die Pfeile neben dem Farbwert klicken.

Arbeiten mit Rahmen

Der Abschnitt „Rahmen‟ verfügt über drei Eigenschaften:

• Rahmenstärke
• Rahmenfarbe
• Eckenradius.

Pixel sind die Maßeinheit für diese Attribute.

Kreisförmige Schaltflächen mit Eckenradius

Kreisförmige Schaltflächen können durch Ändern der Eigenschaft „Eckenradius“ erstellt werden.

Einrichten von Abständen bei Steuerelementen

Die Abstände bei Steuerelementen und Containern können mithilfe der Optionen Seitenränder und Abstände erstellt werden.

Mit der Option „Seitenränder“ wird der Abstand um die Steuerelemente eingerichtet.

Mit der Option „Abstände“ wird ein Freiraum zwischen dem Steuerelement und dem darin enthaltenen Inhalt eingerichtet.

Für Containersteuerelemente sind beide Optionen (Seitenränder und Abstände) verfügbar, während die meisten anderen Steuerelemente nur die Option „Seitenränder“ zur Verfügung haben.

Sowohl im Abschnitt „Seitenrand‟ als auch im Abschnitt „Abstand‟ gibt es die Möglichkeit, die Verknüpfung mit den Werten „Oben/Unten“ und „Links/Rechts“ aufzuheben und sie unabhängig einzurichten.

Ändern der Hintergrundfarbe

Sie können die Hintergrundfarbe Ihrer Steuerelemente mithilfe eines der drei Farbmodelle ändern:

• RGB

• HEX

• HSL

  Klicken Sie dazu auf die Pfeile neben den Farbwerten.