Layouts, Grids und responsive Gestaltung

Die Gestaltung einer Benutzeroberfläche gehört zu den zentralen Aufgaben moderner App-Entwicklung. Besonders herausfordernd wird es, wenn eine Anwendung gleichzeitig unter Windows, Android, iOS, macOS, Linux und im Web (WebAssembly) laufen soll – und sich dennoch auf allen Plattformen konsistent und nativ anfühlen muss. 

Die Uno Platform bietet dafür eine leistungsfähige Lösung. Sie basiert auf den Layout- und UI-Konzepten von WinUI beziehungsweise UWP und überträgt diese eins zu eins in eine Cross Plattform-Runtime. Entwickelnde erhalten so eine vertraute, XAML-basierte UI-Definition, die auf allen Zielplattformen zuverlässig funktioniert. Ein zentraler Bestandteil dieser UI-Definition sind die Layout-Container. Sie bestimmen, wie Steuerelemente im User Interface angeordnet, skaliert und ausgerichtet werden. 

Dieser Artikel gibt einen Überblick über alle wichtigen Layout-Container der Uno Platform und liefert Beispielcode für typische Szenarien.

Der Weg zu einem guten responsiven Layout: From Prototype to XAML

Ein gutes, responsives Layout entsteht nicht direkt im Code, sondern durch einen klar strukturierten Prozess, der Design, Technik und Produktanforderungen miteinander verbindet. Am Anfang steht ein UI-Prototyp, oft erstellt in Figma, Adobe XD oder einem vergleichbaren Design-Tool. Dieser visuelle Entwurf dient mehreren Zwecken gleichzeitig: Er schafft ein gemeinsames Verständnis der Anforderungen im Team, ermöglicht schnelle Iterationen und hilft, frühzeitig Usability-Probleme zu erkennen, bevor Entwicklungszeit investiert wird. 

Gerade in Cross-Plattform-Projekten ist es wichtig, dass Stakeholder und Designer verschiedene Gerätegrößen berücksichtigen – von breiten Desktop-Fenstern über Tablet-Ansichten bis hin zu kompakten Smartphone-Layouts. Ein guter Prototyp zeigt daher nicht nur ein Screenlayout, sondern definiert klare Regeln für Breakpoints, Spacing, Skalierung, Schriftgrößen, Komponentenverhalten und Priorisierung von Inhalten. 

Nach der Prototyp-Phase folgt üblicherweise ein Design-Review mit der Fachabteilung oder dem Auftraggeber. Ziel ist es, die Bedienabläufe zu validieren, die Relevanz einzelner Informationsbausteine zu klären und den Fokus auf Nutzungsanforderungen zu richten. Besonders wichtig ist an dieser Stelle die Frage, wie Inhalte auf kleineren Bildschirmen priorisiert werden sollen: Müssen Bereiche ein- und ausblendbar sein? Sollen Elemente gestapelt, umbrochen oder in Tabs verschoben werden? Diese strategischen Designentscheidungen beeinflussen unmittelbar die spätere XAML-Umsetzung. 

Steht das final abgenommene UI-Design, beginnt die technische Überführung in die Uno-Platform-Struktur. Ein bewährter Workflow besteht darin, das Design – insbesondere aus Figma – strukturiert in XAML zu importieren, wie es auch in der offiziellen Uno-Dokumentation demonstriert wird. Moderne Figma-Designs sind häufig bereits komponentenbasiert aufgebaut, wodurch sich Layoutbereiche gut in XAML-Container wie Grid, RelativePanel, StackPanel oder Toolkit-Controls übersetzen lassen. 

Während Designer primär visuell denken, denkt die Entwicklung bereits in Layout-Containern, Controls, Bindings und States. Ein strukturierter Importprozess stellt sicher, dass beide Welten zusammengeführt werden: Designkomponenten werden in nachvollziehbare XAML-Strukturen übersetzt, Farben und Typografien wandern in Resource Dictionaries, und wiederkehrende UI-Bausteine werden als User Controls oder Data Templates abstrahiert.

