© prettyboy80/Shutterstock.com
Modernes WinUI - Teil 4

Cross-Platform-Apps mit der Uno Platform


WinUI 3 ist die native Bibliothek zum Entwickeln von Windows-10-Anwendungen. Das Schreiben von effizientem Code in C# und XAML begeistert viele Entwickler an WinUI 3 und hat sich bereits bei Anwendungen bewährt, die auf der Windows Presentation Foundation (WPF) und der Universal Windows Platform (UWP) erstellt wurden. Doch was macht man, wenn die Anwendung neben Windows auch auf anderen Plattformen laufen soll?

Mit WinUI 3 [1] entkoppelt Microsoft das native UWP UI Framework von Windows 10 und stellt es als NuGet-Paket zur Verfügung. WinUI 3 ist somit das native UI Framework für Anwendungen unter Windows 10. Mit WinUI 3 erstellte Applikationen lassen sich mit C#, XAML und .NET entwickeln, können jedoch nur auf Geräten ausgeführt werden, auf denen Windows 10 installiert ist. Doch was, wenn eine neue Unternehmensanwendung nicht nur auf dem Windows-Desktop, sondern auch auf macOS und im Web, gegebenenfalls zusätzlich als App unter iOS und Android ausführbar sein soll? Ist dann WinUI 3 als Technologie ausgeschlossen? Nein, denn genau hier kommt das Open-Source-Projekt namens Uno Platform [2] ins Spiel.

Die Uno Platform

Die Uno Platform ist ein professionell unterstütztes Open-Source-Projekt, das auf GitHub gehostet wird [3]. Mit Uno lassen sich Anwendungen für Windows, MacOS, iOS, Android und das Web mit einer einzigen, UWP-/WinUI-basierten Codebasis via C# und XAML entwickeln. Das bedeutet unter anderem, dass man sich nicht mehr entscheiden muss, ob man eine Desktop- oder eine Webanwendung baut. Mit Uno wählt man einfach zwischen C# oder XAML und erhält eine Cross-Platform-Anwendung. Um das zu verwirklichen, baut Uno auf WebAssembly und Xamarin auf.

Die Uno-Architektur

Abbildung 1 zeigt die Architektur der Uno Platform. Im oberen Bereich sind von links nach rechts die unterstützten Plattformen Windows, Web, MacOS/iOS und Android aufgelistet. Darunter ist der in C# und XAML erstellte Anwendungscode als Querbalken zu sehen. Da dieser Code auf UWP/WinUI basiert, lässt er sich direkt in eine UWP-, respektive eine WinUI-Anwendung kompilieren, die unter Windows 10 läuft. Für die anderen Plattformen wird die Mono-Laufzeit, eine Variante der .NET-Laufzeitumgebung, verwendet. Im Fall der Webanwendung wird der UI-basierte XAML-Code automatisch in HTML und CSS übersetzt. Uno stellt dabei entsprechende CSS-Klassen zur Verfügung, damit die WinUI-Anwendung auch im Browser gleich aussieht. Der geschriebene und kompilierte C#-Code wird mit Hilfe der WebAssembly-basierten Mono Runtime direkt im Browser ausgeführt.

Diese auf WebAssembly aufbauende Mono Runtime kommt übrigens auch bei Blazor zum Einsatz, Microsofts Framework für Single Page Applications (SPA), mit dem sich clientbasierte Webanwendungen mit HTML und C# entwickeln lassen. Der WebAssembly-Ansatz von Uno und Blazor wird in allen modernen Browsern unterstützt, sodass mit Uno geschriebene WinUI-Apps bereits auf allen Plattformen als Webanwendungen laufen.

Zur nativen Unterstützung der Plattformen MacOS, iOS und Android setzt Uno auf Xamarin auf. Dabei ist in Abbildung 1 zu erkennen, dass sowohl für MacOS/iOS als auch für Android Mono-spezifische UI-Bibliotheken zum Einsatz kommen. Für MacOS/iOS kapselt das UI-Kit native Komponenten, für Android das Android UI. Beide werden in Uno mitgeliefert. Diese Abstraktionsschicht erlaubt es, auch plattformspezifische Komponenten in der eigenen Anwendung zu nutzen.

Da die ganze Architektur auf XAML basiert, werden zum Entwickeln auch diverse XAML-Features unterstützt, beispielsweise Edit & Continue und XAML Hot Reload. Dadurch sind Änderungen während des Ausführens der Anwendung möglich.

