In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „XAML: Avalonia – eine Cross-Plattform-Lösung für XAML“.

Die Beliebtheit von HTML5 ist in den letzten fünf Jahren stark gestiegen. Viele Softwareunternehmen, die sich auf Microsoft-Technologien spezialisiert haben, schwenken komplett auf den HTML5-Stack um. Kein Wunder, denn die Anforderungen der Kunden ändern sich mit der Zeit, und diese möchten gerne Desktopsoftware für Windows, Mac und Linux. HTML5 bringt Features mit sich, die genau für die Desktopentwicklung relevant sind: Offlinesupport, Multi-Threading, WebSocket (TCP via Webports), Hardwarezugriff, lokale Datenbanken und vieles mehr – und das dann auch noch plattformübergreifend für alle gängigen Betriebssysteme.

XAML: Avalonia – eine Cross-Plattform-Lösung für XAML

WPF hingegen macht seinem Namen alle Ehre, denn die „Windows“ Presentation Foundation ist eben hauptsächlich nur für Windows konzeptioniert worden und somit nicht Cross-Plattform-fähig. Der Vorgänger WinForms trägt zwar auch stolz den Namen „Windows“ Forms, lässt sich allerdings über das Mono-Framework auch auf Linux und Mac ausführen.

Für wahre XAML-Fans gibt es dennoch gute Nachrichten. Das Open-Source-UI-Framework Avalonia bietet die Möglichkeit, XAML plattformübergreifend ausführen zu können. Technisch handelt es sich hierbei um eine eigene Anwendungsarchitektur, die von WPF losgelöst ist. Für die Entwicklung wird dazu eine Avalonia Extension für Visual Studio 2017 benötigt. Diese erweitert Visual Studio um neue Projektvorlagen. In Abbildung 1 wird gezeigt, wie ein neues Avalonia-Projekt mit der neuen Projektvorlage angelegt wird.

Das neue Projekt lehnt sich an die bereits bekannte WPF-Architektur an und hat daher die gleiche Projektstruktur. Die Avalonia-Erweiterung für Visual Studio bietet sogar einen XAML-Designer-Support. Wurde das Projekt zum ersten Mal erzeugt, muss der Build nur noch gestartet werden und der XAML-Designer zeigt das erste „Hello-World“-Beispiel. In Abbildung 2 sind der XAML-Designer und die Projektstruktur zu sehen. Wird die Anwendung mit F5 gestartet, öffnet sich ebenfalls wie gewohnt die Desktopanwendung. Ein Blick in die Code-Behind-Datei MainPage.xaml.cs zeigt dann die ersten ungewohnten Unterschiede (Listing 1).

Für WPF-Entwickler gibt es noch ein paar weitere Unterschiede bei der Entwicklung mit XAML: UIElement und FrameworkElement sind bei Avalonia einfach nur Controls. Das klassische WPF Control heißt hier TemplateControl und aus dem DependencyProperty wurde ein StyledProperty. Die Controls haben auch keine direkte Resources Collection, sondern eine Styles Property, die Style-spezifische Ressourcen entgegennehmen kann. So lehnt sich Avalonia stark an CSS (Cascading Style Sheets) aus dem Web an. Eine Liste der Unterschiede kann in der Projektdokumentation gefunden werden.

Das Erzeugen der Anwendung erfolgt wie gewohnt über MSBuild. Zum Ausführen auf den unterschiedlichen Plattformen werden das Mono-Framework und eine eigenständige MSBuild-Konfiguration benötigt: xbuild /p:Platform=Mono /p:Configuration=Debug Avalonia.sln. Die anschließend erzeugte EXE muss nun nur noch auf der gewünschten Plattform durch Mono gestartet werden.

Das Avalonia-UI-Framework scheint auf den ersten Blick sehr vielversprechend. Leider schreiben die Entwickler auf ihrer Projektseite, dass es sich bei der aktuell verfügbaren Variante bisher nur um eine „Alpha“-Version handelt und unter Umständen noch nicht alles reibungslos funktioniere. Sie warnen ebenfalls davor, dass es noch Breaking Changes geben könnte. Das ist schade, denn die Version, wie sie ist, wäre ein Schritt in die richtige Richtung für XAML-Entwickler. Mit etwas Glück kauft Microsoft das UI-Framework und macht etwas mehr daraus. Aktuell investieren die Redmonder aber mehr in Richtung HTML5. So sollen viele XAML-Layout-Elemente in den HTML-Standard einfließen. Was Desktoplösungen angeht, sind sie eher an der Entwicklung von GitHubs Electron-Framework beteiligt, das allerdings für JavaScript-Entwickler konzeptioniert wurde. Die aktuell einzige XAML-Cross-Plattform-Lösung von Microsoft gibt es nur im Mobile-Bereich mit Xamarin.

Listing 1

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;

namespace MyAvaloniaApp
{
  public class MainWindow : Window
  {
    public MainWindow()
    {
      this.InitializeComponent();
      this.AttachDevTools();
    }

    private void InitializeComponent()
    {
      AvaloniaXamlLoader.Load(this);
    }
  }
}