WPF - Text box as password with option to show the real password or hide by image control

Question

Hi,

How I can implement password + show hide it with text box?

Can you please provide solution in xaml and C#?

Thanks,

Answer 1

Hi דני שטרית

Sure, you can use a combination of a PasswordBox for entering the password and a CheckBox for toggling the visibility of the password for this requirement you mentioned.

Xaml smippet here -

<Window x:Class="YourNamespace.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="Password TextBox Demo" Height="300" Width="400">     <Grid>         <StackPanel Margin="20">             <TextBlock Text="Enter Password:" FontWeight="Bold" Margin="0,0,0,5"/>                          <PasswordBox x:Name="passwordBox" Margin="0,0,0,10"/>                          <CheckBox Content="Show Password" x:Name="showPasswordCheckBox" Checked="ShowPassword_Checked" Unchecked="ShowPassword_Unchecked"/>         </StackPanel>     </Grid> </Window> 

C# here

using System.Windows;  namespace YourNamespace {     public partial class MainWindow : Window     {         public MainWindow()         {             InitializeComponent();         }          private void ShowPassword_Checked(object sender, RoutedEventArgs e)         {             // When "Show Password" is checked, change PasswordBox's property to show the password             passwordBox.PasswordChar = '\0';         }          private void ShowPassword_Unchecked(object sender, RoutedEventArgs e)         {             // When "Show Password" is unchecked, change PasswordBox's property to hide the password             passwordBox.PasswordChar = '●'; // You can use any character you prefer to represent hidden characters         }     } } 

Try the above snippet and change it as per ur wish, hope it works.

If this helps kindly accept the answer thanks much.

Answer 2

Hi,@דני שטרית.Welcome to Microsoft Q&A.
To implement a custom TextBox that allows users to toggle between displaying the actual password and showing asterisks, you could try the following example.

SecureTextBox.xaml:

<Grid>
        <TextBox x:Name="textBox" PreviewKeyDown="TextBox_PreviewKeyDown" />
        <CheckBox Content="Show Password" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"
                  VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="5"/>
    </Grid>

SecureTextBox :

 public partial class SecureTextBox : UserControl
  {
    private bool isTextVisible = false;

    public SecureTextBox()
    {
      InitializeComponent();
    }

    private void TextBox_PreviewKeyDown(object sender, KeyEventArgs e)
    {
      if (e.Key == Key.Space)
      {
        ToggleTextVisibility();
      }
    }

    private void ToggleTextVisibility()
    {
      isTextVisible = !isTextVisible;
      UpdateTextVisibility();
    }

    private void UpdateTextVisibility()
    {
      if (isTextVisible)
      {
        textBox.Text = SecureText;
      }
      else
      {
        SecureText = textBox.Text;
        textBox.Text = new string('*', SecureText.Length);
      }
    }

    private void CheckBox_Checked(object sender, RoutedEventArgs e)
    {
      isTextVisible = true;
      UpdateTextVisibility();
    }

    private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
    {
      isTextVisible = false;
      UpdateTextVisibility();
    }

    public static readonly DependencyProperty SecureTextProperty =
        DependencyProperty.Register("SecureText", typeof(string), typeof(SecureTextBox));

    public string SecureText
    {
      get { return (string)GetValue(SecureTextProperty); }
      set { SetValue(SecureTextProperty, value); }
    }
  }

Usage:

  <local:SecureTextBox SecureText="{Binding MyText}" />

MainWindow :

 public partial class MainWindow : Window, INotifyPropertyChanged
  {
    public MainWindow()
    {
      InitializeComponent();
    
      DataContext =this;
    }

    public string MyText { get;set;}  ="hello ";


    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propertyName)
    {
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

   
  }

The result:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.