showing password characters on some event for passwordbox

Question

I am developing a windows phone application.In that i ask the user to login.

On the login page the user has to enter password.

Now what I want is that i give

Answer 1

with default passwordbox it's not possible to implement the feature you want.

more information you can find here: http://social.msdn.microsoft.com/Forums/en/wpf/thread/98d0d4d4-1463-481f-b8b1-711119a6ba99

Answer 2

Don't think that is possible with PasswordBox... just a thought, but you might accomplish the same result using a hidden TextBox and when the user clicks the CheckBox, you just hide the PasswordBox and show the TextBox; if he clicks again, you switch their Visibility state again, and so on...

Edit

And here it is how!

Just add a page, change the ContentPanel to a StackPanel and add this XAML code:

<PasswordBox x:Name="MyPasswordBox" Password="{Binding Text, Mode=TwoWay, ElementName=MyTextBox}"/>
<TextBox x:Name="MyTextBox" Text="{Binding Password, Mode=TwoWay, ElementName=MyPasswordBox}" Visibility="Collapsed" />
<CheckBox x:Name="ShowPasswordCharsCheckBox" Content="Show password" Checked="ShowPasswordCharsCheckBox_Checked" Unchecked="ShowPasswordCharsCheckBox_Unchecked" />

Next, on the page code, add the following:

private void ShowPasswordCharsCheckBox_Checked(object sender, RoutedEventArgs e)
{
    MyPasswordBox.Visibility = System.Windows.Visibility.Collapsed;
    MyTextBox.Visibility = System.Windows.Visibility.Visible;

    MyTextBox.Focus();
}

private void ShowPasswordCharsCheckBox_Unchecked(object sender, RoutedEventArgs e)
{
    MyPasswordBox.Visibility = System.Windows.Visibility.Visible;
    MyTextBox.Visibility = System.Windows.Visibility.Collapsed;

    MyPasswordBox.Focus();
}

This works fine, but with a few more work, you can do this fully MVVM'ed!

Answer 3

I created an MVVM example, which I'm also using in real life. Please note that PasswordBox.Password is not a Dependency Property and thus cannot be bound directly. It's designed like that for security reasons, for details see: How to bind to a PasswordBox in MVVM

If you want to do it anyway, you have to build a bridge to your view model using code behind. I'm not providing the converters, as you're probably using your own set of converters. If not, please ask google for suitable implementations.

EnterPasswordWindow.xaml

<Window x:Class="MyDemoApp.Controls.EnterPasswordWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyDemoApp.Controls"
        mc:Ignorable="d" d:DataContext="{d:DesignInstance local:EnterPasswordViewModel}"
        WindowStartupLocation="CenterOwner" ResizeMode="NoResize" SizeToContent="WidthAndHeight"
        Title="Enter Password">
    <StackPanel Margin="4">
        <TextBlock Margin="4">Please enter a password:</TextBlock>
        <TextBox Margin="4" Text="{Binding Password, UpdateSourceTrigger=PropertyChanged}" Visibility="{Binding ShowPassword, Converter={StaticResource BoolToVisibleConverter}}"/>
        <PasswordBox Margin="4" Name="PasswordBox" Visibility="{Binding ShowPassword, Converter={StaticResource BoolToHiddenConverter}}" PasswordChanged="PasswordBox_PasswordChanged"/>
        <CheckBox Margin="4" IsChecked="{Binding ShowPassword}">Show password</CheckBox>
        <DockPanel>
            <Button Margin="4" Width="150" Height="30" IsDefault="True" IsEnabled="{Binding Password, Converter={StaticResource StringIsNotNullOrEmptyConverter}}" Click="Button_Click">OK</Button>
            <Button Margin="4" Width="150" Height="30" IsCancel="True" HorizontalAlignment="Right">Cancel</Button>
        </DockPanel>
    </StackPanel>
</Window>

EnterPasswordWindow.xaml.cs

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;

namespace MyDemoApp.Controls
{
    /// <summary>
    /// Interaction logic for EnterPasswordWindow.xaml
    /// </summary>
    public partial class EnterPasswordWindow : Window
    {
        public EnterPasswordWindow()
        {
            InitializeComponent();
            DataContext = ViewModel = new EnterPasswordViewModel();
            ViewModel.PropertyChanged += ViewModel_PropertyChanged;
        }

        public EnterPasswordViewModel ViewModel { get; set; }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            DialogResult = true;
            Close();
        }

        private void ViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            if (!mSuppressPropertyChangedEvent && e.PropertyName == nameof(ViewModel.Password))
            {
                PasswordBox.Password = ViewModel.Password;
            }
        }
        private bool mSuppressPropertyChangedEvent;
        private void PasswordBox_PasswordChanged(object sender, RoutedEventArgs e)
        {
            mSuppressPropertyChangedEvent = true;
            ViewModel.Password = ((PasswordBox)sender).Password;
            mSuppressPropertyChangedEvent = false;
        }
    }
}

EnterPasswordViewModel.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace MyDemoApp.Controls
{
    public class EnterPasswordViewModel : INotifyPropertyChanged
    {
        public string Password
        {
            get => mPassword;
            set
            {
                if (mPassword != value)
                {
                    mPassword = value;
                    NotifyPropertyChanged();
                }
            }
        }
        private string mPassword;

        public bool ShowPassword
        {
            get => mShowPassword;
            set
            {
                if (mShowPassword != value)
                {
                    mShowPassword = value;
                    NotifyPropertyChanged();
                }
            }
        }
        private bool mShowPassword;

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged([CallerMemberName]string propertyName = null)
        {
            if (string.IsNullOrEmpty(propertyName))
            {
                return;
            }
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Answer 4

You could create your own control that inherits from textbox however after each character you replace it with an *, storing the true value within a private variable on the page. Using a checkbox you can then toggle whether the value in the textbox shows the true value or the * value.

It's not an elegant solution nor is it a best practice, however I think it's still an alternative if you are willing to live with it.