Стильная Авалония
Стили, по умолчанию, что в wpf, что в авалонии, крайне нейтральны, и далеко не всегда подходят под нужные нам задачи, и немногие начинающие разработчики дружат с ними. В этой заметке я бы хотел рассказать про основы работы со стилями и показать пару интересных примеров.
Для чего же нужны стили в фреймворке авалония?
- Стили дают большую свободу при кастомизации элементов;
- Позволяют не дублировать описания элементов;
- Разделяют саму разметку и ее дизайн.
Пара примеров
Для лучшего понимания стилей сначала обратимся к примеру:
Закругленная кнопка (нечто, похожее на убунту гном)
Для этого создадим в стандартном шаблоне (как создать шаблон) простенькую разметку из стек панели и пары кнопок.
Теперь мы можем ручками задать кнопкам основной фон и цвет шрифта, но тогда нам придется дублировать код. Стиль поможет избежать этого повтора.
Добавим окну соответствующий стиль
Получаем нечто похожее, но было бы неплохо скруглить края. К сожалению, как бы мы не пытались, скруглить края кнопки невозможно, но можно скруглить края шаблона, отвечающего за отображение кнопки. Для этого добавим еще один стиль:
Получилось почти похоже, однако есть проблема — при наведении на кнопку появляется какая-то серая рамка (привет от стандартного стиля).
Для этого обратимся к псевдоклассу css: pointerover и добавим еще один стиль:
Так гораздо лучше.
А что, если я хочу применить стили только к конкретным кнопкам?
Добавим к шаблону еще одну кнопку и пропишем кнопкам, которые хотим «украсить», атрибут Classes.
А стилям укажем, что надо влиять только на определенные классы
Чуть улучшенный похож на андроидный (немного)
Где использовать стили
Стили можно использовать как в рамках окна (как мы делали в примерах, написанных выше),
так и в рамках всего приложения (тогда стиль применится во всех окнах)
Для этого нужно добавить стиль в файл App.xaml
Большее разделение
С усложнением кода мы уже не хотим держать стили внутри разметки окна, а предпочли бы их вынести в отдельный файл
Для этого создадим директорию Styles и поместим туда наши стили в виде xml или xaml файлов, добавив указания неймспейсов
Добавим в проектный файл (*.csproj) новые ресурсы:
И подключим их используя тег StyleInclude
Но иногда этого недостачно, и хочется вынести стили в отдельную dll, чтобы использовать во всех своих проектах.
Для этого создадим ClassLibrary и обеспечим поддержку наших будущих файлов в качестве авалония ресурсов:
Designer
Designer
Теперь добавим уже знакомый нам Styles.xml и еще 2 новых файла в проект: 
В xaml файле обязательно нужно указать неймспейсы и класс, которому он принадлежит, а так же подлючение необходимого ресурса
А в cs файле определим, что это стиль и не более:
namespace ClassLibrary1
{
public class DarkCustom:Styles
{
}
}
Добавим зависимость на нашу библиотеку и вновь подключим стиль, указав стиль как авалония ресурс, используя StyleInclude и
Еще немного полезного
Базовые представления о том, как написать стиль для того, или иного элемента вы можете получить здесь (тык)
А если у вас нет времени\желания составлять свой стиль, то вы можете воспользоваться этим замечательным генератором стилей (тык)
Хотелось бы сказать спасибо ForNeVeR kekekeks worldbeater
И отметить, что поддержку по c# можно найти здесь, а по авалонии здесь.
