Создавайте красивые пользовательские интерфейсы с AvaloniaUI

Avalonia - это новая среда пользовательского интерфейса XAML, позволяющая разработчикам .NET предоставлять конечным пользователям кроссплатформенные настольные приложения .NET Core. Вдохновленная технологиями стека Microsoft, такими как Xamarin Forms, Windows Presentation Framework и Universal Windows Platform, Avalonia предоставляет полнофункциональные средства для создания высокопроизводительных пользовательских интерфейсов любой сложности и любого масштаба. По сравнению с Windows Presentation Framework, универсальной платформой Windows или Xamarin Forms, Avalonia предоставляет более быстрый типобезопасный компилятор XAML, известный как XamlIl, который делает процесс разработки и отладки сложных интерфейсов XAML гораздо менее болезненным. Более того, XamlIl позволяет отлаживать XAML - посмотрите это видео на YouTube, если вы все еще сомневаетесь, стоит ли попробовать Avalonia. Avalonia поставляется с поддержкой ReactiveUI из коробки, что позволяет использовать всю мощь реактивного программирования в приложении Avalonia .NET Core.

Известные приложения Avalonia включают его использование в кроссплатформенной IDE и оболочке, в редакторах кода и в биткойн-кошельках, ориентированных на конфиденциальность. Avalonia поставляется в виде пакетов NuGet под лицензией .NET Standard MIT и доступна бесплатно для всех, кто желает создать кроссплатформенный интерфейс рабочего стола на C # или F #, даже для коммерческого использования.

Однако экосистема вокруг фреймворка все еще развивается - для этого фреймворка разработано не так много тем графического интерфейса. Следовательно, разработка нового набора в современном стиле казалась мне разумной. Темы пользовательского интерфейса в Avalonia были разработаны как отдельные компоненты, которые можно легко заменить любыми другими наборами стилей, что сделало процесс разработки различных цветовых схем еще более простым и удобным.

Систему стилей в Avalonia можно представить как смесь стилей CSS и стилей WPF, стиль состоит из селектора и набора установщиков. Стили можно определять для любого элемента управления, также поддерживается импорт стилей из файлов или пакетов.

Система стилей Avalonia также поддерживает псевдоклассы, что позволяет нам контролировать внешний вид элементов управления в различных визуальных состояниях. С помощью этой функции мы можем легко изменить фон кнопки, когда пользователь нажимает ее или когда пользователь наводит указатель мыши на элемент управления. Используя синтаксис /template/, мы можем стилизовать примитивы, на основе которых строится более сложный элемент управления. Также поддерживаются динамические и статические ресурсы, что может показаться знакомым тем, кто работает с WPF, UWP или Xamarin Forms.

На основе упомянутых деталей реализации была представлена ​​новая тема графического пользовательского интерфейса, которая была упакована в виде пакета NuGet. Тема получила название Citrus из-за оранжевого цвета акцента, используемого в большинстве цветовых схем, доступных в Citrus.Avalonia NuGet package. В соответствии с политикой лицензирования структуры Avalonia тема Citrus лицензирована MIT и бесплатна для всех, даже для коммерческого использования. Исходный код проекта доступен на GitHub.

Начиная

Если вы новичок в Avalonia, см. Руководство Начало работы с Avalonia на их веб-сайте документации. После создания проекта Avalonia .NET Core пакет Citrus.Avalonia можно установить с помощью графического интерфейса диспетчера пакетов NuGet любой IDE, включая JetBrains Rider и Microsoft Visual Studio. Другой способ - выполнить следующую команду .NET Core SDK из корня вашего проекта:

dotnet add package Citrus.Avalonia

Затем поместите следующий код XAML в файл App.xaml:

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="YourNamespace.App">
  <Application.Styles>
    <StyleInclude Source="avares://Citrus.Avalonia/Citrus.xaml"/>
  </Application.Styles>
</Application>

Строка StyleInclude отвечает за импорт набора стилей в приложение. Импортированные стили будут применены ко всем элементам управления XAML по умолчанию, потомкам элемента, содержащего строку StyleInclude. В результате приведенного выше фрагмента кода все элементы управления по умолчанию в вашем приложении начнут использовать стили Citrus. Если вы хотите применить стили к небольшой части вашего приложения, переместите строку StyleInclude в раздел Styles управления, отличный от Application. Примечательно, что пакет Citrus NuGet также включает темную цветовую схему.

Чтобы просмотреть контрольную галерею, клонируйте Citrus.Avalonia.Sandbox образец проекта. Всего в пакете Citrus.Avalonia NuGet доступно пять цветовых схем: Цитрус, Море, Ржавчина, Конфеты и Магма. Чтобы использовать цветовые схемы, отличные от цветовой схемы по умолчанию, вам необходимо настроить тег StyleInclude XAML, изменив атрибут Source, чтобы он указывал на другую цветовую схему. Чтобы избежать коллизий, не забудьте удалить другие StyleInclude строки, ранее присутствующие в App.xaml файле.

Динамическое изменение цветовых схем

Чтобы предоставить конечным пользователям возможность динамически изменять темы графического пользовательского интерфейса, переместите строку StyleInclude в элемент управления, отличный от Application. Показанный ниже класс StyleManager принимает Window через конструктор и предоставляет возможность изменять темы пользовательского интерфейса во время выполнения с помощью вызова метода UseTheme.

См. Документацию Avalonia для получения дополнительных сведений о создании пользовательских тем и настройке стилей. Исходный код темы Citrus, описанный в этом посте, также может помочь в случае, если вы собираетесь создать свою собственную тему графического интерфейса. Проект песочницы содержит контрольную галерею, показанную на картинках, содержащихся в этом посте. Если вы столкнетесь с какими-либо проблемами, связанными с фреймворком Avalonia GUI или Цитрусовой темой, перейдите на Avalonia Gitter. См. Статью Создание кроссплатформенных реактивных приложений .NET для получения дополнительной информации об архитектуре, используемой в кроссплатформенных приложениях C # на основе XAML.

Дальнейшая работа может охватывать больше рекомендаций по дизайну пользовательского интерфейса. Ребята из сообщества Avalonia начали работу над темой Material Design. Кроме того, стоит внедрить новую Microsoft Fluent Design System и Apple Human Interface Guidelines.