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: 🛠️

1️⃣ Selecione o seu TextBox no Designer do Visual Studio.
2️⃣ Na janela Propriedades, localize a opção UseSystemPasswordChar.
3️⃣ 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:

1️⃣ Faça o download dos ícones (16×16 pixels) para “visível” e “invisível”.
2️⃣ Importe os arquivos no Resource Manager do Visual Studio.
3️⃣ 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:
1️⃣ Digite algo no campo de senha.
2️⃣ Pressione e segure o botão: a senha será exibida.
3️⃣ 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!