Эволюция Material Design для AvaloniaUI / Хабр

Material.Avalonia — быстрый способ стилизовать под Material Design приложение, написанное на AvaloniaUI — кросс-платформенном XAML фреймворке для .NET.

Примерно с год назад на Хабре уже была статья о нашей библиотеке, однако с этого момента изменилось многое: мы избавились от встроенных тем, переделали стандартные и добавили свои элементы управления.

Сейчас наше демо приложение выглядит вот так:

Еще примеры приложений, использующих Material.Avalonia

Начало использования

Сначала установим необходимый Nuget пакет:

dotnet add package Material.Avalonia

После этого изменим файл App.xaml, если нам нужно стилизовать все приложение. Либо, если нужно изменить оформление только одного окна или другого элемента управления, то вместо Application.Styles (Application.Resources) у нас будут Window.Styles или UserControl.Styles соответственно.

<Application ...
             xmlns:themes="clr-namespace:Material.Styles.Themes;assembly=Material.Styles"
             ...>
    <Application.Resources>
        <themes:BundledTheme BaseTheme="Light" PrimaryColor="Teal" SecondaryColor="Amber"/>
    </Application.Resources>
    <Application.Styles>
        <StyleInclude Source="avares://Material.Avalonia/Material.Avalonia.Templates.xaml" />
    </Application.Styles>
</Application>

Все, после этого все наше приложение будет использовать стили Material Design.
Однако, не все элементы управления уже стилизованы. Если некоторые из них не работают, то измените Application.Styles следующим образом:

<Application.Styles>
    <StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/>
    <StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseLight.xaml"/>
    <StyleInclude Source="avares://Material.Avalonia/Material.Avalonia.Templates.xaml" />
</Application.Styles>

Данное изменение добавит стандартные темы контролов Avalonia "под" темы Material.Avalonia.

Темы

За последние 2 месяца мы полностью переписали темы, и, из��авились наконец от предварительно заготовленных наборов тем.

Теперь для настройки темы по умолчанию нужно модифицировать свойства BundledTheme в App.xaml.

Базовая тема может быть светлой — Light, темной — Dark и наследуемой — Inherit. Последний вариант будет пытаться получить тему, используемую системой, но в данный момент это еще не реализовано.

BundledTheme поддерживает задание всех, доступных в Material Design, "стандартных" цветов.

Смена цвета, например на Teal, из кода происходит подобным образом:

var paletteHelper = new PaletteHelper();
var theme = paletteHelper.GetTheme();
theme.SetPrimaryColor(SwatchHelper.Lookup[(MaterialColor) PrimaryColor.Teal]);
paletteHelper.SetTheme(theme);

Однако, через код можно задать вообще любой пользовательский цвет из RGBA.
Про работу с цветами темы я напишу отдельную статью.

Кастомные контролы

Card

Спецификация на сайте Material Design

Для Card можно менять размер тени используя Attached Property:

<styles:Card assists:ShadowAssist.ShadowDepth="Depth1">
...
</styles:Card>

ColorZone

Цветовая зона позволяет легко переключать цвета фона и переднего плана из выбранной палитры Material Design или пользовательских цветов.

<styles:ColorZone Margin="4" Padding="8" Mode="Accent">Accent</styles:ColorZone>

FloatingButton

<styles:FloatingButton Content="+"  />
<styles:FloatingButton Content="My long text" />

Тени

В Avalonia поддержка теней "из коробки" ограничена заданием BoxShadows для Border.
Однако уже реализован AttachedProperty ShadowAssist, который может быть использован для Card, FloatingButton и Border.

Когда для Border задается ShadowAssist.ShadowDepth то он самостоятельно корректирует BoxShadows для соответствия выбранному уровню ShadowDepth.

Так-же есть ShadowAssist.Darken, позволяющий затемнять уже существующую тень и делающий это с анимацией. Таким образом сделано изменение тени, при наведение на кнопки.

Демонстрация Card с разными ShadowDepth

Многое уже сделано, еще больше — запланировано.
Ознакомиться или помочь с разработкой можно на GitHub
Скачать пакет на NuGet

Issue/PR и просто отзывы категорически приветствуются.
Поддержку от разработчиков Avalonia и всех сочувствующих можно получить в Telegram (ru) и Gitter (en), а документация по стилизации элементов управления доступна тут.

Эволюция Material Design для AvaloniaUI