Partilhar via

Interruptores de alavanca

O interruptor de alternância representa um interruptor físico que permite aos usuários ligar ou desligar coisas, como um interruptor de luz. Utilize interruptores de alternância para apresentar aos utilizadores duas opções mutuamente exclusivas (como ligar/desligar), onde a escolha de uma opção proporciona resultados imediatos.

Para criar um interruptor de alternância, use a classe ToggleSwitch.

Será este o controlo correto?

Use um botão de alternância para operações binárias que entram em vigor logo após o usuário virar o botão de alternância.

Interruptor de alternância,

Desligue o interruptor

Pense no interruptor de alternância como um interruptor de energia físico para um dispositivo: você o liga ou desliga quando deseja ativar ou desativar a ação executada pelo dispositivo.

Para facilitar a compreensão do interruptor de alternância, rotule-o com uma ou duas palavras, de preferência substantivos, que descrevam a funcionalidade que ele controla. Por exemplo, "WiFi" ou "Luzes de cozinha".

Escolher entre o interruptor de liga/desliga e a caixa de verificação

Para algumas ações, um interruptor ou uma caixa de seleção pode funcionar. Para decidir qual controle funcionaria melhor, siga estas dicas:

  • Use um botão de alternância para configurações binárias quando as alterações entrarem em vigor imediatamente após o usuário alterá-las.

    Chave de alternância versus caixa de seleção

    Neste exemplo, fica claro com o interruptor que as luzes da cozinha estão "Ligadas". Mas com a caixa de seleção, o utilizador precisa pensar se as luzes estão ligadas agora ou se precisa marcar a caixa para as ligar.

  • Use caixas de seleção para itens opcionais ("agradáveis de se ter").

  • Use uma caixa de seleção quando o usuário tiver que executar etapas extras para que as alterações sejam efetivas. Por exemplo, se o usuário precisar clicar em um botão "enviar" ou "avançar" para aplicar alterações, use uma caixa de seleção.

  • Use caixas de seleção quando o usuário puder selecionar vários itens relacionados a uma única configuração ou recurso.

Recommendations

  • Use as etiquetas padrão On e Off quando puder; apenas os substitua quando for necessário que o interruptor de alternância faça sentido. Se os substituir, use uma única palavra que descreva mais precisamente o alternador. Em geral, se as palavras "Ativado" e "Desativado" não descreverem a ação vinculada a um interruptor de alternância, talvez seja necessário um controle diferente.
  • Evite substituir as etiquetas On e Off, a menos que seja necessário; Mantenha os rótulos padrão, a menos que a situação exija rótulos personalizados.

Criar um interruptor alternativo

Abra o aplicativo WinUI 3 Gallery e veja o ToggleSwitch em ação

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Veja como criar um interruptor de alternância simples. Este XAML cria o interruptor de alternância mostrado anteriormente.

<ToggleSwitch x:Name="lightToggle" Header="Kitchen Lights"/>

Veja como criar o mesmo interruptor de alternância no código.

ToggleSwitch lightToggle = new ToggleSwitch();
lightToggle.Header = "Kitchen Lights";

// Add the toggle switch to a parent container in the visual tree.
stackPanel1.Children.Add(lightToggle);

IsOn

O interruptor pode estar ligado ou desligado. Use a propriedade IsOn para determinar o estado do switch. Quando o switch é usado para controlar o estado de outra propriedade binária, você pode usar uma ligação, conforme mostrado aqui.

<StackPanel Orientation="Horizontal">
    <ToggleSwitch x:Name="ToggleSwitch1" IsOn="True"/>
    <ProgressRing IsActive="{x:Bind ToggleSwitch1.IsOn, Mode=OneWay}" 
                  Width="130"/>
</StackPanel>

Comutado

Em outros casos, pode-se manipular o evento Toggled para responder às alterações de estado.

Este exemplo mostra como adicionar um manipulador de eventos Toggled em XAML e no código. O evento Alternado é tratado para ligar ou desligar um anel de progresso e alterar a sua visibilidade.

<ToggleSwitch x:Name="toggleSwitch1" IsOn="True"
              Toggled="ToggleSwitch_Toggled"/>

Veja como criar o mesmo interruptor de alternância no código.

// Create a new toggle switch and add a Toggled event handler.
ToggleSwitch toggleSwitch1 = new ToggleSwitch();
toggleSwitch1.Toggled += ToggleSwitch_Toggled;

// Add the toggle switch to a parent container in the visual tree.
stackPanel1.Children.Add(toggleSwitch1);

Aqui está o manipulador para o evento Toggled.

private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
    ToggleSwitch toggleSwitch = sender as ToggleSwitch;
    if (toggleSwitch != null)
    {
        if (toggleSwitch.IsOn == true)
        {
            progress1.IsActive = true;
            progress1.Visibility = Visibility.Visible;
        }
        else
        {
            progress1.IsActive = false;
            progress1.Visibility = Visibility.Collapsed;
        }
    }
}

Etiquetas On/Off

Por padrão, o botão de alternância inclui rótulos literais On e Off, que são localizados automaticamente. Você pode substituir esses rótulos definindo as propriedades OnContente OffContent.

Este exemplo substitui os rótulos Ativado/Desativado por rótulos Mostrar/Ocultar.

<ToggleSwitch x:Name="imageToggle" Header="Show images"
              OffContent="Show" OnContent="Hide"
              Toggled="ToggleSwitch_Toggled"/>

Você também pode usar conteúdo mais complexo ao definir as propriedades OnContentTemplate e OffContentTemplate.

UWP e WinUI 2

Importante

As informações e exemplos neste artigo são otimizados para aplicativos que usam o SDK de Aplicativos Windows e WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam WinUI 2. Consulte a referência da API UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações que você precisa para usar o controle em um aplicativo UWP ou WinUI 2.

As APIs para esse controle existem no namespace Windows.UI.Xaml.Controls .

Recomendamos usar a WinUI 2 mais recente para obter os estilos e modelos mais atuais para todos os controles.

  • Last updated on