Plattformübergreifende Desktopanwendungen mit .Net Core und Avalonia UI

Plattformübergreifende Desktopanwendungen mit .Net Core und Avalonia UI
Page content

.NET Core ist eine Plattformübergreifende Laufzeitumgebung für Windows, Linux und Mac. Leider fehlte es dieser neuen Technologie stets an einer Desktopumgebung. Es lassen sich Konsolen- und Webanwendungen erstellen.

Die Links werden zusammenfassend am Ende des Artikels aufgelistet.

Für Windows hat Microsoft eine separates Paket bereitgestellt, sodass bestehende Desktopanwendungen vom .NET Framework zu .NET Core migriert werden können und unter Windows funktionieren.Ich hätte mir an dieser Stelle gerne ein Paket gewünscht, um auch (WPF) Desktopanwendungen unter Mac und Linux auszuführen.

Installation von Avalonia UI

Avalonia UI bietet die Möglichkeit eine Desktopanwendung für alle Plattformen bereitzustellen. Laut Webseite kann das Paket sowohl für Desktop als auch mobile Anwendungen genutzt werden.

Installation als Visual Studio Erweiterung

Für das Visual Studio gibt es eine Erweiterung, welche Avalonia als Projektvorlage installiert. Über Datei > Neues Projekt kann ein neues Projekt angelegt werden.

Die Erweiterung findet ihr unter folgendem Link:https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaforVisualStudio

Installation für .Net Core

Die Installation für .Net Core ist etwas aufwändiger:

Als erstes, müssen die Avalonia Dotnet Templates heruntergeladen respektive mittels git clone geklont und anschließend installiert werden.

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

dotnet new --install [path-to-repository]

Hinweis: Achtet darauf, dass ihr den Ordner mit den Vorlagen nicht einfach so löscht. Ansonsten ist der dotnet new Befehl “kaputt” und es kann nichts mehr erstellt werden.Als Fehlermeldung erhaltet ihr einen Hinweis wie: Could not find [path]. Bevor ihr den Ordner löscht, ruft dotnet tool uninstall auf und löscht die Vorlage.

Ein neues Projekt anlegen (.Net Core)

Ein neues Projekt legen wir mit der Kommandozeile an:

dotnet new avalonia.mvvm -o ExampleApp

Die MVVM-Vorlage beinhaltet die Basis für eine MVVM-Basierte Anwendung mit ReactiveUI . Das Framework liefert (ähnlich wie Catel, Prism oder Caliburn) bereits Funktionen und Klassen mit, um schnell und einfach eine Anwendung zu entwickeln.

Das ViewModel, habe ich um einen Counter erweitert, welche mit Hilfe eines Buttons hochgezählt wird:

using System;
using System.Collections.Generic;
using System.Reactive;
using System.Text;
using System.Windows.Input;
using ReactiveUI;
using SharpDX.Direct3D11;

namespace Todo.ViewModels {

  public class MainWindowViewModel : ViewModelBase {

    public string Greeting => "Hello World!";
    private int _counter = 10;

    public MainWindowViewModel() {
      CounterCommand = ReactiveCommand.Create<object>(CounterExecute);
    }

    public int Counter {
      get => _counter;
      set => this.RaiseAndSetIfChanged(ref _counter, value);
    }

    public ReactiveCommand<object, Unit> CounterCommand { get; }

    private void CounterExecute(object param) {
      Counter++;
    }

  }

}

Die View passen wir auch entsprechend an:


<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:Todo.ViewModels;assembly=Todo"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="Todo.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Title="Example Application">

  <Design.DataContext>
    <vm:MainWindowViewModel/>
  </Design.DataContext>

  <DockPanel LastChildFill="True">
    <TextBlock DockPanel.Dock="Top"
               Text="{Binding Greeting}"
               Margin="0 50 0 0"
               HorizontalAlignment="Center"/>

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
      <TextBox Text="{Binding Counter}"
               VerticalAlignment="Center"/>

      <Button Command="{Binding MyCommand}"
              Content="Counter++"
              Width="150"
              VerticalAlignment="Center"/>
    </StackPanel>
  </DockPanel>

</Window>

Hierdurch erhalten wir eine simple Desktopanwendung, welche neben der Nachricht auch einen Zähler und Button enthält.

Die einfache Beispielapplikation mit Label, Textfeld und Button

Die einfache Beispielapplikation mit Label, Textfeld und Button

Ein Klick auf den Button erhöht die Variable. Durch den Aufruf von RaiseAndSetIfChanged wird diese Änderung automatisch an das Framework weitergereicht, welche die Anzeige anpasst.

Fazit

Der erste Start und Erstellen eines Hello World-Projekts verlief überraschend einfach. Der größte Aufwand besteht in der Installation der Vorlagen für .Net Core.Die Programmierung und erfolgt analog zu gewohntem WPF und XAML. Aus meiner Sicht lohnt es sich, das Projekt auszuprobieren und im Auge zu behalten.


Bildnachweis: Pixabay.com