Переключатели - ecvento/Material.Avalonia-Wiki GitHub Wiki

Oбычные переключатели

Обычные переключатели

Для создания простого переключателя необходимо использовать такую строку:

<ToggleSwitch Content="Switch me!" />

В примере выше переключатель будет в состоянии выключен. Для того, что бы переключатель был по умолчании в состоянии включен необходимо использовать свойство IsChecked="True". Пример:


<ToggleSwitch Content="Switch me too!" IsChecked="True" />

Для того, что бы заблокировать состояние переключателя необходим параметр IsEnabled="False". Пример:


<ToggleSwitch Content="You can't switch me!" IsEnabled="False" />

Так же можно сменить цвет переключателя (активного) на цвет акцента с помощью параметра Classes="Accent"

Пример:


<ToggleSwitch Content="Accent color" IsChecked="True" Classes="Accent" />

Обычный переключатель (текст слева)

переключатель справа

Мы можем сменить положение переключателя относительно текста с помощью параметра Classes="LeftHeader"

Пример:


<ToggleSwitch Classes="LeftHeader" Content="Switch me too!" IsChecked="True" />

Флажки (чекбоксы)

чекбоксы

Пример обычного флажка


<CheckBox Content="This is checkbox!" />

Для того, что бы флажок был включенным по умолчанию есть параметр IsChecked="True"


 <CheckBox Content="This is checkbox!" IsChecked="True" />

Заблокировать флажок можно с помощью параметра IsEnabled="False"


<CheckBox Content="Uncheckable" IsChecked="False" IsEnabled="False" />

И по классике - смена цвета флажка происходит с помощью параметра Classes="Accent"


<CheckBox Content="This is checkbox!" Classes="Accent" />

Круглый переключатель

круглый переключатель

У переключателя есть параметры: имя группы переключателей GroupName="1", состояние (один из них должен иметь параметр IsChecked="True"), а так же может иметь параметр Classes="Accent".

Пример:


<RadioButton GroupName="1" Content="This is radiobutton!" />
<RadioButton GroupName="1" Content="This is radiobutton!" IsChecked="True" />
<RadioButton GroupName="1" Content="Uncheckable" IsChecked="False" IsEnabled="False" />

В примере выше IsEnabled="False" сделало неактивным один круглый переключатель

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

Круглый переключатель похожий на кнопку

rheuksq gth

Синтаксис:

<controls:Card Padding="0" InsideClipping="True">
   <StackPanel Orientation="Horizontal">
	<RadioButton Classes="Button" GroupName="3"
	   Content="{avalonia:MaterialIconExt Kind=FormatAlignLeft}"
	   Theme="{StaticResource RadioButton}"/>
	<RadioButton Classes="Button" GroupName="3"
	   Content="{avalonia:MaterialIconExt Kind=FormatAlignCenter}"
	   IsChecked="True"
	   Theme="{StaticResource RadioButton}"/> 
	<RadioButton Classes="Button" GroupName="3"
	   Content="{avalonia:MaterialIconExt Kind=FormatAlignRight}"
	   IsEnabled="False"
	   Theme="{StaticResource RadioButton}"/> 
        <RadioButton Classes="Button" GroupName="3"
	   Content="{avalonia:MaterialIconExt Kind=FormatAlignJustify}" 
	   Theme="{StaticResource RadioButton}"/>
   </StackPanel>
</controls:Card>

Кнопки переключения

кнопки переключения

<ToggleButton>ToggleButton</ToggleButton> - простая кнопка переключения с анимацией

<ToggleButton Classes="NoFeedback">NoFeedback</ToggleButton> - анимация отключена

<ToggleButton IsEnabled="False">Disabled</ToggleButton> - кнопка не активна

<ToggleButton Classes="Icon">
   <avalonia:MaterialIcon Kind="Globe"></avalonia:MaterialIcon>
</ToggleButton>

кнопка переключатель с иконкой

(на данный момент у автора вики возникли проблемы с Кнопкой переключения - сбой с применением темы)