В менеджере пакетов Nuget находите пакет Arion.Style
и устанавливаете его
В документ App.xaml
добавляете словарь
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Arion.Theme;component/ArionUiTheme.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Использование конкретных элементов прописано в самом элементе
- Кнопки
- Текстовые поля
- Чек бокс
- Переключатель
- Радио кнопки
- Свитчер
- Слайдер
- Списки
- Табы
- Всплывающие подсказки
- Цвета
- Иконки
Есть несколько типов стилей кнопок Filled
, Outline
, Text
Filled - Закрашенные без рамок Outline - Белые кнопки с рамками Text - Белые кнопки без рамок, на белом фоне похожи на простой текст, пока не наведешь
Так же есть 3 размера этих кнопок Large(Lg
), Medium(Md
) и Small(Sm
)
Для использования стилей пишете сначала тип кнопки, потом её размер в сокращенном варианте
Доступные стили для версии 0.1.3
Filled | Outline | Text | |
---|---|---|---|
Large (Lg) | ![]() |
![]() |
![]() |
Medium (Md) | ![]() |
![]() |
![]() |
Small (Sm) | ![]() |
![]() |
![]() |
FilledLg
,
FilledMd
,
FilledSm
,
OutlineLg
,
OutlineMd
,
OutlineSm
,
TextLg
,
TextMd
,
TextSm
.
Стиль текстового поля задан по умолчанию, поэтому какой то определенный стиль применять не требуется.
Так же есть текстовое поле с элементом предварительного текста TextInput
.
В этом элементе можно указать свойство Placeholder, которое отобразит текст, который будет пропадать при вводе.
xmlns:controls="clr-namespace:Arion.Theme.Controls;assembly=Arion.Theme"
<controls:TextInput Placeholder="Placeholder" />
Стиль данного элемента также установлен по умолчанию, и имеет разное отображение на 3 состояния Checked
, Unchecked
, Null
Стиль установлен по умолчанию
Переключатели или же свитчеры, стиль для Радио кнопок.
Имеют 3 типа по отображению
Switcher | |
---|---|
First | ![]() |
Middle | ![]() |
Last | ![]() |
SwitcherFirst
, SwitcherMiddle
, SwitcherLast
Pr | R | G | Y | P | T | |
---|---|---|---|---|---|---|
50 | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
100 | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
200 | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
300 | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
400 | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
500 | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
600 | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
700 | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
800 | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
900 | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Pr50
, Pr100
, Pr200
, Pr300
, Pr400
, Pr500
, Pr600
, Pr700
, Pr800
, Pr900
и так далее
El1 | El2 | El3 | El4 | El5 | El6 |
---|---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Для того что бы использовать иконки требуется так же подключить директорию контролов из библиотеки
xmlns:controls="clr-namespace:Arion.Theme.Controls;assembly=Arion.Theme"
После чего появится возможность использовать элемент Icon
<controls:Icon Kind="" Width="" Height="" Fill=""/>
В данном элементе есть 4 стандартных свойства которые требуется задать
Kind
- ИконкаWidth
- ШиринаHeight
- ВысотаFill
- Заливка цветом
Пак всех иконок будет добавлен позднее