Кнопки 3.0 - ecvento/Material.Avalonia-Wiki GitHub Wiki

Классы стилей (цвета)

Стили кнопок задаются с помощью конструкции Classes="классы стилей", это общая конструкция

Список классов стилей (для изменения цветовой палитры) для кнопок Avalonia.Material:

  1. light - осветленный основной цвет
  2. dark - затемненный основной цвет
  3. accent - цвет акцента
  4. mid (используется по умолчанию, прописывать в Classes нет необходимости

Обратите внимание: в отличии от 3.0, в 2.5 данные классы пишутся с заглавной буквы!

Примеры кнопок:

ScreenRecorderProject3

Пример кода для создания светлой кнопки:

<Button Classes="light" Content="Light"/>

Темы кнопок

На момент версии 14.01 (ветка 3.0 major_update) тему к кнопке можно применить через класс темы (имя класса - название пункта)

Список тем с примерами:

  1. Outline - кнопка с контуром

ScreenRecorderProject4

  1. Regular - стандартная кнопка (используется по умолчанию, объявлять нет необходимости)

ScreenRecorderProject7

  1. Flat - плоская кнопка

ScreenRecorderProject8

Объявление кнопки с контуром, с цветовым акцентом, с помощью Classes:

<Button Classes="accent Outline" Content="Accent"

То же самое, но в 3.0 рекомендуется использовать именно этот способ:

<Button Theme="{StaticResource OutlineButton}" Classes="accent" Content="Accent"/>

Для плоской кнопки используется статический ресурс FlatButton

Существует класс для закругления кнопки - CornerRadius

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

Пример - высота кнопки 32, значит CornerRadius будет равен 16-ти.

Пример создания кнопки с закругленными углами:

<Button Content="Custom corner radius"
        CornerRadius="16" />

ScreenRecorderProject9

Присоединённые свойства (ButtonAssist AttachedProperties)

У кнопки два прикрепленных свойства - HoverColor и ClickFeedback

HoverColor - цвет наведения курсора

  • синтаксис :assist:ButtonAssist.HoverColor="Red"

ClickFeedback - цвет при нажатии

  • синтаксис :assist:ButtonAssist.ClickFeedbackColor="Yellow"

Пример кода кнопки полностью:

<Button assist:ButtonAssist.ClickFeedbackColor="Yellow" 
        assist:ButtonAssist.HoverColor="Blue" 
        Content="Test" 
        Background="White"/>

Результат:

ScreenRecorderProject2