Mit der zunehmenden Vielfalt an Bildschirmgrößen und Formfaktoren gewinnt Responsive Design in Power Apps Canvas Apps immer mehr an Bedeutung. Container ermöglichen es, Elemente flexibel anzuordnen und an verschiedene Ansichten anzupassen. In diesem Artikel zeigen ich, wie Sie Container in Canvas Apps nutzen, um adaptive Layouts zu erstellen. Wir gehen dabei insbesondere auf das Verschachteln von Containern, die wichtigsten Eigenschaften und das Ausrichten von Inhalten ein.
1. Überblick: Container-Typen in Canvas Apps
Power Apps bietet zwei Haupttypen von Container-Steuerelementen:
- Horizontaler Container
Elemente werden nebeneinander angeordnet. - Vertikaler Container
Elemente werden untereinander angeordnet.
Beide Container unterstützen responsive Eigenschaften wie relative Breiten und automatische Umbrüche.
Zur besseren Veranschaulichung habe ich eine App mit dem Layout „Reaktionsfähig“ erstellt.
1. Power Apps Portal -> Erstellen -> „Mit einem leeren Canvas beginnen“ -> „Reaktionfähig“
2. Verschachtelung von Containern für Responsive Design
Die Stärke von Containern zeigt sich besonders beim Verschachteln. So bauen Sie ein flexibles Raster auf:
- Äußerer Container
- Typ: Vertikal
- Füllt die gesamte Bildschirmhöhe (Height = Parent.TemplateHeight)
- Legt den Hauptfluss von Kopf- zu Fußzeile fest.
- Innerer Container
- Typ: Horizontal
- Enthält z. B. Navigation, Hauptinhalt und Sidebar
- Width der Kinder-Container wird über FillPortion gesteuert.
- Weitere Unter-Container
- Innerhalb des Hauptinhalts können Sie erneut mit vertikalen/ horizontalen Containern arbeiten, z. B. für Kartenraster oder Formulare.
VertContainer (Full Screen)
- Header (fixed height)
- HorizContainer (FillPortion: 1)
- VertContainer (Nav, FillPortion: 1)
- VertContainer (Main Content, FillPortion: 3)
- VertContainer (Sidebar, FillPortion: 1)
- Footer (fixed height)
3. Eigenschaften der Container
Damit Ihre verschachtelten Container wie gewünscht reagieren, sind folgende Eigenschaften zentral:
| Eigenschaft | Beschreibung |
| Width/Height | Kann in absoluten Pixeln oder relativ via Parent.Width * 0.x angegeben werden. |
| FillPortion | Definiert anteilige Verteilung des freien Raums unter Geschwistern. |
| Padding | Innenabstand zwischen Container-Rand und seinen Kindern. |
| Gap | Abstand zwischen den Kind-Elementen (Spacing). |
| Wrap | (Horizontaler Container) Bestimmt, ob Kinder in die nächste Zeile umbrechen. |
Tipp: Verwenden Sie relative Breiten (z. B. Width = Parent.Width * 0.25), wo feste Pixel unflexibel wären.
4. Ausrichten von Inhalten
Container bieten Einstellungen zum Ausrichten ihrer Kinder:
- Align
Legt die horizontale Ausrichtung fest: Start, Center, End, Stretch. - Justify
Legt die vertikale Verteilung fest: Start, Center, End, Between, Around.
5. Beispiel aus der Praxis
Wie im Menüpunkt 1 beschrieben, ist eine Responsive Design App entstanden. Der Ausgangspunkt als Struktur sieht wie folgt aus:
Der Screen besteht aus einem Hauptcontainer, dieser ist in drei Untercontainer unterteilt.
In dem auf dem Screenshot markierten Container „MainContainer1“ soll ein weiterer Container mit Steuerelementen versehen und diese ausgerichtet werden.
Schritt 1: Untercontainer hinzufügen
o MainContainer1 markieren -> Einfügen -> Vertikaler Container
o Container1 -> Eigenschaft: „Im Container ausrichten“ -> Anfang -> Breite -> 200
o Hiermit wird erreicht, dass der Container links steht und eine anteilige Breite von 200 Pixel einnimmt.
Schritt 2: Steuerelemente hinzufügen und konfigurieren
o Einfügen -> „Schaltfläche“
o Sie soll die gesamte Breite des hinzugefügten Containers einnehmen, also klick auf die Schaltfläche -> „Im Container ausrichten“ -> „Gestreckt“
o Nun wird eine weitere Schaltfläche hinzugefügt
o Sie steht unmittelbar darunter, ohne Abstand und muss entsprechend wie beschreiben „gestreckt“ werden.
Wie lässt es sich so einstellen, dass eine Schaltfläche unten und die andere unten stehen, oder zentriert werden?
o Hierfür stehen die Eigenschaften des Containers zur Verfügung -> „Blocksatz“ bzw. „Zentrieren“
o Je nach Einstallung steht bei jetziger Einstellung eine Schaltfläche oben und die andere unten
Ist es erforderlich noch etwas detaillierter Objekte auszurichten, empfiehlt es sich zwei Container untereinander zu platzieren.
o Container markieren -> „…“ -> Kopieren und im Container Main -> „Einfügen“
Nun lassen sich die Objekte in zwei untereinander stehenden Containers besser handhaben und formatieren.
o Kopierten Container zwei markieren -> „Füllabschnitte“ -> 2 eingeben
o Damit verändert sich die Verteilung, Container 1 nimmt 1 von 3 Füllabschnitten ein und der Container 2 nimmt 2 von 3 Füllabschnitten ein.
Somit lassen sich nun die zwei Container filigraner und unabhängiger formatieren.
o Container 2 -> Bloksatz -> „Zentrieren“
o Eigenschaft „Lücke“ -> 10 sorgt z.B. für einen Abstand der beiden Schaltflächen zueinander.
Das Endresultat sieht dann entsprechend so aus:
Auf diese oder ähnliche Weise kann alles individuell erstellt und konfiguriert werden.
6. Best Practices
- Kombinieren Sie FillPortion und relative Maße:
Nutzt flexible Anteile für Layouts, die sich dynamisch anpassen. - Vermeiden Sie zu viele Ebenen:
Jeder weitere Container erhöht die Komplexität und kann die Performance beeinträchtigen. - Testen Sie auf allen Zielgeräten:
Simulieren Sie verschiedene Auflösungen im Power Apps Studio und auf realen Geräten. - Nutzen Sie Variablen für Abstände:
Ein globales Set an Padding- und Gap-Variablen erleichtert Anpassungen.
Fazit
Container sind das Herzstück moderner, responsiver Canvas Apps in Power Apps. Durch verschachtelte Container, relative Maße und gezielte Ausrichtungs-Eigenschaften schaffen Sie flexible und skalierbare Oberflächen, die auf jedem Gerät überzeugen. Beginnen Sie am besten mit einfachen Layouts und steigern Sie schrittweise die Komplexität, um Performance im Blick zu behalten.
Viel Erfolg beim Experimentieren!