Für Responsivität nutzt man in Uno typischerweise den Visual State Manager und Adaptive Triggers, um Layouts bei bestimmten Breiten zu verändern. Während das Figma-Design Breakpoints vorgibt (zum Beispiel 600 px für Tablet, 1.024 px für Desktop), erfolgt in XAML die technische Umsetzung:

• Spalten und Reihen im Grid werden konfiguriert.
• Elemente werden horizontal neu angeordnet oder vertikal gestapelt.
• Bereiche werden ein- oder ausgeblendet.
• Schriften und Abstände werden dynamisch angepasst.
• Navigationsmuster ändern sich je nach Gerätetyp.

Durch diese Kombination aus Gestaltungsprinzipien, abgestimmter Designphase und präziser technischer Umsetzung entsteht ein robustes responsives Layout, das auf allen Plattformen ein konsistentes Nutzererlebnis liefert. Die Uno Platform bietet dafür nicht nur die technologischen Grundlagen, sondern durch ihre enge Nähe zum WinUI-Layoutsystem auch ein äußerst vorhersehbares, stabiles Verhalten. 

Nachfolgend geben wir einen Überblick über die Layout-Container, welche in der Uno-Plattform zur Verfügung stehen und damit die Basis für die Gestaltung der Screens und Dialoge bilden.

Das Fundament: XAML-Layout in der Uno Platform

Uno verwendet dieselben XAML-Konzepte wie WinUI. Das bedeutet:

• Deklarative UI-Definition.
• Komponenten und Container werden über Eigenschaften gesteuert.
• Layout erfolgt per Container.
• Dynamische UIs reagieren auf Größenänderungen.
• Styles, Templates und Visual States können das Layout ergänzen.

Besonders wichtig ist: Ein Layout, viele Plattformen – ohne zusätzlichen Code für spezifische Plattformen schreiben zu müssen. Damit ein plattformübergreifendes Layout funktioniert, braucht es die richtigen Container.

Der wichtigste Baustein: Grid

Das Grid ist der mächtigste und am häufigsten genutzte Layout-Container in der Uno Platform. Es erlaubt die exakte Definition von Zeilen und Spalten und damit komplexe, responsive Layouts. Wann wird das Grid verwendet?

• für Formulare
• für Dashboards
• bei Bereichen mit tabellenartigen Layout-Strukturen
• in Kombination mit anderen Layout-Containern

Der Grundaufbau geht aus dem folgenden Beispiel hervor:

<Grid Background="Beige">
     <Grid.RowDefinitions>
         <RowDefinition Height="*" />
         <RowDefinition Height="*" />
         <RowDefinition Height="2*" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*" />
         <ColumnDefinition Width="2*" />
     </Grid.ColumnDefinitions>
     <TextBlock
         Grid.Row="0"
         Grid.Column="1"
         HorizontalAlignment="Center"
         VerticalAlignment="Center"
         FontSize="20"
         Text="Titel" />
     <Button
         Grid.Row="1"
         Grid.Column="1"
         HorizontalAlignment="Center"
         VerticalAlignment="Center"
         Content="OK" />
</Grid>

Dieser Beispielcode ergibt die Darstellung in Bild 1.

Die typischen Eigenschaften des Grids sind:

• Auto: passt sich der Größe des Inhalts an
• *: füllt verbleibenden Raum
• Kombinationen aus festen, automatischen und relativen Werten

Das ergibt folgende Vorteile: Sehr gute Kontrolle und Anpassbarkeit und ein responsives Layout mit wenig Aufwand.

StackPanel – das einfache Linear-Layout

StackPanel ordnet Elemente entweder vertikal oder horizontal an. Es ist unkompliziert und effizient. Wann wird das StackPanel verwendet?

• Formularelemente
• einfache Listen
• Buttons in einer horizontalen Leiste
• Bereiche ohne komplexe Struktur

Auch dazu ein einfaches Beispiel:

<StackPanel Orientation="Vertical" Spacing="8">
     <TextBlock Text="Name" />
     <TextBox />
     <Button Content="Speichern" />
</StackPanel>

Es erfolgt eine Darstellung der Elemente untereinander (Bild 2).

Die Vorteile liegen klar auf der Hand: Sehr einfach und ideal vor allem für lineare Strukturen.

