Кнопки - ecvento/Material.Avalonia-Wiki GitHub Wiki
Обычные кнопки
Светлая кнопка (Light)
<Button Classes="Light" Content="Light" />
Средняя кнопка (по цвету) (mid)
<Button Content="Mid (Default)" />
В данном случае значение Classes="Mid" не выставлялось, так как оно используется по умолчанию
Темная кнопка
<Button Classes="Dark" Content="Dark" />
Кнопка с акцентом на определенный цвет
<Button Classes="Accent" Content="Accent" />
Примечание - параметр secondary color в app.axaml будет вашим цветом акцента
Кнопка с закругленными углами
<Button Content="Custom corner radius"
CornerRadius="16" />
Примечание - для полностью закругленной кнопки вам необходимо указать в параметре CornerRadius значение равное половине высоты кнопки
Кнопка с контуром
Что бы сделать такие кнопки нам необходимо добавить к параметру имени класса слово "Outline", что бы получилось имя класса, аналогичное этому (на примере Light) - Outline Light
В итоге выйдет:
<Button Classes="Outline Light" Content="Light" />
Это будет работать и для других классов:
<Button Classes="Outline" Content="Mid (Default)" />
Плавающая кнопка с иконкой
У плавающей кнопки с иконкой возможны такие классы:
- Light Mini
- Mini
- Dark Mini
- Accent Mini
- Light
- "" (без класса)
- Dark
- Accent
Пример Плавающей кнопки без иконки
<controls:FloatingButton Classes="Light" />
Пример Плавающей кнопки с иконкой +
<controls:FloatingButton Classes="Accent Mini">
<avalonia:MaterialIcon Kind="Plus" Height="24" Width="24"></avalonia:MaterialIcon>
</controls:FloatingButton>
Расширенные плавающие кнопки
по своей сути расширенные плавающие кнопки это обычные плавающие кнопки с параметром IsExtended="True"
Пример создания такой кнопки:
<controls:FloatingButton Classes="Accent Mini" IsExtended="True" Content="Add Item" MaxWidth="200">
<StackPanel Orientation="Horizontal" Height="24">
<avalonia:MaterialIcon Kind="Plus" Height="24" Width="24"></avalonia:MaterialIcon>
<TextBlock Margin="8,0" Text="ADD ITEM" Classes="Subtitle2" VerticalAlignment="Center" />
</StackPanel>
</controls:FloatingButton>
Плоские кнопки
Плоские кнопки - это кнопки с классом flat, имеют 2 параметра - "Flat" и "Flat Accent"
Пример создания такой кнопки
<Button Classes="Flat" Content="Default" />