CODEWITHSUNDEEP
c#xamlwindows-store-appswindows-8.1
Finna
Finna

Reputation: 27

Emulate product key entry xaml c#

I'm building a Xaml based app with a C# backend.

I have data that needs to be entered by the user in a specific format (example: AAAA-BBBBBB-CCCC-DD etc). I currently have one text box that takes the whole thing, but for user experience I would prefer to break the example text into four boxes

  1. one for AAAA
  2. one for BBBBBB
  3. one for CCCC
  4. one for DD etc

So what I expect from the user would be abundantly clear. That part is easy enough with string concatenation

But I would like the four boxes to behave like a single box in a largely transparent manner. Once the user enters 4 characters into textbox 1, the focus would shift to textbox 2 and they could continue typing. Additionally, if possible, I would like the focus shift to select all text already in the box, so they can easily overwrite without having to go to their mouse or doing a ctrl+a.

I've searched for how to change focus between texboxes, but could not get examples to work.

Upvotes: 0

Views: 425

Answers (3)

crea7or
crea7or

Reputation: 4490

Why not to use one TextBox? Listen for text changes and include a dash(-) in text every time when it need. Do not allow user to type dashes (ignore them). Some small logic should be done for clipboard pasting and for the whole product key/text validation. Later you can split the Text via String.Split( new Char("-")) and you will get an array of codes (if you need it in this way).

Upvotes: 0

PakKkO
PakKkO

Reputation: 154

Other solution:

1.- You configure sequencial TabIndex properties in your four TextBoxes. 2.- You configure maxLength propoerties en your TextBoxes. 3.- You configure the next method in TextChanged event in your TextBoxex.

private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    var tb = (TextBox)sender;

    if (tb.Text.Length == tb.MaxLength)
    {
        var nextTB = this.PrincipalGrid.Children.OfType<TextBox>().Where(t => t.TabIndex == (tb.TabIndex + 1)).FirstOrDefault();

        if (nextTB != default(TextBox))
            nextTB.Focus();
    }

}

Upvotes: 0

har07
har07

Reputation: 89285

You can listen to TextChanged event of each TextBox, then check if text length is equal maximum length. If it is equal (or even greater) than maximum, move focus to next TextBox and select all text there. Refactor the logic to a method so you can simply call the same method in event handler function of each TextBox, hence can avoid writing similar codes repeatedly. Something like this will do :

private void textboxAAAA_TextChanged(object sender, TextChangedEventArgs e)
{
    HandleTextChanged(textboxAAAA, textboxBBBBBB, 4);
}

private void textboxBBBBBB_TextChanged(object sender, TextChangedEventArgs e)
{
    HandleTextChanged(textboxBBBBBB, textboxCCCC, 6);
}

private void textboxCCCC_TextChanged(object sender, TextChangedEventArgs e)
{
    HandleTextChanged(textboxCCCC, textboxDD, 4);
}

private void HandleTextChanged(TextBox currentTextBox, TextBox nextTextBox, int maxLength)
{
    var textLength = currentTextBox.Text.Length;
    if (textLength >= maxLength)
    {
        nextTextBox.Focus(FocusState.Keyboard);
        nextTextBox.SelectAll();
    }
}

//in XAML
<StackPanel Orientation="Horizontal">
    <TextBox x:Name="textboxAAAA" Width="60" TextChanged="textboxAAAA_TextChanged"/>
    <TextBlock Text="-"/>
    <TextBox x:Name="textboxBBBBBB" Width="60" TextChanged="textboxBBBBBB_TextChanged"/>
    <TextBlock Text="-"/>
    <TextBox x:Name="textboxCCCC" Width="60" TextChanged="textboxCCCC_TextChanged"/>
    <TextBlock Text="-"/>
    <TextBox x:Name="textboxDD" Width="60"/>
</StackPanel>

Note, that you don't consider case when user copy-paste serial number. What the program should do if user copy 7 letters text, and paste it to the first text box?

Upvotes: 1

Related Questions