WrapPanel – fließende UI-Elemente

Das WrapPanel (Teil von Uno.Toolkit.UI) ordnet Elemente horizontal oder vertikal an und umbricht sie automatisch. 

<utu:WrapPanel Orientation="Horizontal" Spacing="6">
     <Button Content="Tag 1" />
     <Button Content="Tag 2" />
     <Button Content="Tag 3" />
 </utu:WrapPanel>

Der Vorteil ist eine automatische Anpassung an Bildschirmbreiten; damit ist das WrapPanel ideal für WebAssembly und Mobile-Apps zu verwenden. 

DockPanel – klassisches Desktop-Layout

Das DockPanel ist ebenfalls Teil von Uno.Toolkit. Das DockPanel ordnet Elemente an den Rändern an, ähnlich wie im traditionellen Desktop-Layout. Wir können es anwenden für:

• Header-Footer-Layouts
• Seitenleisten
• Navigationsbereiche

Ein Beispiel: 

<utu:DockPanel>
     <TextBlock Text="Header" utu:DockPanel.Dock="Top" />
     <TextBlock Text="Navigation" utu:DockPanel.Dock="Left" />
     <TextBlock Text="Inhalt" />
</utu:DockPanel>

Es ist ideal für komplexere Desktop-Anwendungen mit einer sehr klaren Layoutstruktur.

Canvas – absolute Positionierung

Das Canvas-Element ermöglicht die exakte Platzierung von Elementen mittels Koordinaten, beispielweise für Diagramme, Spieleszenen, absolute Positionierungen mit exakten Positionen. Ein Beispiel im Quellcode sieht wie folgt aus: 

<Canvas>
     <!--  Gesicht  -->
     <Ellipse
         Canvas.Left="20"
         Canvas.Top="40"
         Width="100"
         Height="100"
         Fill="Yellow"
         Stroke="Black"
         StrokeThickness="2" />
     <!--  Linkes Auge  -->
     <Ellipse
         Canvas.Left="45"
         Canvas.Top="70"
         Width="15"
         Height="15"
         Fill="Black" />
     <!--  Rechtes Auge  -->
     <Ellipse
         Canvas.Left="90"
         Canvas.Top="70"
         Width="15"
         Height="15"
         Fill="Black" />
     <!--  Mund  -->
     <Path
         Canvas.Left="50"
         Canvas.Top="100"
         Data="M 0,0 Q 25,30 50,0"
         Stroke="Black"
         StrokeThickness="3" />
</Canvas>

Als Ergebnis erhalten wir das in Bild 3 dargestellte nette Gesicht.

Die Vorteile sind eine vollständige Kontrolle über die Positionierung der Elemente. In responsiven Umgebungen (unterschiedliche Bildschirmgrößen und -auflösungen) ist das Canvas-Control als Layout-Container nur eingeschränkt geeignet. 

RelativePanel – flexibles, responsives Layout

Dieses Panel ist eine der modernsten Layoutoptionen. Die Elemente werden relativ zueinander positioniert:

• rechts von
• unterhalb
• ausgerichtet mit
• zentriert in

Wir können das RelativePanel gut für adaptive UIs, Formulare ohne Grid und responsive Apps nutzen. Ein Beispiel:

<RelativePanel>
     <TextBlock x:Name="Title" Text="Überschrift" />
     <Button Content="OK"
             RelativePanel.Below="Title"
             RelativePanel.AlignLeftWith="Title"/>
</RelativePanel>

Die Darstellung ist weniger starr als das Grid und damit gut geeignet für dynamische Layouts.

UniformGrid – überall gleich große Elemente

Dieser Layout-Container ist Teil des Uno.Toolkit. Er ist beispielsweise gut geeignet für Bildergalerien. Ein Beispiel:

<utu:UniformGrid Rows="2" Columns="3">
     <Button Content="1" />
     <Button Content="2" />
     <Button Content="3" />
     <Button Content="4" />
     <Button Content="5" />
     <Button Content="6" />
</utu:UniformGrid>

Border – das Layout-Utility

