Comutador
O controle Switch do .NET Multi-Platform App UI (.NET MAUI) é um botão de alternância horizontal que pode ser manipulado pelo usuário para alternar entre estados ativado e desativado, que são representados por um valor boolean
.
A captura de tela a seguir mostra um controle Switch em seus estados de alternância ativado e desativado:
O controle Switch define as seguintes propriedades:
IsToggled
é um valorboolean
que indica se o Switch está ativado. O valor padrão dessa propriedade éfalse
.OnColor
é um Color que afeta como o Switch é renderizado no estado alternado ou ativado.ThumbColor
é o Color do elevador da alternância.
Essas propriedades são apoiadas por objetos BindableProperty, o que significa que elas podem ser alvos de associações de dados e ser estilizadas.
O controle Switch define um evento Toggled
gerado quando a propriedade IsToggled
é alterada por meio da manipulação do usuário ou quando um aplicativo define a propriedade IsToggled
. O objeto ToggledEventArgs
que acompanha o evento Toggled
tem apenas uma propriedade chamada Value
, do tipo bool
. Quando o evento é gerado, o valor da propriedade Value
reflete o novo valor da propriedade IsToggled
.
Criar um Switch
Um Switch pode ser instanciado em XAML. Sua propriedade IsToggled
pode ser definida para alternar o Switch. Por padrão, a propriedade IsToggled
é false
. O exemplo a seguir mostra como criar uma instância de Switch em XAML com o conjunto de propriedades opcional IsToggled
:
<Switch IsToggled="true"/>
Um Switch também pode ser criado no código:
Switch switchControl = new Switch { IsToggled = true };
Aparência do Switch
Além das propriedades que Switch herda da classe View, Switch também define as propriedades OnColor
e ThumbColor
. A propriedade OnColor
pode ser configurada para definir a cor Switch quando for alternado para o estado ativado, e a propriedade ThumbColor
pode ser configurada para definir o Color do botão de alternância. O exemplo a seguir mostra como criar uma instância de Switch em XAML com estas propriedades definidas:
<Switch OnColor="Orange"
ThumbColor="Green" />
As propriedades também podem ser definidas ao criar um Switch no código:
Switch switch = new Switch { OnColor = Colors.Orange, ThumbColor = Colors.Green };
A captura de tela a seguir mostra o Switch nos estados ativado e desativado da alternância, com as propriedades OnColor
e ThumbColor
definidas:
Responder a uma alteração de estado do Switch
Quando a propriedade IsToggled
é alterada por meio da manipulação do usuário ou quando um aplicativo define a propriedade IsToggled
, o evento Toggled
é acionado. Um manipulador de eventos para esse evento pode ser registrado para responder à alteração:
<Switch Toggled="OnToggled" />
O arquivo code-behind contém o manipulador do evento Toggled
:
void OnToggled(object sender, ToggledEventArgs e)
{
// Perform an action after examining e.Value
}
O argumento sender
no manipulador de eventos é o Switch responsável por disparar esse evento. Você pode usar a propriedade sender
para acessar o objeto Switch ou distinguir entre vários objetos Switch que compartilham o mesmo manipulador de eventos Toggled
.
O manipulador de eventos Toggled
também pode ser atribuído no código:
Switch switchControl = new Switch {...};
switchControl.Toggled += (sender, e) =>
{
// Perform an action after examining e.Value
};
Associar dados a um Switch
O manipulador de eventos Toggled
pode ser eliminado usando associação de dados e gatilhos para responder a uma alteração de estados de alternância do Switch.
<Switch x:Name="styleSwitch" />
<Label Text="Lorem ipsum dolor sit amet, elit rutrum, enim hendrerit augue vitae praesent sed non, lorem aenean quis praesent pede.">
<Label.Triggers>
<DataTrigger TargetType="Label"
Binding="{Binding Source={x:Reference styleSwitch}, Path=IsToggled}"
Value="true">
<Setter Property="FontAttributes"
Value="Italic, Bold" />
<Setter Property="FontSize"
Value="18" />
</DataTrigger>
</Label.Triggers>
</Label>
Neste exemplo, o Label usa uma expressão de associação em um DataTrigger para monitorar a propriedade IsToggled
do Switch chamado styleSwitch
. Quando essa propriedade se torna true
, as propriedades FontAttributes
e FontSize
do Label são alteradas. Quando a propriedade IsToggled
retorna a false
, as propriedades FontAttributes
e FontSize
de Label são redefinidas para o estado inicial.
Para obter informações sobre gatilhos, consulte Gatilhos.
Estados visuais Switch
Switch tem os estados visuais On
e Off
, que podem ser usados para iniciar uma alteração visual quando a propriedade IsToggled
for alterada.
O seguinte exemplo de XAML mostra como definir estados visuais para os estados On
e Off
:
<Switch IsToggled="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="On">
<VisualState.Setters>
<Setter Property="ThumbColor"
Value="MediumSpringGreen" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Off">
<VisualState.Setters>
<Setter Property="ThumbColor"
Value="Red" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Switch>
Neste exemplo, o On
VisualState especifica que, quando a propriedade IsToggled
for true
, a propriedade ThumbColor
será definida como verde primavera médio. O Off
VisualState especifica que, quando a propriedade IsToggled
for false
, a propriedade ThumbColor
será definida como vermelha. Portanto, o efeito geral é que, quando o Switch está na posição desativada, seu elevador é vermelho, e quando o Switch está na posição ativada, seu elevador é verde primavera médio:
Para obter mais informações sobre estados visuais, consulte Estados visuais.
Desabilitar um Switch
Um aplicativo pode inserir um estado em que alternar o Switch não é uma operação válida. Nesses casos, o Switch pode ser desabilitado definindo a propriedade IsEnabled
dele como false
. Isso impedirá que os usuários possam manipular o Switch.