How can I create a PasswordBox with an input scope that accepts only numbers?

Question

This seems like a glaring oversight in Windows Phone. The <PasswordBox /> control doesn't allow for specifying InputScope.

I need to show the PasswordBox as part of a custom password entry screen (e.g. images and buttons), and show a numeric keypad to allow only numeric input.

Coding4Fun's PasswordInputPrompt allows for numeric input but it's not customizable, in that I can't build a custom layout around it, it only allows for Title & Message values.

Is there any way for me to do this?

Answer 1

Your best off just creating your own user control.

The xaml would look something like:

<Grid x:Name="LayoutRoot">
    <TextBox x:Name="PasswordTextBox" InputScope="Number" MaxLength="{Binding MaxLength, ElementName=UserControl}" KeyUp="PasswordTextBox_KeyUp"/>
</Grid>

and the code behind could be something like:

public partial class NumericPasswordBox : UserControl
{
    #region Password 

    public string Password
    {
        get { return (string)GetValue(PasswordProperty); }
        set { SetValue(PasswordProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Password.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty PasswordProperty =
        DependencyProperty.Register("Password", typeof(string), typeof(NumericPasswordBox), new PropertyMetadata(null));

    #endregion

    #region MaxLength

    public int MaxLength
    {
        get { return (int)GetValue(MaxLengthProperty); }
        set { SetValue(MaxLengthProperty, value); }
    }

    // Using a DependencyProperty as the backing store for MaxLength.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty MaxLengthProperty =
        DependencyProperty.Register("MaxLength", typeof(int), typeof(NumericPasswordBox), new PropertyMetadata(100));

    #endregion

    public NumericPasswordBox()
    {
        InitializeComponent();
    }

    private void PasswordTextBox_KeyUp(object sender, System.Windows.Input.KeyEventArgs e)
    {
        Password = PasswordTextBox.Text;

        //replace text by *
        PasswordTextBox.Text = Regex.Replace(Password, @".", "●");

        //take cursor to end of string
        PasswordTextBox.SelectionStart = PasswordTextBox.Text.Length;
    }
}

You can customize all you want from then on however you wish, using dependency properties like MaxLength, shown in the example.