Border ist kein klassischer Container, erfüllt aber häufig Layout-Aufgaben in Bezug auf Padding, Hintergrund, Ausrichtung und Eckenradius.  Ein Beispiel:

<Border Padding="12" Background="#EEE" CornerRadius="8">
     <TextBlock Text="Hinweistext" />
</Border>

ItemsRepeater – modernes, performantes Listenlayout

Der ItemsRepeater ist ein Container, der Listen flexibel rendert. Er ist das moderne Gegenstück zu ListView und GridView. Wir können den ItemsRepeater für dynamische Listen, Virtualisierung und das eigene Design von Listenlayouts einsetzen, beispielsweise: 

Weitere UI-Layouts und Best Practices

<ItemsRepeater>
     <ItemsRepeater.Layout>
         <StackLayout Orientation="Vertical" />
     </ItemsRepeater.Layout>
</ItemsRepeater>

• ListView/GridView: Ideal für typische Listen, besitzen eigene Layoutsysteme.
• CarouselView (Uno.Toolkit): Swipebare Inhalte, ideal für mobile Szenarien.
• TabBar/NavigationView: Strukturieren die Navigation, nicht primär das Layout der Seite.

Ein professionelles Uno-Layout entsteht nicht allein durch das Beherrschen einzelner Container, sondern durch ein systematisches Vorgehen und die Anwendung bewährter Methoden. Ein zentraler Grundsatz besteht darin, den Containertyp immer abhängig vom jeweiligen Szenario zu wählen. Obwohl das Grid als mächtigster Layout-Container gilt, ist es nicht in jedem Fall die optimale Wahl. Für viele UI-Bereiche, insbesondere bei linearen Strukturen oder einfachen Formularen, genügt häufig ein StackPanel, das weniger Overhead erzeugt und die Lesbarkeit des Codes verbessert. 

Gleichzeitig sollte jedes Layout von Beginn an auf Responsivität ausgelegt sein. Mithilfe des Visual State Managers und der Adaptive Triggers ermöglicht die Uno Platform dynamische Anpassungen an unterschiedliche Bildschirmgrößen, sodass UIs auf Smartphones, Tablets und Desktop-Geräten gleichermaßen überzeugend funktionieren. Diese Trennung zwischen Designlogik und visuellem Verhalten macht es möglich, dieselbe XAML-Struktur flexibel für verschiedene Geräteklassen zu nutzen.

Darüber hinaus spielt die Performance eine entscheidende Rolle für professionelle Oberflächen. Komplexe oder unnötig tief verschachtelte Layout-Hierarchien sollten vermieden werden, da sie Mess- und Arrange-Durchläufe unnötig verlangsamen. Absolute Layouts auf Basis des Canvas sind ebenfalls nur dann sinnvoll, wenn sie tatsächlich benötigt werden – etwa für Animationen oder grafische Szenen. Für umfangreiche und dynamische Datenmengen empfiehlt sich aus Performance- und Virtualisierungsgründen konsequent der Einsatz des ItemsRepeater, der moderne, performante Listenstrukturen erlaubt. 

Ergänzend dazu bietet das Uno Toolkit wertvolle Zusatzkomponenten wie WrapPanel, UniformGrid oder DockPanel, die bestimmte Szenarien deutlich vereinfachen und das Layouten komplexer Oberflächen beschleunigen. Sie sind speziell darauf ausgelegt, typische Herausforderungen im Cross-Plattform-Design mit minimalem Aufwand zu lösen.

Nicht weniger wichtig ist ein professioneller Ansatz beim Testing. Da responsives Verhalten sehr stark von Größenänderungen abhängt, müssen Layouts nicht nur funktional, sondern auch visuell zuverlässig getestet werden. 

Fazit

Die Uno Platform bietet ein äußerst leistungsfähiges und flexibles Layoutsystem, das alle Möglichkeiten moderner UI-Frameworks vereint – und dies vollständig plattformübergreifend. Mit den Layout-Containern lassen sich strukturierte, performante und responsive Oberflächen erstellen. 

[1] Veikko Krypczyk, UI-Gestaltung mit Uno, dotnetpro 12/2025, Seite 114 ff.