Anwendungen mit Avalonia UI erstellen
Eine Microsoft-unabhängige Variante, um .NET Anwendungen auf verschiedenen Plattformen verfügbar zu machen
In einer Welt, in der Software nicht mehr an ein einziges Betriebssystem gebunden ist, steigt der Bedarf an Werkzeugen, mit denen Entwickler Anwendungen plattformübergreifend und effizient erstellen können. Für jede Plattform eigenen Code zu schreiben ist aufwendig, fehleranfällig und in vielen Fällen nicht mehr zeitgemäß.
Um diesem Problem entgegenzuwirken, entstanden im Laufe der Zeit verschiedene Lösungen. Eines der bekanntesten Beispiele hierfür ist Electron. Mithilfe von Webtechnologien (HTML, CSS, Javascript) lassen sich Cross-Plattform Desktop-Apps erstellen. Zahlreiche populäre Anwendungen – darunter Visual Studio Code oder Discord – basieren bereits auf Electron [1]. Ein Nachteil von Electron ist jedoch die vergleichsweise geringe Ressourceneffizienz. Da jede Anwendung eine vollständige Chromium- und Node.js-Laufzeitumgebung integriert, verbrauchen Electron-Apps in der Regel deutlich mehr Arbeitsspeicher als native Anwendungen [2].
Neben Electron existieren jedoch zahlreiche weitere Frameworks, welche plattformübergreifende Entwicklung auf eigene Weise ermöglichen. Eines davon im .NET-Ökosystem ist Avalonia UI, das wir im Folgenden genauer betrachten werden.
Alternativen für Cross-Plattform-Entwicklungen
Spricht man über Cross-Plattform-Frameworks, lohnt sich auch ein kurzer Blick auf die Windows-only Varianten:
Zum einen gibt es die Windows Presentation Foundation (WPF), die bereits seit .NET 3.0 verfügbar ist. Zwar ist sie inzwischen etwas in die Jahre gekommen, bietet aber nach wie vor ein sehr mächtiges Fundament für Desktop-Anwendungen. Mit der zugehörigen, deklarativen Sprache XAML (basierend auf XML) ermöglicht WPF eine flexible Oberflächengestaltung und überzeugt durch Konzepte wie MVVM, Data Binding und Templates, um UI und Business Logik voneinander zu trennen.
Als moderner Nachfolger der Universal Windows Platform (UWP) gilt WinUI. Es stellt den aktuellsten UI-Stack für Windows 10 und 11 bereit und bietet somit eine Möglichkeit moderne Windows-Anwendungen zu erstellen. In der Community wird es eher mit gemischten Gefühlen betrachtet.
Für Cross-Plattform-Entwicklung stehen verschiedene Möglichkeiten zur Verfügung:
- .NET MAUI,
- Uno Platform,
- Blazor Hybrid Apps oder
- klassische Webanwendungen mit getrenntem Frontend.
.NET MAUI ist der Nachfolger von „Xamarin.Forms“ und verfolgt den Ansatz Mobile-First. Neben der Unterstützung für Android, iOS und Windows bietet es nun auch Support für macOS. Die Unterstützung für Linux-Systeme fehlt jedoch, kann aber via Community Projekten umgesetzt werden. MAUI ist moderner, flexibler und deutlich besser in das .NET-Ökosystem integriert als sein Vorgänger. Für die Entwicklung des User Interface wird auch hier XAML verwendet. Die Besonderheit ist jedoch, dass die UI-Komponenten während des Kompiliervorgangs in native UI-Elemente übersetzt werden.
Uno Platform basiert auf WinUI und XAML und verfolgt den Ansatz, moderne Microsoft-Technologien plattformübergreifend verfügbar zu machen. Unterstützt werden Windows, Linux, macOS, Android, iOS sowie WebAssembly im Browser. Passend dazu ihre Philosophie: „Bringe WinUI überall hin.“ [3]. Die Zielgruppe von Uno Plattform sind in erster Linie WinUI-Entwickler sowie Entwickler, die moderne Microsoft-APIs auch auf anderen Plattformen nutzen möchten.
Blazor Hybrid Apps ermöglichen die Entwicklung von nativen Anwendungen mit Blazor. Dabei kann von verschiedenen Ansätzen gewählt werden. Zum einen die Integration mit .NET MAUI, wobei Blazor in einem nativen WebView läuft [4]. Zum anderen im Zusammenspiel mit Electron, welches Chromium zusammen mit Node.js in die Anwendung integriert [5].
Die Cross-Plattform-Unterstützung unterscheidet sich je nach Ansatz:
- MAUI: Windows, macOS, iOS, Android
- Electron: Windows, macOS, Linux
Was ist Avalonia UI und wo liegen Vor- bzw. Nachteile?
Genau hier setzt Avalonia UI an und versucht die positiven Aspekte anderer zu kombinieren. Es ist ein modernes, quelloffenes UI-Framework für .NET, das sich stark an den bekannten Prinzipien von WPF orientiert. Mit Avalonia UI lassen sich Anwendungen für Windows, Linux und macOS auf Basis einer einzigen Codebasis entwickeln. Zusätzlich existiert eine experimentelle Unterstützung für Android, iOS und WebAssembly, sodass auch mobile Szenarien abdeckt werden [6].
Wer bereits mit C# und XAML gearbeitet hat, findet sich leicht zurecht und kann von der Flexibilität profitieren, moderne, performante und ansprechende Benutzeroberflächen plattformübergreifend zu erstellen. Ebenso lassen sich Styles durch einen leichteren, CSS ähnlichen Ansatz anpassen. Technisch setzt Avalonia UI auf die Rendering-Engine Skia, welche auch in Google Chrome zum Einsatz kommt [7]. So bleiben Anwendungen unabhängig von nativen UI-Toolkits, ermöglichen hohe Performance und bieten eine konsistente Darstellung auf allen unterstützten Plattformen.
Avalonia UI ist ein Framework, das zwar von WPF inspiriert ist, aber unabhängig von Microsoft entwickelt wird. Wer also bewusst frei von Microsoft-Technologien arbeiten möchte, findet hier eine gute Alternative. Darüber hinaus kann Avalonia UI durch zusätzliche Komponenten erweitert werden. Im Folgenden eine kleine Auflistung bestehender Möglichkeiten:
- Eremex Avalonia UI Controls – eine umfassende Sammlung hochwertiger UI-Bausteine [8]
- Awesome-Avalonia – ein Community-kuratiertes GitHub-Repository mit einer Auflistung vieler Drittanbieter-Bibliotheken und Tools [9]
- teeChart – eine professionelle Chart-Bibliothek [10]
- ActiViz – ermöglicht 3D Visualisierung und Datenverarbeitung mit Hilfe des „Visualization Toolkit“ (VTK) [11] [12]
Für Unternehmen, die keine Entwicklung von Null anstreben, bietet Avalonia mit Avalonia XPF auch eine kommerzielle Möglichkeit bestehende WPF-Anwendungen plattformunabhängig zu migrieren [13]. Einige Namenhafte Unternehmen, die bereits heute Avalonia UI nutzen sind JetBrains, GitHub oder Unity [14].
Abschließend nochmal eine kompaktere Gegenüberstellung der Vor- und Nachteile.
Vorteile
- Plattformübergreifende Entwicklung mit einer einzigen Codebasis
- XAML-basierte UI-Entwicklung (AXAML) macht es WPF-Veteranen leicht
- mögliche Nutzung von Konzepten wie MVVM, Data Binding oder Dependency Injection
- Skia Rendering-Engine ermöglicht einheitliche UI auf allen Platformen
- Themes ermöglichen leichte und einheitliche Anpassung der UI
- IDE-Integration für Visual Studio, Visual Studio Code und JetBrains Rider vorhanden
Nachteile
- XAML, MVVM – hohe Lernkurve falls unbekannt
- experimenteller Mobile Support
- Skia Rendering-Engine ermöglicht einheitliche UI, aber dementsprechend keinen nativen Plattform-Look
- geringe Menge von Drittanbieter Komponenten
- hat eine bisher eher kleine Community
- iOS-Entwicklung nicht ohne verbundenes macOS Gerät und Xcode nutzbar [15]
Setup eines Cross-Plattform Avalonia UI Projekts
Für die Entwicklung einer Cross-Plattform Avalonia UI Anwendung kann eine der Entwicklungsumgebungen Visual Studio, Visual Studio Code oder JetBrains Rider mit der zugehörigen Avalonia UI Extension verwendet werden. Im Folgenden nutze ich Visual Studio 2022.
Zunächst muss hierfür die Extension „Avalonia for Visual Studio 2022“ heruntergeladen und installiert werden. Diese beinhaltet neben Project- und Control-Templates auch einen XAML-Editor mit IntelliSense Unterstützung sowie einen Live-XAML-Previewer.
Für den Fall, dass man auch Android als Zielplattform anvisiert, muss über den „Visual Studio Installer“ auch das Android SDK für Multi-Plattform Entwicklung installiert werden.
Abbildung 1: Setup versus Installer
Ist alles installiert, kann Visual Studio gestartet und ein neues Avalonia UI Projekt erstellt werden. Für Cross-Plattform Anwendungen bietet die zuvor installierte Extension hierfür das „Avalonia Cross Platform Application“ Template an. Dieses inkludiert per Default die Verwendung des MVVM-Patterns.
Abbildung 2: Create a new Avalonia UI project
Nach erfolgreicher Erstellung existiert nun eine Solution, die mehrere Projekte enthält. Eins für die allgemeine Codebasis und die anderen als Startpunkt für die jeweils anderen Plattformen.
Abbildung 3: Avalonia Solution Explorer
- dotnet workload install wasm-tools
- dotnet workload restore
Nach erfolgreicher Installation sollte es nun möglich sein das Projekt für die verschiedenen Plattformen anzutesten.
Abbildung 4: Started project: Welcome to Avalonia!
Je nach Plattform wird die Anwendung hierfür entsprechend im Window-Mode oder in der Single-View-Darstellung initialisiert.
public partial class App : Application
{
public override void Initialize()
{
AvaloniaXamlLoader.Load(this);
}
public override void OnFrameworkInitializationCompleted()
{
if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
{
DisableAvaloniaDataAnnotationValidation();
desktop.MainWindow = new MainWindow
{
DataContext = new MainViewModel()
};
}
else if (ApplicationLifetime is ISingleViewApplicationLifetime singleViewPlatform)
{
singleViewPlatform.MainView = new MainView
{
DataContext = new MainViewModel()
};
}
base.OnFrameworkInitializationCompleted();
}
...
}
Der für die Desktop-Systeme verwendet der XAML-Code erzeugt das Anwendungsfenster, in das das MainView-Control eingebunden ist:
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:AvaloniaCrossPlatform.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:views="clr-namespace:AvaloniaCrossPlatform.Views"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaCrossPlatform.Views.MainWindow"
Icon="/Assets/avalonia-logo.ico"
Title="AvaloniaCrossPlatform">
<views:MainView />
</Window>
Das MainView Control enthält die eigentlichen UI-Komponenten und wird auf mobilen Plattformen direkt eingebunden:
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:AvaloniaCrossPlatform.ViewModels"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaCrossPlatform.Views.MainView"
x:DataType="vm:MainViewModel">
<Design.DataContext>
<vm:MainViewModel />
</Design.DataContext>
<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</UserControl>
Eine kleine Cross-Plattform-Anwendung zeigt Avalonia-UI-Basiselemente. Den Code finden Sie auf GitHub. Die App bietet zwei umschaltbare Seiten, auf denen Sie jeweils mathematische Aufgaben beantworten.
Abbildung 5: Avalonia UI Beispielanwendung
Fazit
Avalonia UI ist eine moderne, leistungsstarke und vielseitige Alternative zu WPF und anderen Cross-Plattform Lösungen. Es richtet sich an Entwickler, die mit .NET und XAML plattformübergreifende Desktop-Anwendungen erstellen möchten. Für erfahrene XAML-Nutzer gelingt der Einstieg besonders leicht, während Einsteiger mit einer etwas steileren Lernkurve rechnen müssen. Dank einer aktiven Community und stetiger Weiterentwicklung bietet das Open-Source Framework eine solide Basis für Apps unter Windows, macOS und Linux sowie perspektivisch auch für mobile Endgeräte und das Web. Wer auf der Suche nach einem zukunftsträchtigen UI-Framework ist, sollte einen Blick auf Avalonia UI werfen.
Hinweise:
[1] Electron Apps
[2] What is Electron?
[3] WinUI on Windows 7 – Yes, it’s possible with Uno Platform
[4] Microsoft Ignite: ASP.NET Core Blazor Hybrid
[5] GitHub: Electron.NET
[6] Nuget: Avalonia
[7] Skia: The 2D Graphics Library
[8] EMX Controls Documentaiton: Eremex Avalonia UI Controls Library
[9] GitHub: Avalonia Community
[10] steema: Chart Component for Avalonia
[11] Kitware: ActiViz release: Native rendering controls for various UI frameworks
[12] VTK: Leverage the power of VTK by partnering with Kitware
[13] Avaonlia: Cross-Platform WPF
[14] GitHub: Avalonia
[15] Avalonia Docs: How To Develop For Mobile iOS
Hier finden Sie einen Beitrag über Avalonia UI und die Entwicklung einer Cross-Plattform WPF-Anwendung mit .NET Core.
Suchen Sie nach einem Team für Ihre Softwareentwicklung oder -modernisierung? Dann laden Sie sich den t2informatik Steckbrief herunter.
Wollen Sie als Meinungsmacherin oder Kommunikator über das Thema diskutieren? Dann teilen Sie den Beitrag gerne in Ihrem Netzwerk.
Marco Menzel hat einen weiteren Beitrag im t2informatik Blog veröffentlicht:
Unit-Tests mit KI generieren
Marco Menzel
Marco Menzel ist Junior-Softwareentwickler bei t2informatik. Schon in seiner Kindheit entdeckte er seine Begeisterung für Computer und die Entwicklung von Software. Erste kleine Programme schrieb er noch in der Schulzeit, und schnell wurde klar, dass er sein Hobby später auch beruflich verfolgen möchte. Folgerichtig studierte er Informatik an der BTU Cottbus-Senftenberg, wo er seine Kenntnisse systematisch vertiefte und praktische Erfahrungen in verschiedenen Projekten sammelte. Heute setzt er dieses Wissen in seiner täglichen Arbeit ein und verbindet damit Leidenschaft und Beruf.
Im t2informatik Blog veröffentlichen wir Beträge für Menschen in Organisationen. Für diese Menschen entwickeln und modernisieren wir Software. Pragmatisch. ✔️ Persönlich. ✔️ Professionell. ✔️ Ein Klick hier und Sie erfahren mehr.