Comutador

Procurar no exemplo

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 valor boolean 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.