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

c#, windows-phone-7, windows-phone-8, xaml

Solution

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.

Problem

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?

Original source