AvaloniaUI особенности на примере MessageBox

Avalonia ui — восхитительный фреймворк, к которому хочется возвращаться снова и снова. Так давайте же вернемся к нему еще раз и рассмотрим некоторые особенности вместе с моим message box.
y_cbjxf3-xfwmgvgg90q0rdchw0.png

Кто же такая Авалония
c0fgl2hozvuddheowo7_0a59iek.png

Avalonia — это кросплатформенный фреймворк, позволяющий разрабатывать графические интерфейсы на всех актуальных платформах.

По своей структуре он невероятно близок к wpf: похожий xaml, похожие биндинги. Даже есть официальный туториал для разработчиков wpf.

Примечательна же авалония тем, что на каждой из систем она обращается к родным интерфейсам: Win32, MonoMac, X11…


Что же появилось в обновленной версии
  1. Поддержка 13 различных иконок сообщений.
  2. Возможность копирования тела сообщения при помощи комбинации клавиш Cntrl+C.
  3. Подстраивание размера окна под его содержимое.
  4. Упрощенная система стилей, что позволяет желающим легко включится в разработку и поддержку новых.
  5. Замена TextBlock на TextBox, теперь текст в окне можно выделять.
  6. Полностью переработана сама архитектура.

fb3s0i1-_zb8pqa9sjakdsaoxyi.jpeg
С документацией можно ознакомится на gitlab.

Сам же пакет можно скачать с nuget.


Поговорим же про особенности и фишки avalonia


Очевидно, что если будут сравнения, то сравниваться будет с wpf.

Первое, что бросается в глаза после фреймворков от ms, это возможность биндить комманды к методам. Да, функционально это дает меньше возможностей, но в ответ упрощает подход к разработке view model.

public void RunTheThing(string parameter)
{
            // Code for executing the command here.
}

Также Авалония построена с помощью реактивных расширений, что позволяет работать с событиями фреймворка, как с объектами первого класса, с помощью декларативного синтаксиса запросов LINQ — позволяя писать лаконичный и читаемый код.

Но уходя чуть в глубь, все становится не столь радужно и очевидно, да и документация пока что еще не доведена до ума (но вы можете помочь).

Биндинг к image


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

Для начала стоит нужно зарегистрировать директорию с изображениями как ресурс авалонии, ведь важно, что бы иконки отобразились у любого пользователя и удобно упаковывались вместе со всем кодом.

 
        ...
        


Теперь в тэге image можно легко устанавливать выбранное изображение.

Но при использовании vm Source изображения нельзя просто прибиндить к string, а необходимо использовать Bitmap.

 public Bitmap ImagePath { get; private set; }

И соответсвенно теперь нужно извлечь наше изображение из ресурсов. Для чего нужно использовать локатор авалонии.

ImagePath = new Bitmap(AvaloniaLocator.Current.GetService()
                    .Open(new Uri($" avares://ASSEMBLYNAME/relative/project/path/{ImageName}.ico")));


Стоит отметить, что для embedded ресурсов при составлении uri используется приставка resm://, а для avalonia — avares://.

Рисование


Фигуры в avalonia и wpf схожи, но публичные свойства отличаюся. По это скачивая svg изображения и преобразуя с помощью inskape их в ms xaml ими нельзя было сразу воспьзоваться.
Произвольная фигура


Превращается в


А линия

Превращается в

Стили


Про сами стили достаточно сказано в документации.
Стоит лишь отметить, что это привычные стили с небольшой примесью css.
Я же хотел показать как применить стиль из отдельного файла.
Во-первых все xaml файлы должны являться ресурсами авалонии.


        
            Designer
        
      .....
    


Во-вторых стили применяются так же как и ресурсы изображений при помощи uri и локатора.

YourControl.Styles.Add(new StyleInclude(new Uri("avares://ASSEMBLYNAME/relative/project/path.xaml")){Source = new Uri("avares://ASSEMBLYNAME/relative/project/path.xaml")});


Приятные мелочи.


У TextBox присутсвует свойство Watermark
Что позволяет не искать сторонние пакеты и не городить TextBlock поверх TextBox, что можно прочитать во многих туторах для wpf.

А так же весь биндинг по умолчанию использует PropertyChanged, для триггера обновления связанного свойства.

В заключение

Предлагаю всем попробовать этот интересный фреймворк.
Выражаю благодарность пользователям Artyom Gorchakov и Никита Цуканов.
И напоминаю, что у avalonia есть уютная и восхитительная поддержка в Gitter.

© Habrahabr.ru