Adaptives Design mit der Uno Platform

Adaptive User Interfaces sind heute unverzichtbar, um Anwendungen nahtlos über Geräteklassen hinweg nutzbar zu machen. Die Uno Platform bietet dafür einen modernen, XAML-basierten Ansatz, der plattformübergreifende Adaptivität erstmals konsistent und wiederverwendbar ermöglicht. Dieser Artikel zeigt, wie Entwickler mit Visual States, Breakpoints und Uno-spezifischen Werkzeugen flexible und performante UIs realisieren, und vertieft damit Aspekte des Leitartikels „UI-Gestaltung mit Uno“ [1] aus der dotnetpro-Ausgabe 12/2025. 

In modernen Multi-Device-Umgebungen reicht ein statisches UI-Konzept längst nicht mehr aus. Nutzer erwarten heute, dass Anwendungen sich nahtlos an unterschiedliche Bildschirmgrößen, Interaktionsformen und Nutzungsszenarien anpassen – vom Smartphone über Tablet und Desktop bis hin zu WebAssembly-basierter Ausführung im Browser. Diese Vielfalt stellt Entwickler vor die Herausforderung, ein konsistentes Nutzererlebnis bereitzustellen, ohne für jede Plattform eigene Oberflächen entwerfen und pflegen zu müssen. Genau hier gewinnt Adaptivität an Bedeutung: Sie ermöglicht, dass Layouts, Navigationsstrukturen und Bedienelemente dynamisch auf verfügbare Fläche und Eingabemethoden reagieren. 

Die Uno Platform bietet dafür einen besonders effizienten Ansatz, weil sie auf dem WinUI/XAML-Modell aufbaut und es konsequent auf alle relevanten Plattformen überträgt. Statt separate UI-Implementierungen zu erstellen, können Entwickler ein einziges, deklaratives Interface definieren, das sich mittels Breakpoints, Visual States und plattformspezifischen Erweiterungen automatisch anpasst. Dadurch entsteht eine robuste Grundlage für moderne Cross-Plattform-Anwendungen, die sowohl konsistent als auch optimal auf die jeweilige Nutzungssituation zugeschnitten sind.

Adaptive Oberflächen in Uno

Adaptive Oberflächen bilden in der Uno Platform die Grundlage dafür, Benutzeroberflächen nicht nur skalierbar, sondern wirklich kontextspezifisch anzupassen. Während responsive Layouts primär proportional reagieren – etwa indem Spalten automatisch breiter oder schmaler werden –, geht das adaptive UI einen Schritt weiter: Hier werden ganze Layoutzustände gewechselt, sobald bestimmte Bedingungen erreicht sind (Bild 1).

Diese Bedingungen werden über Breakpoints definiert, die festlegen, ab welcher Fenster- oder Displaybreite ein alternativer Zustand aktiviert wird. In Uno erfolgt das wie in WinUI mithilfe von AdaptiveTrigger, der automatisch den passenden Visual State auswählt. Ein typisches Beispiel ist der Wechsel zwischen einer mobilen, reduzierten Navigation und einer Desktop-Ansicht mit dauerhaft sichtbarem Menü. In Uno lässt sich das über den Visual State Manager abbilden, der alternative Darstellungsvarianten in XAML definiert. Die Logik besteht aus zwei Teilen: einem Trigger (Wann wird umgeschaltet?) und den Settern (Wie verändert sich das Layout?). 

Listing 1 zeigt an einem einfachen Beispiel das Prinzip (Auszug).

Wie in Bild 2 zu sehen ist, definiert der Breakpoint aus Listing 1 bei 800 Pixeln, ab wann das Layout in eine breitere Desktop-Variante wechselt. Die schmale Ansicht verwendet ein Overlay-Menü, während die breite Ansicht das Menü fixiert darstellt. 

