How to change the contents of textbox to any one of the special characters using checkbox in c#?

Question

Explanation:

I have one checkbox named hide password and two textboxes named password and conform password respectively.Those two textboxes have been already binded with the old password as follows.

Password: Apple
Conform Password: Apple

Once I select the hide password checkbox,the old password which is already in the password textbox and conform password textbox, should change to ******** .

For Example: If my old password is Apple as soon as I check the hide password checkbox it should change to ***** as follows.

Password: *****
Conform password: *****

Is it possible with c# (wpf) using MVVM?

Answer 1

The following solution uses a TextBox to show the password in plain text and a PasswordBox to mask the password. The PasswordBox is on top of the TextBox, so at first you'd see the password masked. When the "show password" checkbox is checked, the PasswordBox is hidden, thereby showing the TextBox beneath (and the password in plain text). Here's the XAML:

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="VisibilityConverter" />
</Window.Resources>

<StackPanel>
    <Grid>
        <TextBox
            Text="{Binding Password, UpdateSourceTrigger=PropertyChanged}"
            />
        <PasswordBox
            x:Name="PasswordBox"
            PasswordChanged="OnPasswordChanged"
            Visibility="{Binding HidePassword, Converter={StaticResource VisibilityConverter}}"
            />
    </Grid>
    <CheckBox
        Content="Show password"
        IsChecked="{Binding ShowPassword}"
        />
</StackPanel>

It doesn't use MVVM for everything (notice the OnPasswordChanged event handler). This is because the PasswordBox can't use binding, so the password must be set in the code-behind. But before showing that, here's the view model:

public class ViewModel : ViewModelBase
{
    private string _password;
    public string Password
    {
        get => _password;
        set => Set(ref _password, value);
    }

    private bool _showPassword;
    public bool ShowPassword
    {
        get => _showPassword;
        set
        {
            Set(ref _showPassword, value);
            RaisePropertyChanged(nameof(HidePassword));
        }
    }

    public bool HidePassword => !ShowPassword;
}

The Set methods come from the ViewModelBase parent class, which is part of the MVVM Light Toolkit. The Set method simply sets the property's backing field and raises the PropertyChanged event for that property.

Finally, here's the code behind:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        InitializeViewModel();
    }

    public ViewModel ViewModel => DataContext as ViewModel;

    private void InitializeViewModel()
    {
        DataContext = new ViewModel();

        ViewModel.PropertyChanged += (sender, args) =>
        {
            // Update the password box only when it's not visible;
            // otherwise, the cursor goes to the beginning on each keystroke
            if (!PasswordBox.IsVisible)
            {
                if (args.PropertyName == nameof(ViewModel.Password))
                    PasswordBox.Password = ViewModel.Password;
            }
        };
    }

    private void OnPasswordChanged(object sender, RoutedEventArgs e)
    {
        ViewModel.Password = PasswordBox.Password;
    }
}

After setting the DataContext to a new ViewModel, we listen to changes to the Password property so that we update it in the PasswordBox. Notice that we only do this when the PasswordBox is not visible (otherwise, the cursor is set to the beginning on each keystroke and we end up with the password reversed!)

The event handler simply updates the Password in the view model whenever it's changed in the PasswordBox.

The code for the "confirm password" TextBox and PasswordBox would be very similar.

Answer 2

you could solve this by means of a Converter that checks whether you should hide or show the actual Text.
By the use of a MultiValueConverter we can pass in both the original text and a bool which specifies whether we should hide or show it. The return value then is either the actual text or the hidden text:

public class PasswordToHiddenCharactersConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length != 2)
        {
            return string.Empty;
        }

        var passwordText = (string)values[0];
        var hidePassword = (bool)values[1];

        if (hidePassword)
        {
            return string.Empty.PadRight(passwordText.Length, '*');
        }

        return passwordText;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return new[] { value };
    }
}

This then can be used in the XAML to bind the text of the TextBox and it will display correctly depending on the value of the CheckBox:

<Window.Resources>
    <local:PasswordToHiddenCharactersConverter x:Key="PasswordToHiddenCharactersConverter" />
</Window.Resources>

<StackPanel>
    <CheckBox x:Name="HidePasswordBox" Content="Hide Password" />
    <TextBox >
        <TextBox.Text>
            <MultiBinding Converter="{StaticResource PasswordToHiddenCharactersConverter}" UpdateSourceTrigger="PropertyChanged">
                <Binding Path="Password" />
                <Binding ElementName="HidePasswordBox" Path="IsChecked" />
            </MultiBinding>
        </TextBox.Text>
    </TextBox>
</StackPanel>

"Password" is the property name in our ViewModel, for the CheckBox we can directly bind it from within the xaml wihtout having to go via the ViewModel