Avalonia UI Tutorial

In diesem Avalonia UI Tutorial zeige ich euch wie man das .Net Core UI Framework für Visual Studio installiert und an einem ersten Beispiel verwendet. Mit Avalonia UI erstellt man einfach grafische .NET Core Programme.

Avalonia UI Tutorial

.Net Core wird zunehmen zum Standard und aufgrund von Open Source sollte man auch bei jedem neuen Projekt darauf wechseln. Was aber, wenn man ein grafisches Programm erstellen möchte? In diesem Fall sollte man unter keinen Umständen wieder auf eine proprietäre Lösung für zum Beispiel nur Windows zurückgreifen. Mit Avalonia UI kann man Grafik Betriebssystem unabhängig zeichnen. Der Source Code für diesen Artikel ist auf meiner GitHub Seite zu finden.

Installation

Die meisten .Net Entwickler verwenden wohl Visual Studio, weshalb ich die Installation sowohl für Visual Studio als auch auf der Kommandozeile zeige.

Visual Studio

Um mit Avalonia UI zu arbeiten muss man es erst einmal installieren. Das geht in Visual Studio ganz einfach über die Extensions. Dort findet man das Paket zur Installation:

Die Installation dauert schon mal 15 Minuten. Will man nun ein neues Projekt erstellen, dann zeigt der Dialog unter Visual Studio 2017 eine neue Option Avalonia an:

Es gibt zwei Optionen:

• Avalonia Application
  es wird ein neues Standard Avalonia Projekt angelegt
• Avalonia MVVM Application
  es wird ein spezielles Avalonia Projekt angelegt, welches das MVVM Design Pattern verwendet und dieses mit ReactiveUI implementiert

Ich habe die Erweiterung auch für Visual Studio 2019 installiert, jedoch findet man dort unter dem neuen Projekt Dialog keine Avalonia Option. Das passt auch ganz gut, so kann ich auch den Weg über die Kommandozeile herzeigen.

Kommandozeile

Unser Ziel ist eine vom System unabhängige Lösung. Wir müssen deshalb auch annehmen, dass es Linux Entwickler gibt die kein Visual Studio verwenden. Für diesen Fall hilft uns die Kommandozeile. Der erste Schritt ist dort ein Projekt von GitHub zu klonen:

git clone https://github.com/AvaloniaUI/avalonia-dotnet-templates.git

Ich habe das Kommando beispielsweise in der PowerShell Core eingegeben. Mit dem folgenden Befehl werden die Templates installiert:

dotnet new --install .\avalonia-dotnet-templates\

Die Ausgabe zeigt uns auch gleich den Erfolg an:

Von nun an kann man über die Konsole ein neues Projekt anlegen:

dotnet new avalonia.app -o Projektname

beziehungsweise für ein MVVM Projekt

dotnet new avalonia.mvvm -o Projektname

Erstes Beispiel

Um eine erste Erfahrung mit Avalonia UI zu machen lohnt sich das über das Template erstellte Projekt. Ich habe es kompiliert und gestartet. Uns wird ein Fenster mit einem Text präsentiert.

Das Projekt besteht aus einer Datei mit dem C# Source Code Program.cs, welches gut dokumentiert nichts weiter macht als Avalonia UI zu initialisieren und im Hauptprogramm MainWindows anzuzeigen. MainWindow ist in der MainWindow.xaml Datei definiert. Dort finden wir neben der XML Definition eines Windows nur den Text als Inhalt. Diesen können wir genau so wie den Titel des Fensters ändern. Einzig sonst interessantes ist die App.xaml mit der Konfiguration dieses Programms.

Unter Windows sieht das modifizierte Programm wie folgt aus:

Betriebssystem unabhängig

Die spannende Frage ist nun: funktioniert das .Net Core Avalonia UI Programm auch unter Linux? Das Ziel des Open Source Ansatz wäre genau das. Aus diesem Grund teste ich mit der selben Anleitung auch auf meinem Raspberry Pi Linux Testrechner. Ich installiere dabei die Templates auf dem bereits mit .NET Core 3 vorbereiteten Raspberry Pi und lege ein neues Avalonia UI Projekt an. Die verwendeten Kommandos sind weiter oben unter der Überschrift Kommandozeile zu finden sind.

Mit dem Befehl

dotnet run

erstellt und startet man das Programm. Über eine SSH Verbindung auf den Raspberry Pi bekommt man nach dem Kompilieren folgende Fehlermeldung:

Fehlermeldung: Unhandled Exception: System.Exception: XOpenDisplay failed

Das sieht gut aus. Denn über SSH ist klarerweise kein Bildschirmmanager wie X-Windows aktiv, folglich kann auch kein Fenster gezeichnet werden. Als gleich nochmal probieren, diesmal direkt vom Raspberry Pi aus ausgeführt:

Fehlermeldung: Unhandled Exception: System.DllNotFoundException: Unable to load shared library ‚libSkiaSharp‘ or one of its dependencies.

Über die Suche im Internet bin ich auf den Namen des fehlenden Pakets gestoßen, weiß man den ist die Installation einfach:

dotnet add package SkiaSharp.NativeAssets.Linux

Daraufhin wird das noch fehlende Paket installiert. Leider besteht danach das Problem weiterhin…

NuGet installieren

sudo apt install nuget

Die fehlende Bibliothek mit nuget installieren:

nuget install SkiaSharp

Auch nach dieser Maßnahme besteht das Problem weiterhin…

Jetzt aber richtig

Der dritte Versuch sollte nun zum Ziel führen. Dazu muss man die Skia Bibliothek von Avalonia UI installieren:

dotnet add package Avalonia.Skia.Linux.Natives

Wie schon zuvor starte ich das Programm nochmals:

dotnet run

Das Programm startet normal und zeigt wie schon zuvor unter Windows 10 ein Fenster. Nun kann man endlich .NET Core 3 Programme mit grafischen Fenstern dank Avalonia UI auch auf dem Raspberry Pi erstellen und laufen lassen.

Fazit

Dieses Avalonia UI Tutorial hat mich ziemlich viel Zeit gekostet. Das Programm unter Windows 10 hat man schnell lauffähig, doch unter Linux war das Setup deutlich schwieriger. Die Fehlende SkiaSharp DLL hat mir mehrere Stunden Kopfzerbrechen bereitet. Ich hoffe du kannst mit meiner detaillierten Erklärung einen Fehler schnell finden und sofort mit der Avalonia UI Entwicklung unter Linux anfangen.

An welchem .NET Core Programm entwickelst du gerade? Wo hast du Probleme bei der Portierung auf Linux beziehungsweise dem Raspberry Pi?