Avalonia: первая встреча

Когда мы встречаем новый язык, мы пишем «Hello world», а когда встречаем новый UI, то создаем блокнот. Здесь же я хочу показать простейший пример дружбы с корссплатформенным GUI Framework AvaloniaUI.



В первую очередь установим необходимый шаблон.

Для этого сохраняем этот репозиторий на свой машине.

Открываем консоль и пишем:

dotnet new --install [путь до скачанного шаблона]

И создадим стартовый проект:

dotnet new avalonia.mvvm -o Notebook

Добавим простенькую разметку как в wpf в файле MainWindow.xaml.

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:Notebook.ViewModels;assembly=Notebook"
        Icon="resm:Notebook.Assets.avalonia-logo.ico"
        Title="Notebook">
    <!--Биндим горячие клавиши-->
    <Window.KeyBindings>
        <KeyBinding Gesture="Ctrl+O" Command="{Binding Open}" />
        <KeyBinding Gesture="Ctrl+S" Command="{Binding Save}" />
    </Window.KeyBindings>
    <Design.DataContext>
        <vm:MainWindowViewModel />
    </Design.DataContext>
    <!--Стандартная разметочка гридом-->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!--Менюшечка-->
        <Menu Grid.Row="0" Grid.Column="0">
            <MenuItem Header="File">
                <MenuItem Header="Open" Command="{Binding Open}" />
                <MenuItem Header="Save As" Command="{Binding Save}" />
            </MenuItem>
        </Menu>
        <!--Основное текстовое поле-->
        <TextBox Grid.Row="1" Grid.Column="0" Text="{Binding Data}"
                 AcceptsReturn="True" />
    </Grid>
</Window>

C mvvm тут все чуть по-другому, так как по дефолту используется ReactiveUI.

Так что в файле MainWindowViewModel.cs добавим:

 private string _data;

        public string Data
        {
            get => _data;
            set => this.RaiseAndSetIfChanged(ref _data, value);
        }

А вот в отличии от дефолта wpf, авалония позволяет биндить комманды напрямую к методам.
И так же стоит отметить, что файловые диалоги в данном фреймворке только асинхронные.
Тогда открытие документа будет выглядеть вот так:

 public async Task Open()
        {
            var dialog = new OpenFileDialog();
            string[] result = null;
            dialog.Filters.Add(new FileDialogFilter() {Name = "Text", Extensions = {"txt"}});
            result = await dialog.ShowAsync(new Window());
            if (result != null)
            {
                Data = File.ReadAllText(result.First());
            }
        }

А вот так сохранение:

 public async Task Save()
        {
            var dialog = new SaveFileDialog();
            dialog.Filters.Add(new FileDialogFilter() 
         
            {Name = "Text", Extensions = {"txt"}});
            var result = await dialog.ShowAsync(new Window());
            if (result != null)
            {
                File.WriteAllText(result, Data);
            }
        }

Для того, что бы приложение запускалось на Линуксе придется добавить еще одну зависимость: Avalonia.Skia.Linux.Natives.

Но к сожалению не все сборки смогут отобразить наше окно. Ubuntu ( в том числе и Mate) отлично справляется как на большой (x64) архитектуре, так и на arm, а вот Raspbian явно подводит.


P.S.

Проект безумно интересный и приятный. Имеет очень много таргетных платформ в том числе и яблочных, надеемся, что скоро он будет отлично работать на всех платформах.