huber_winui_teil4_1.tif_fmt1.jpgAbb. 1: Architektur der Uno Platform

Uno ist ein hochspannendes Produkt, da es Cross-Platform-Entwicklung mit modernstem XAML und C# erlaubt. Doch was braucht man, um eine Anwendung mit Uno bauen zu können?

Die Umgebung aufsetzen

Um mit Uno Platform loszulegen, werden im Grunde zwei Dinge benötigt [4]: eine Installation von Visual Studio 2019 mit entsprechenden Workloads und die Vorlagen aus der Uno Platform Solution [5]. Uno benötigt Visual Studio 2019 Version 16.3 oder neuer. Dabei muss sichergestellt sein, dass folgende Workloads bei Visual Studio mitinstalliert werden:

  • Universal Windows Platform

  • Mobile-Entwicklung mit .NET (Xamarin)

  • ASP.NET und Webentwicklung

Da die Plattform auf Xamarin aufbaut, sind natürlich die erwähnten Mobile Development Tools zu installieren. Wird auf einem Windows-System entwickelt, lassen sich damit Android-Anwendungen auf einem Emulator ausführen. Für das Kompilieren und Ausführen von iOS-Anwendungen wird – wie auch bei reinen Xamarin-Projekten üblich – ein Mac benötigt. Ist Visual Studio entsprechend installiert, fügt man über das Menü Extensions in Visual Studio Uno Platform Solution Templates hinzu (Abb. 2).

huber_winui_teil4_2.tif_fmt1.jpgAbb. 2: Die Extension für die Uno-Solution-Vorlagen

Wir bauen eine App

Wird in Visual Studio 2019 ein neues Projekt erstellt, lässt sich im Dialog nach Uno suchen. Dabei erscheinen die Vorlagen für Uno, die mit der Extension installiert wurden. Es stehen Vorlagen für eine Cross-Platform-Anwendung und eine Cross-Platform-Library zur Verfügung. In diesem Artikel wählen wir die Vorlage für eine Cross-Platform-Anwendung und geben als Namen FriendManager ein, da mit der App eine Liste von Freunden verwaltet werden soll. Abbildung 3 zeigt den Solution Explorer von Visual Code. Insgesamt gibt es sechs Projekte, jeweils eins für UWP, Web (also WebAssembly, beziehungsweise abgekürzt Wasm), Android, iOS und MacOS. Das sechste Projekt heißt Shared und wird von allen anderen Projekten referenziert. Es enthält die aus UWP/WinUI-Projekten bekannten Dateien MainPage.xaml und App.xaml mit zugehöriger Code-Behind-Datei (xaml.cs).

huber_winui_teil4_3.tif_fmt1.jpgAbb. 3: Die erstellte Solution im Solution Explorer

In Shared kann man wie in einer gewöhnlichen XAML-basierten Anwendung entwickeln. Hier findet die eigentliche Arbeit statt. Unterstützt wird .NET Standard 2.0, sodass sich sehr viele bekannte APIs aus dem .NET-Umfeld nutzen lassen. Doch zuvor springen wir noch auf die WinUI 3-Preview-Version auf.

Uno mit WinUI 3 Preview 1 nutzen

Standardmäßig nutzen die Projektvorlagen der Uno Platform die heute produktiv verfügbare UWP-UI-Bibliothek, die Teil von Windows 10 ist. Doch auch für WinUI 3 Preview 1 bietet die Uno Platform bereits Unterstützung an. Um eine Uno Solution mit WinUI 3 Preview 1 anstatt mit UWP zu erstellen, müssen über die Kommandozeile die entsprechenden Projektvorlagen installiert werden:

dotnet new -i Uno.ProjectTemplates.Dotnet::3.0.0-dev.22 

Sind die Vorlagen installiert, lässt sich mit dem .NET CLI ein WinUI-basiertes Uno-Projekt namens FriendManager erstellen:

dotnet new unoapp-winui -n FriendManager

Strukturell sieht dieses Projekt identisch zu jenem UWP-basierten aus Abbildung 3 aus. Lediglich die Namespaces im Shared-Projekt lauten statt Windows.UI.Xaml eben Microsoft.UI.Xaml, wie das bei WinUI der Fall ist. Auch referenzieren die plattformspezifischen Projekte der Solution andere NuGet-Pakete. Beispielsweise bezieht sich das Android-Projekt statt auf Uno.UI auf das Paket Uno.WinUI und das UWP-Projekt referenziert das WinUI-spezifische...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang