Responsives Design mit Containern

Einführung in Power Apps

Luise Freese

Azure & Power Platform Architect

Warum responsive?

Dieselbe App öffnet auf Phone, Tablet, Laptop
Ein fixes Layout schneidet ab auf kleinen Screens, wirkt verloren auf großen
Responsive = das Layout passt sich an

Phone, Tablet und Laptop zeigen dieselbe App, die ihr Layout von ein- auf mehrspaltig anpasst.

Moderne Layout-Container

Illustration vergleicht vertikale und horizontale Layout-Container mit gestapelten vs. nebeneinander liegenden Kindersteuerelementen.

Vertikaler Layout-Container stapelt Kinder von oben nach unten
Horizontaler Layout-Container ordnet Kinder von links nach rechts
Moderne Steuerelemente fließen in den verfügbaren Raum

Flexible Breite und Höhe

FlexibleWidth und FlexibleHeight
An: Das Steuerelement dehnt sich auf den Container aus
Aus: Das Steuerelement behält seine feste Größe

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width

LayoutMinWidth und LayoutMinHeight

Phone vs. Tablet zeigen LayoutMinWidth als Breakpoint, an dem das Layout von einspaltig zu Seitenleiste plus Inhalt wechselt.

Ein Container braucht genug Platz für ein sauberes Layout
LayoutMinWidth = die kleinste Breite, bevor er umsortiert
Löst unterschiedliche Layouts für Phone vs. Tablet aus

Anzeigeeinstellungen der App

Settings → Display legt Ausrichtung und Größe fest
App-Layout: Fixed zoomt auf ein Seitenverhältnis, Responsive passt sich dem Screen an
Teste bei mehreren Größen

Power Apps Studio: Einstellungsdialog auf dem Tab Display mit Optionen für Layout, Ausrichtung und Canvas-Größe

Die vordefinierten Layouts

Echter Screenshot des Flyouts „New screen" in Power Apps Studio mit vordefinierten Layoutvorlagen: Blank, Split screen, Sidebar, Header and footer, Approval request und Welcome screen, jeweils mit kleiner Vorschau

+ New screen bietet vorgefertigte Layout-Vorlagen
Sidebar, Header and footer, Split screen – bereits responsive
Empfohlener Startpunkt für deine erste responsive App

Was du bauen wirst

Steuerelemente in einen Layout-Container packen · Zwischen Gerätegrößen wechseln · Sehen, wie die App reagiert

Illustration einer App auf Phone, Tablet und Laptop, bei der sich das Galerie-Layout an jede Bildschirmgröße anpasst.

Lass uns üben!

Einführung in Power Apps