Damit ist das UI nicht nur responsiv im Sinne dynamischer Größenanpassung, sondern tatsächlich adaptiv, weil Inhalte und Interaktionsmodelle strukturell verändert werden. Auch gerätespezifische Unterschiede lassen sich abbilden. Klassische „Device Families“ existieren in Uno nicht, stattdessen werden plattformspezifische Varianten über Conditional XAML oder API-Checks eingebunden. So kann beispielsweise unter WebAssembly (Web-App) eine alternative Navigation angezeigt werden:

<wasm:WasmWebView x:Name="BrowserSpecificContent" />

Durch das Zusammenspiel dieser Konzepte lassen sich Oberflächen gestalten, die nicht nur skalieren, sondern sich strukturell anpassen. Ein einziges XAML-Interface kann damit sowohl kompakt und touchfreundlich auf kleinen Displays erscheinen als auch großzügig und mausoptimiert auf breiten Bildschirmen. Diese Form der Adaptivität bildet die Grundlage für konsistente und dennoch kontextsensitiv optimierte Anwendungen, die auf allen Plattformen der Uno Platform überzeugen.

Die Uno Platform stellt eine Reihe unterschiedlicher Werkzeuge bereit, um adaptive Benutzeroberflächen konsistent und plattformübergreifend umzusetzen. Grundlage bildet das XAML-basierte Layoutsystem, das aus WinUI stammt und damit auf bewährten Strukturen wie Grid, StackPanel oder RelativePanel aufbaut. Das RelativePanel ermöglicht zudem freie, relationale Positionierungen, was gerade bei variierenden Bildschirmformaten Vorteile bringt.

Listing 2 zeigt ein Beispiel-Grid mit adaptiver Sidebar per Visual State Manager.

Das Beispiel in Listing 2 verwendet ein dreispaltiges Grid, bei dem die dritte Spalte eine Sidebar repräsentiert. Über den Visual State Manager wird die Breite dieser Spalte dynamisch angepasst: Auf schmalen Bildschirmen wird die Sidebar vollständig ausgeblendet, indem ihre Breite auf 0 gesetzt wird, während sie auf großen Displays mit einer festen Breite von 300 Pixeln sichtbar bleibt (Bild 3). 

Der Wechsel erfolgt automatisch durch den AdaptiveTrigger, der bei einer Mindestbreite von 900 Pixeln in den breiten Zustand umschaltet. Somit entsteht ein flexibles Layout, das mobile und Desktop-Darstellungen elegant in einer einzigen XAML-Struktur vereint.

Praktische Umsetzung adaptiver UIs

Die praktische Umsetzung adaptiver Oberflächen in der Uno Platform beginnt mit der bewussten Entscheidung, ein Layout nicht nur flexibel, sondern zustandsabhängig zu gestalten. Ziel ist, das UI so aufzubauen, dass es sich strukturell an unterschiedliche Geräte, Eingabemethoden und Bildschirmgrößen anpasst. Dabei geht es weniger um einzelne Control-Anpassungen, sondern um das Zusammenspiel mehrerer Komponenten, die je nach Kontext unterschiedliche Rollen übernehmen. Dieser Abschnitt zeigt, wie ein durchgängiges adaptives Layout realisiert werden kann – von der Navigation über die Inhaltsbereiche bis zu plattformspezifischen Feinheiten.

Ein zentrales Muster ist die Trennung von Navigation und Content, wobei die Navigation je nach Gerätetyp unterschiedlich präsentiert wird. Auf Smartphones und schmalen Layouts wird sie meist über das Overlay einer SplitView oder einer NavigationView geöffnet, während sie auf Desktop-Systemen permanent sichtbar bleibt. Tablet-Layouts bewegen sich oft in der Mitte: Sie profitieren von erweiterten Inhalten, behalten aber mobile Interaktionsmuster bei. Uno erlaubt diese Übergänge mit wenigen deklarativen Visual States, das heißt ohne komplexe Logik im Code-behind.

