Password effect for WP8 Toolkit PhoneTextBox?

Question

I want to add a password text box to my WP8 project.

The obvious way to go was PasswordBox; however, I want to include a placeholder, which doesn't appear possible.

So I used the PhoneTextBox feature in the WP8 Toolkit, which does allow a placeholder ("hint"). However, that feature doesn't appear to have a way of specifying the field as a password field.

All I want is the little round dots instead of the characters :)

Answer 1

Here is what I had done. Used a passwordBox for the password masking effect of small circular dots, and used a normal text box to show hint in a slight gray kin of color.

Xaml is here:

        <!--used a textbox to show watermark and the other is a password box-->
        <TextBox x:Name="PasswordWatermark" TextWrapping="Wrap" Text="{Binding LocalizedResources.Password, Source={StaticResource LocalizedStrings}}" Foreground="{StaticResource PhoneTextBoxReadOnlyBrush}" IsHitTestVisible="False"/>
        <PasswordBox Name="PwdBox" LostFocus="PasswordBox_LostFocus" Opacity="0" GotFocus="PasswordBox_GotFocus" Password="{Binding Password, Mode=TwoWay}" BorderThickness="0" FontFamily="Segoe UI"  KeyDown="PwdBox_KeyDown" PasswordChanged="PwdBox_PasswordChanged"/>

Just make sure that you set the margins and widths and padding so that these two boxes exactly overlap each other.

Here is the Code

    /// <summary>
    /// Function to be executed when focus is on the password box.
    /// Basic function is to show the watermark in the password box.
    /// </summary>
    /// <param name="sender">object</param>
    /// <param name="e">RoutedEventArgs</param>
    private void PasswordBox_LostFocus(object sender, RoutedEventArgs e)
    {
        CheckPasswordWatermark();
    }

    /// <summary>
    /// Code checking the status of the password box and managing the watermark.
    /// </summary>
    private void CheckPasswordWatermark()
    {
        var passwordEmpty = string.IsNullOrEmpty(PwdBox.Password);
        PasswordWatermark.Opacity = passwordEmpty ? 100 : 0;
        PwdBox.Opacity = passwordEmpty ? 0 : 100;
    }

    /// <summary>
    /// Function to be executed when the password box loses focus.
    /// Basic fuction is to show the watermark in the password box.
    /// </summary>
    /// <param name="sender">object</param>
    /// <param name="e">RoutedEventArgs</param>
    private void PasswordBox_GotFocus(object sender, RoutedEventArgs e)
    {
        PasswordWatermark.Opacity = 0;
        PwdBox.Opacity = 100;
        if (!string.IsNullOrEmpty(PwdBox.Password))
        {
            PwdBox.SelectAll();
        }
    }

This is how it worked for me.