Botão para Mostrar e Ocultar Senhas em TextBox no C# 🔐👀

Conheça o “ECTurbo”: https://edivamcabral.com.br/bundle_details/10

Olá, desenvolvedor(a)! Proteger a senha do usuário é essencial , mas oferecer a opção de visualizá-la temporariamente pode melhorar a experiência. Neste tutorial, você vai aprender como criar um botão que alterna entre mostrar e ocultar a senha em um TextBox no C#. Vamos usar a propriedade UseSystemPasswordChar e dinamizar tudo com ícones e eventos!

Assista todas as aulas

Aula 1 Layout do Formulário de Login

O que você vai aprender:

Como configurar um TextBox para ocultar caracteres de senha.
Como criar um botão funcional para mostrar e ocultar senhas.
Como alterar ícones dinamicamente para melhorar a usabilidade.

Configurando o TextBox para Ocultar Senhas

O primeiro passo é configurar o TextBox para exibir os caracteres como pontos ou bolinhas (•). Isso é feito através da propriedade UseSystemPasswordChar.

Passo a Passo:

Selecione o seu TextBox no Designer do Visual Studio.
Na janela Propriedades, localize a opção UseSystemPasswordChar.
Altere o valor para True.

Agora, qualquer valor digitado no campo será exibido como •.

Criando o Botão para Mostrar/Ocultar Senha ‍

Com o TextBox configurado, é hora de adicionar um botão que permita alternar entre mostrar e ocultar os caracteres da senha. Usaremos dois eventos principais: MouseDown e MouseUp.

Código C#

Aqui está o código para implementar essa funcionalidade:

private void BtMostraSenha_MouseDown(object sender, MouseEventArgs e)
{
    TxtSenha.UseSystemPasswordChar = false; // Mostra a senha
    BtMostraSenha.Image = Resources.visivel; // Altera o ícone do botão para "olho aberto"
}

private void BtMostraSenha_MouseUp(object sender, MouseEventArgs e)
{
    TxtSenha.UseSystemPasswordChar = true; // Oculta a senha
    BtMostraSenha.Image = Resources.invisivel; // Altera o ícone do botão para "olho fechado"
}

private void BtMostraSenha_MouseDown(object sender, MouseEventArgs e)

{

TxtSenha.UseSystemPasswordChar = false; // Mostra a senha

BtMostraSenha.Image = Resources.visivel; // Altera o ícone do botão para "olho aberto"

}

private void BtMostraSenha_MouseUp(object sender, MouseEventArgs e)

{

TxtSenha.UseSystemPasswordChar = true; // Oculta a senha

BtMostraSenha.Image = Resources.invisivel; // Altera o ícone do botão para "olho fechado"

}

Como funciona?

MouseDown: Quando o botão é pressionado, a senha é exibida (propriedade UseSystemPasswordChar = false) e o ícone do botão muda para “olho aberto” .

MouseUp: Quando o botão é solto, a senha volta a ser ocultada (UseSystemPasswordChar = true) e o ícone muda para “olho fechado” .

Alterando os Ícones do Botão

Para dar um feedback visual ao usuário, usaremos dois ícones diferentes:

Visível: Representa o estado em que a senha é mostrada.
Invisível: Representa o estado em que a senha está oculta.

Como adicionar ícones:

Faça o download dos ícones (16×16 pixels) para “visível” e “invisível”.
Importe os arquivos no Resource Manager do Visual Studio.
No código, use Resources.visivel e Resources.invisivel para alternar entre eles.

Resultado Final

Após implementar o código acima, você terá um botão funcional que:

Revela ou oculta os caracteres do campo de senha ao ser pressionado.
Altera dinamicamente o ícone do botão.

Veja o comportamento:
Digite algo no campo de senha.
Pressione e segure o botão: a senha será exibida.
Solte o botão: a senha voltará a ser oculta.

Dicas Extras

Experimente personalizar os ícones para combinar com o estilo do seu sistema.
Teste em diferentes resoluções para garantir alinhamento perfeito.
Adicione uma animação sutil para melhorar a experiência do usuário.

Conclusão

Adicionar um botão para mostrar e ocultar senhas é uma funcionalidade simples, mas poderosa, que combina segurança e usabilidade . Com este guia, você tem tudo o que precisa para implementar essa funcionalidade no seu próximo projeto.

Gostou do artigo? Deixe seu comentário, compartilhe com seus colegas e não se esqueça de dar aquele ! Vamos juntos criar sistemas mais seguros e funcionais!