Caixa de palavra-passe

Uma caixa de senha é uma caixa de entrada de texto que oculta os caracteres digitados nela para fins de privacidade. Um campo de palavra-passe é semelhante a uma caixa de texto, exceto que exibe caracteres substitutos no lugar do texto que foi inserido. Você pode configurar o caractere de espaço reservado.

Por padrão, a caixa de senha fornece uma maneira para o usuário visualizar sua senha mantendo pressionado um botão de revelação. Você pode desativar o botão de revelação ou fornecer um mecanismo alternativo para revelar a senha, como uma caixa de seleção.

Será este o controlo correto?

Use um controle de PasswordBox para coletar uma senha ou outros dados privados, como um número de segurança social.

Para saber mais sobre como escolher o controle de texto correto, veja o artigo Controles de texto .

Recommendations

• Utilize uma etiqueta ou texto de espaço reservado se a finalidade do campo de senha não estiver clara. Um rótulo é visível independentemente de a caixa de entrada de texto ter ou não um valor. O texto do espaço reservado é exibido dentro da caixa de entrada de texto e desaparece assim que um valor é inserido.
• Dê à caixa de senha uma largura apropriada para o intervalo de valores que podem ser inseridos. O tamanho das palavras varia entre idiomas, assim, leve a localização em consideração se quiser que a sua aplicação esteja preparada para um público global.
• Não coloque outro controle ao lado de uma caixa de entrada de senha. A caixa de senha tem um botão de revelação de senha para os usuários verificarem as senhas que digitaram, e ter outro controle ao lado pode fazer com que os usuários revelem acidentalmente suas senhas quando tentam interagir com o outro controle. Para evitar que isso aconteça, coloque algum espaçamento entre a palavra-passe na caixa de entrada e o outro controle, ou coloque o outro controle na linha seguinte.
• Considere apresentar duas caixas de senha para a criação da conta: uma para a nova senha e uma segunda para confirmar a nova senha.
• Mostre apenas uma única caixa de senha para logins.
• Quando uma caixa de senha é usada para inserir um PIN, considere fornecer uma resposta instantânea assim que o último número for inserido, em vez de usar um botão de confirmação.

Examples

A caixa de palavra-passe tem vários estados, incluindo estes destacáveis.

Uma caixa de senha em repouso pode mostrar o texto de dica para que o usuário saiba sua finalidade:

Quando o usuário digita uma caixa de senha, o comportamento padrão é mostrar marcadores que ocultam o texto que está sendo inserido:

Pressionar o botão "revelar" à direita dá uma espiada no texto da senha que está sendo inserido:

Criar uma caixa de palavra-passe

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

Use a propriedade Password para obter ou definir o conteúdo da PasswordBox. Você pode fazer isso no manipulador do evento PasswordChanged para efetuar a validação enquanto o utilizador insere a palavra-passe. Ou, você pode usar outro evento, como um botão Click, para executar a validação depois que o usuário concluir a entrada de texto.

Aqui está o XAML para um controle de caixa de senha que demonstra a aparência padrão da PasswordBox. Quando o usuário insere uma senha, você verifica se é o valor literal, "Senha". Se estiver, você exibirá uma mensagem para o usuário.

<StackPanel>  
  <PasswordBox x:Name="passwordBox" Width="200" MaxLength="16"
             PasswordChanged="passwordBox_PasswordChanged"/>

  <TextBlock x:Name="statusText" Margin="10" HorizontalAlignment="Center" />
</StackPanel>   

private void passwordBox_PasswordChanged(object sender, RoutedEventArgs e)
{
    if (passwordBox.Password == "Password")
    {
        statusText.Text = "'Password' is not allowed as a password.";
    }
    else
    {
        statusText.Text = string.Empty;
    }
}

Aqui está o resultado quando este código é executado e o usuário insere "Senha".

Caractere de palavra-passe

Você pode alterar o caractere usado para mascarar a senha definindo a propriedade PasswordChar . Aqui, o marcador padrão é substituído por um sinal de libra.

<PasswordBox x:Name="passwordBox" Width="300" PasswordChar="#"/>

O resultado é este.

