Insert hyphen automatically after every 4 characters in a TextBox

Question

I want to implement some thing that when a user enters 4 characters then a hyphen should be added to the text and then again user enter 4 characters and then again hypen should added automatically in WPF.

Note

"I want to implement this behavior when user is typing in the text box (not after textbox has lost focus) beacause the later is very easy to implement"

Using MVVM model, therefore code behind of Dialog should be empty

Try using a MaskedTextBox: http://wpftoolkit.codeplex.com/wikipage?title=MaskedTextBox — Daniel Hilgarth, May 07 '13 at 10:54
Daniel Hilgarth, Actually i want to do using only plain wpf textbox — Yogesh, May 07 '13 at 10:58
I have been asked for that by my senior and even if i use MaskTextBox what mask i have to assign for hyphen patterns — Yogesh, May 07 '13 at 11:14
"Using MVVM model, therefore code behind of Dialog should be empty" That statement is wrong. — H.B., May 07 '13 at 11:34
H.B. please go thorugh this http://stackoverflow.com/questions/6421372/why-to-avoid-the-codebehind-in-wpf-mvvm-pattern — Yogesh, May 07 '13 at 11:58

score 2 · Answer 1 · answered May 07 '13 at 11:16

You can do this with a property in your viewmodel like the one below. However you'll find that the cursor in the textbox caret doesn't move to the last index and since the caretindex isn't bindable you need to create an attached property to bind to index.

        private string _serial;

        public string Serial
        {
            get { return _serial; }
            set
            {
                if (_serial != value)
                {
                    _serial = value;
                    int res = 0;
                    Math.DivRem(_serial.Length, 4, out res);
                    if (res == 0)
                        Serial = string.Format("{0}-", _serial);
                    CaretIndex = _serial.Lenght - 1;
                    RaisePropertyChanged("Serial");
                }
            }
        }

Here's the xaml code you need.

<Window x:Name="root" x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
    <TextBox
        Text="{Binding ElementName=root, Path=Serial, UpdateSourceTrigger=PropertyChanged}"
        local:TextIndexBinder.Index="{Binding ElementName=root, Path=Index}"
        />
</Window>

the setter part of property would be called when i would lost focus from textbox that i don't want. i want the effect while user is pressing key — Yogesh, May 07 '13 at 11:18
Notice the UpdateSourceTrigger in the binding. It updates immediately. — Bruno Silva, May 07 '13 at 11:20

score 1 · Accepted Answer · edited May 07 '13 at 16:24

Property Definition : we should count the characters in the string not including the hyphens Caret index cant be set here because OnPropertyChanged is not being invoked yet, so the TextBox.Text stil contains the old value, and you cant set a value which bigger than the text length:

 private string _serial;
 public string Serial
 {
     get { return _serial; }
     set
     {
         if (_serial != value)
         {
             _serial = value;
             int res = 0;
             int hyphensCount = _serial.Count(c => c.Equals('-'));
             Math.DivRem(_serial.Length - hyphensCount, 4, out res);
             if (res == 0)
                 _serial = string.Format("{0}-", _serial);
             OnPropertyChanged("Serial");
         }
     }
 }

Behavior - register to TextChanged event and move the caret to the end of text:

 public class MoveCaretToEndBehavior: Behavior<TextBox>
{
    protected override void OnAttached()
    {
        AssociatedObject.TextChanged += new TextChangedEventHandler(AssociatedObject_TextChanged);
    }

    void AssociatedObject_TextChanged(object sender, TextChangedEventArgs e)
    {
        AssociatedObject.CaretIndex = AssociatedObject.Text.Length;
    }
}

TextBox + Behavior

<TextBox Text="{Binding Serial,UpdateSourceTrigger=PropertyChanged}">
        <i:Interaction.Behaviors>
            <local:MoveCaretToEndBehavior />
        </i:Interaction.Behaviors>


</TextBox>

Insert hyphen automatically after every 4 characters in a TextBox

2 Answers2

Linked