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

.NETInterfacesDevelopment for MacOSDevelopment for LinuxDevelopment for Windows
Sandbox

image


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


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


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


image


Еще примеры приложений, использующих 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


image


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


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

ColorZone

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


image


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

FloatingButton

image


<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


image


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


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

Tags:avaloniaavaloniauiguithemecross-platformmaterial design
Hubs: .NET Interfaces Development for MacOS Development for Linux Development for Windows
+17
4k 20
Comments 20

Popular right now

Visual Designer for Whisk, remote
from 4,000 $WhiskRemote job
C# back-end software developer
from 150,000 to 250,000 ₽SoftwareONERemote job
Senior Backend Developer (PHP/Go)
from 300,000 to 320,000 ₽SmartTel PlusВаршаваRemote job
Analyst-developer (.NET)
from 180,000 to 350,000 ₽C-Executives LLCМоскваRemote job
Full-stack Java / Angular Developer
from 120,000 to 250,000 ₽Bergmann Infotech Group OstRemote job