Cabeçalhos e texto de espaço reservado

Você pode usar as propriedades de cabeçalho e PlaceholderText para fornecer contexto para o PasswordBox. Isso é especialmente útil quando você tem várias caixas, como em um formulário para alterar uma senha.

<PasswordBox x:Name="passwordBox" Width="200" Header="Password" PlaceholderText="Enter your password"/>

Comprimento máximo

Especifique o número máximo de caracteres que o usuário pode inserir definindo a propriedade MaxLength . Não há nenhuma propriedade para especificar um comprimento mínimo, mas você pode verificar o comprimento da senha e executar qualquer outra validação no código do aplicativo.

Modo de revelação de palavra-passe

O PasswordBox tem um botão interno que o usuário pode pressionar para exibir o texto da senha. Aqui está o resultado da ação do usuário. Quando o usuário a libera, a senha é automaticamente ocultada novamente.

Modo de visualização rápida

Por padrão, o botão de revelação de senha (ou botão "espiar") é mostrado. O usuário deve pressionar continuamente o botão para visualizar a senha, para que um alto nível de segurança seja mantido.

O valor da propriedade PasswordRevealMode não é o único fator que determina se um botão de revelação de senha está visível para o usuário. Outros fatores incluem se o controle é exibido acima de uma largura mínima, se o PasswordBox tem foco e se o campo de entrada de texto contém pelo menos um caractere. O botão de revelação de senha é mostrado somente quando a PasswordBox recebe o foco pela primeira vez e um caractere é inserido. Se a PasswordBox perder o foco e, em seguida, recuperar o foco, o botão de revelação não será mostrado novamente, a menos que a senha seja limpa e a entrada de caracteres recomece.

Modos oculto e visível

Os outros valores de enumeração de PasswordRevealMode, Hidden e Visible, ocultam o botão de revelação de senha e lhe permitem gerenciar programaticamente se a senha está oculta.

Para sempre ocultar a senha, defina PasswordRevealMode como Hidden. A menos que você precise que a senha esteja sempre oculta, você pode fornecer uma interface do usuário personalizada para permitir que o usuário alterne o PasswordRevealMode entre Hidden e Visible. Por exemplo, você pode usar uma caixa de seleção para alternar se a senha está oculta, conforme mostrado no exemplo a seguir. Você também pode usar outros controles, como ToggleButton, para permitir que o usuário alterne de modo.

Este exemplo mostra como usar uma CheckBox para permitir que um usuário alterne o modo de revelação de uma PasswordBox.

<StackPanel Width="200">
    <PasswordBox Name="passwordBox1"
                 PasswordRevealMode="Hidden"/>
    <CheckBox Name="revealModeCheckBox" Content="Show password"
              IsChecked="False"
              Checked="CheckBox_Changed" Unchecked="CheckBox_Changed"/>
</StackPanel>

private void CheckBox_Changed(object sender, RoutedEventArgs e)
{
    if (revealModeCheckBox.IsChecked == true)
    {
        passwordBox1.PasswordRevealMode = PasswordRevealMode.Visible;
    }
    else
    {
        passwordBox1.PasswordRevealMode = PasswordRevealMode.Hidden;
    }
}

Esta PasswordBox tem esta aparência.

Escolha o teclado certo para o seu controlo de texto

Para ajudar os usuários a inserir dados usando o teclado virtual ou o SIP (Painel de Entrada Flexível), você pode definir o escopo de entrada do controle de texto para corresponder ao tipo de dados que o usuário deve inserir. PasswordBox suporta apenas os valores de escopo de entrada Password e NumericPin. Qualquer outro valor é ignorado.

Para saber mais sobre como usar escopos de entrada, veja Usar escopo de entrada para alterar o teclado virtual.

UWP e 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. WinUI 2.2 ou posterior inclui um novo modelo para este controle que usa cantos arredondados. Consulte Raio de cantopara obter mais informações.

Artigos relacionados

Controles de texto

• Diretrizes para verificação ortográfica
• Adicionar pesquisa
• Diretrizes para entrada de texto
• Classe TextBox
• classe
• Propriedade String.Length