Auch das Verhalten einzelner Controls lässt sich adaptiv gestalten. Eine NavigationView kann beispielsweise auf großen Bildschirmen im Expanded-Modus dargestellt werden, während sie auf mobilen Geräten in den kompakten Modus wechselt. Buttons, Listen und andere UI-Elemente können je nach Displaygröße zusätzliche Beschriftungen, Icons oder Abstände nutzen. Unter WebAssembly kommt zusätzlich der Aspekt ins Spiel, dass Layouts manchmal enger gefasst werden müssen, weil Browserfenster häufiger dynamisch skaliert werden. Durch die State-basierten Mechanismen bleiben solche Anpassungen übersichtlich und gut wartbar.

Neben Größe und Interaktionsmodell spielt die Plattform selbst eine Rolle. Unter Windows stehen umfangreiche Eingabeformen (Maus, Tastatur, Touch) parallel zur Verfügung, während mobile Plattformen stark auf Touch fokussiert sind. Für Uno-Entwickler bedeutet das: Layouts sollten sowohl große Touch-Ziele unterstützen als auch effiziente Mausnavigation. Zudem können plattformspezifische Controls oder Features über Bedingungs-XAML eingebunden werden, etwa WebView-Varianten oder native Datei-Dialoge. Diese Unterschiede lassen sich elegant innerhalb einer einzigen XAML-Datei unterbringen, ohne dass die gesamte Logik verzweigt werden muss. Im Zusammenspiel entsteht eine adaptive Oberfläche, die nicht nur skaliert, sondern „versteht“, in welchem Kontext sie genutzt wird. Ein und dieselbe Page verhält sich damit auf einem Smartphone kompakt und fokussiert, auf einem Tablet ausgewogen und auf einem Desktop großzügig und navigationsorientiert und im WebAssembly-Umfeld flüssig und browserfreundlich. Die folgende Beispielstruktur zeigt, wie diese Konzepte in Uno (XAML) ineinandergreifen.

Listing 3 zeigt ein Beispiel eines vollständig adaptiven Layouts mit NavigationView und Visual States:

Das Codebeispiel aus Listing 3, dargestellt in Bild 4, zeigt ein umfassend adaptives Layout:

• Mobile: Kompakte Navigation, Overlay-artiges Verhalten, maximale Nutzung des verfügbaren Raums.
• Tablet: Hybridmodus, etwas mehr Platz, aber weiterhin kompakt.
• Desktop: Großflächige Darstellung mit dauerhaft geöffneter Navigation.
• WebAssembly: Verhält sich automatisch entsprechend der Fensterbreite, zusätzlich können WASM-spezifische Controls integriert werden.

Durch dieses Muster lassen sich alle gängigen Zielplattformen abdecken, ohne redundante XAML-Strukturen zu erzeugen.

Best Practices und Fazit

Bei der Entwicklung adaptiver Benutzeroberflächen in der Uno Platform zahlt sich eine klare Strukturierung von Layouts und Visual States aus. Empfehlenswert ist es, Breakpoints bewusst zu wählen und nicht zu viele Zustände zu definieren, um die Wartbarkeit zu sichern. Statt komplette Layouts zu duplizieren, sollte man gezielt einzelne Eigenschaften wie Sichtbarkeit, Abstände oder Spaltenbreiten ändern. Controls wie NavigationView oder SplitView bieten bereits integrierte Modi für unterschiedliche Gerätegrößen und sollten bevorzugt genutzt werden. 

Insgesamt ermöglicht die Uno Platform ein konsistentes, modernes UI-Erlebnis über alle Geräteklassen hinweg. Durch die Kombination aus XAML-Layouts, Visual States und optionalen Plattformanpassungen entsteht ein flexibles, robustes System, das sich nahtlos an wechselnde Nutzungskontexte anpasst. Adaptive UIs werden so nicht nur zu einer technischen Möglichkeit, sondern zu einem integralen Bestandteil des Cross-Plattform-Designs, der Entwicklerteams deutlich entlastet und Anwendern ein hochwertiges Nutzungserlebnis bietet. 

Hinweis: Der vollständige Quellcode zu den Beispielen steht auf der Website des Autors zum Download bereit. 

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