Dienstag, 1. Juni 2010

WPF - Masked Textbox Behavior

Pls use the lastest Version of my Behavior at the end of this Blog.

Auf der Suche nach einer MaskedTextbox für Wpf bin ich über die Implementierung von Marlon Grech gestolpert. In Anlehnung daran hab ich das ganze als Behavior für mein Projekt implementiert.

MasekdTextbox Behavior Sample

Die Grundlage für die MaskedTextBox ist der MaskedTextProvider, dieser übernimmt letztendlich das Auswerten der Eingaben bzgl. der InputMaske.

Was soll/muss das Behavior alles leisten:

  • InputMaske und PromptChar als Parameter

  • Eingaben, BackSpace, Delete Key etc. prüfen

  • Clipboard Pasting prüfen

  • Selektierten Text beachten

  • Ui + MVVM/CodeBehind in sync

Für die Parameter werden 2 DependencyProperties angelegt.



Folgende Events müssen behandelt werden:



Neben der Initialisierung des MasekdTextProvider in AssociatedObjectLoaded wird auch noch ein Eventhandler an das TextProperty der TextBox angehangen. Sollte das TextProperty der TextBox durch einen Converter, Binding(zb. MVVM) oder im CodeBehind geändert werden, kann man in diesem Eventhandler darauf reagieren.



Die Behandlung von Nutzereingaben sieht immer recht ähnlich aus. Zu beachten ist in jedem Fall ob der Nutzer in der TextBox Text selektiert hat und diesen dann entsprechend zu behandeln (TreatSelectedText();). Alles weitere übernimmt mehr oder weniger der MaskedTextProvider.



Was macht die UpdateText() Methode? Letzendlich wird hier nocheinmal geprüft ob der Text in dem MaskedTextProvider gleich dem Text der TextBox ist. Solange die Eingaben in die TextBox von "oben(Target)" kommen, sollte dies auch immer der Fall sein. Sobald aber Eingaben von "unten(Source)" kommen, ist das nicht unbedingt gewährleistet. Daher muss man sich jetzt auch entscheiden, was passieren soll wenn der Input aus der Source nicht mit der InputMaske der MaskedTextBox zusammen passt. Meine Philosophie lautet in diesem Fall: Ui + Source have to be in sync! D.h. in der Oberfläche sollen niemals Werte angezeigt werden, die nicht auch in der Quelle so sind und umgekehrt :) Deshalb zeigt die UpdateText() Methode die Daten der Source an, wenn die InputMaske nicht passen sollte.



So sieht das ganze dann im XAML aus.



Und immer daran denken eine MaskedTextBox hat nichts mit VALIDIERUNG zu tun.

Download demo source code from here. NOTE: Rename the file extension from .DOC to .ZIP and then decompress it.

Hier mal mein letzter Stand zu dem Behavior:

    public class TextBoxInputMaskBehavior : Behavior<TextBox>
    {
        private WeakPropertyChangeNotifier _notifier;
 
        #region DependencyProperties
 
        public static readonly DependencyProperty InputMaskProperty =
          DependencyProperty.Register("InputMask"typeof(string), typeof(TextBoxInputMaskBehavior), null);
 
        public string InputMask
        {
            get { return (string)GetValue(InputMaskProperty); }
            set { SetValue(InputMaskProperty, value); }
        }
 
        public static readonly DependencyProperty PromptCharProperty =
           DependencyProperty.Register("PromptChar"typeof(char), typeof(TextBoxInputMaskBehavior), new PropertyMetadata('_'));
 
        public char PromptChar
        {
            get { return (char)GetValue(PromptCharProperty); }
            set { SetValue(PromptCharProperty, value); }
        }
 
        public static readonly DependencyProperty ResetOnSpaceProperty =
           DependencyProperty.Register("ResetOnSpace"typeof(bool), typeof(TextBoxInputMaskBehavior), new PropertyMetadata(false));
 
        public bool ResetOnSpace
        {
            get { return (bool)GetValue(ResetOnSpaceProperty); }
            set { SetValue(ResetOnSpaceProperty, value); }
        }
 
        public static readonly DependencyProperty IgnorSpaceProperty =
          DependencyProperty.Register("IgnorSpace"typeof(bool), typeof(TextBoxInputMaskBehavior), new PropertyMetadata(true));
 
        public bool IgnorSpace
        {
            get { return (bool)GetValue(IgnorSpaceProperty); }
            set { SetValue(IgnorSpaceProperty, value); }
        }
 
        #endregion
 
        public MaskedTextProvider Provider { getprivate set; }
 
        protected override void OnAttached()
        {
            base.OnAttached();
            AssociatedObject.Loaded += AssociatedObjectLoaded;
            AssociatedObject.PreviewTextInput += AssociatedObjectPreviewTextInput;
            AssociatedObject.PreviewKeyDown += AssociatedObjectPreviewKeyDown;
 
            DataObject.AddPastingHandler(AssociatedObject, Pasting);
        }
        
        protected override void OnDetaching()
        {
            base.OnDetaching();
            AssociatedObject.Loaded -= AssociatedObjectLoaded;
            AssociatedObject.PreviewTextInput -= AssociatedObjectPreviewTextInput;
            AssociatedObject.PreviewKeyDown -= AssociatedObjectPreviewKeyDown;
 
            DataObject.RemovePastingHandler(AssociatedObject, Pasting);
        }
 
        /*
        Mask Character  Accepts  Required?  
        0  Digit (0-9)  Required  
        9  Digit (0-9) or space  Optional  
        #  Digit (0-9) or space  Required  
        L  Letter (a-z, A-Z)  Required  
        ?  Letter (a-z, A-Z)  Optional  
        &  Any character  Required  
        C  Any character  Optional  
        A  Alphanumeric (0-9, a-z, A-Z)  Required  
        a  Alphanumeric (0-9, a-z, A-Z)  Optional  
           Space separator  Required 
        .  Decimal separator  Required  
        ,  Group (thousands) separator  Required  
        :  Time separator  Required  
        /  Date separator  Required  
        $  Currency symbol  Required  
 
        In addition, the following characters have special meaning:
 
        Mask Character  Meaning  
        <  All subsequent characters are converted to lower case  
        >  All subsequent characters are converted to upper case  
        |  Terminates a previous < or >  
        \  Escape: treat the next character in the mask as literal text rather than a mask symbol  
 
        */
        void AssociatedObjectLoaded(object sender, System.Windows.RoutedEventArgs e)
        {
            this.Provider = new MaskedTextProvider(InputMask, CultureInfo.CurrentCulture);
            this.Provider.PromptChar = this.PromptChar;
            this.Provider.SkipLiterals = true;
            this.Provider.ResetOnSpace = this.ResetOnSpace;
            this.Provider.Set(HandleCharacterCasing(AssociatedObject.Text));
            this.AssociatedObject.AllowDrop = false;
 
            this.AssociatedObject.Text = GetProviderText();
           
 
            //seems the only way that the text is formatted correct, when source is updated
            //AddValueChanged for TextProperty in a weak manner
            this._notifier = new WeakPropertyChangeNotifier(this.AssociatedObject, TextBox.TextProperty);
            this._notifier.ValueChanged += new EventHandler(this.UpdateText);          
        }
        void AssociatedObjectPreviewTextInput(object sender, System.Windows.Input.TextCompositionEventArgs e)
        {
#if DEBUG
            Debug("PreviewTextInput");
#endif
            e.Handled = true;
            var text = HandleCharacterCasing(e.Text);
 
            this.TreatSelectedText();
 
            var position = this.GetNextCharacterPosition(AssociatedObject.CaretIndex);
 
            if (Keyboard.IsKeyToggled(Key.Insert))
            {
                if(!this.Provider.Replace(text, position))
                {
                    System.Media.SystemSounds.Beep.Play();
                    return;
                }
            }
            else
            {
                if(!this.Provider.InsertAt(text, position))
                {
                    System.Media.SystemSounds.Beep.Play();
                    return;
                }
            }
 
            var nextposition = this.GetNextCharacterPosition(position + 1);
            this.RefreshText(nextposition);
        }
 
        void AssociatedObjectPreviewKeyDown(object sender, KeyEventArgs e)
        {
            //WICHTIG: TreatSelectedText oder sonst was nur in den IF's behandeln, weil KeyDown immer als erstes kommt
#if DEBUG
            Debug("PreviewKeyDown");
#endif
            if (e.Key == Key.Space)//handle the space
            {
                e.Handled = true;
 
                if (this.IgnorSpace)
                {
                    System.Media.SystemSounds.Beep.Play();
                    return;
                }
 
                this.TreatSelectedText();
                var position = this.GetNextCharacterPosition(AssociatedObject.CaretIndex);
 
                if (!this.Provider.InsertAt(" ", position))
                {
                    System.Media.SystemSounds.Beep.Play();
                    return;
                }
 
                this.RefreshText(AssociatedObject.CaretIndex + 1);
            }
 
            if (e.Key == Key.Back)//handle the back space
            {
                e.Handled = true;
 
                //wenn etwas markiert war und der nutzer Backspace klickt soll nur das markierte verschwinden
                if(this.TreatSelectedText())
                {
                    this.RefreshText(AssociatedObject.CaretIndex);
                    return;
                }
                
                //wenn man ganz vorne steht gibs nix zu löschen, ausser wenn was selektiert war, s.h.oben
                if(AssociatedObject.CaretIndex == 0)
                    return;
 
                var denDavor = AssociatedObject.CaretIndex - 1;
 
                if(this.Provider.IsEditPosition(denDavor))
                {
                    if (!this.Provider.RemoveAt(denDavor))
                    {
                        System.Media.SystemSounds.Beep.Play();
                        return;
                    }
                }
 
                this.RefreshText(AssociatedObject.CaretIndex - 1);
            }
 
            if (e.Key == Key.Delete)//handle the delete key
            {
                e.Handled = true;
 
                //wenn etwas markiert war und der nutzer Delete klickt soll nur das markierte verschwinden
                if (this.TreatSelectedText())
                {
                    this.RefreshText(AssociatedObject.CaretIndex);
                    return;
                }
 
 
                var position = AssociatedObject.CaretIndex;
 
                if (this.Provider.IsEditPosition(position))
                {
                    if (!this.Provider.RemoveAt(position))
                    {
                        System.Media.SystemSounds.Beep.Play();
                        return;
                    }
                }
                else
                {
                    System.Media.SystemSounds.Beep.Play();
                    return;
                }
 
                this.RefreshText(AssociatedObject.CaretIndex);
            }
        }
 
        /// <summary>
        /// Pasting prüft ob korrekte Daten reingepastet werden
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Pasting(object sender, DataObjectPastingEventArgs e)
        {
            if (e.DataObject.GetDataPresent(typeof(string)) && !e.IsDragDrop)//nur strg+c zulassen kein drag&drop
            {
                var pastedText = HandleCharacterCasing((string)e.DataObject.GetData(typeof(string)));
 
                this.TreatSelectedText();
 
                var position = GetNextCharacterPosition(AssociatedObject.CaretIndex);
 
                if (!this.Provider.InsertAt(pastedText, position))
                {
                    System.Media.SystemSounds.Beep.Play();
                }
                else
                {
                    this.RefreshText(position);
                    this.AssociatedObject.Focus();
                    
                }
            }
 
            e.CancelCommand();
        }
 
        private void UpdateText(object sender, EventArgs eventArgs)
        {
#if DEBUG
            Debug("UpdateText");
#endif
            //check Provider.Text + TextBox.Text
            if (HandleCharacterCasing(this.Provider.ToDisplayString()).Equals(HandleCharacterCasing(AssociatedObject.Text)))
                return;
 
            //use provider to format
            var success = this.Provider.Set(HandleCharacterCasing(AssociatedObject.Text));
 
            //ui and mvvm/codebehind should be in sync
            this.SetText(success ? GetProviderText() : HandleCharacterCasing(AssociatedObject.Text));
        }
 
        private string HandleCharacterCasing(string text)
        {
            switch (AssociatedObject.CharacterCasing)
            {
               case CharacterCasing.Lower:
                    return text.ToLower();
               case CharacterCasing.Upper:
                    return text.ToUpper();
 
                default:
                    return text;
            }
            
        }
 
        /// <summary>
        /// Falls eine Textauswahl vorliegt wird diese entsprechend behandelt.
        /// </summary>
        /// <returns>true Textauswahl behandelt wurde, ansonsten falls </returns>
        private bool TreatSelectedText()
        {
            if (AssociatedObject.SelectionLength > 0)
            {
                this.Provider.RemoveAt(AssociatedObject.SelectionStart, AssociatedObject.SelectionStart + AssociatedObject.SelectionLength - 1);
                return true;
            }
            return false;
        }
 
        private void RefreshText(int position)
        {
            SetText(GetProviderText());
 
            Debug("SetText");
            AssociatedObject.CaretIndex = position;
        }
 
        private void SetText(string text)
        {
            AssociatedObject.Text = String.IsNullOrWhiteSpace(text) ? String.Empty : text;
        }
 
        private int GetNextCharacterPosition(int caretIndex)
        {
            var start = caretIndex;
 
            var position = this.Provider.FindEditPositionFrom(start, true);
 
            if (position == -1)
                return start;
            else
                return position;
        }
 
        private string GetProviderText()
        {
            //wenn noch gar kein Zeichen eingeben wurde, soll auch nix drin stehen
            //könnte man noch anpassen wenn man masken in der Oberfläche vllt doch haben will bei nem leeren feld
            return this.Provider.AssignedEditPositionCount > 0
                       ? HandleCharacterCasing(this.Provider.ToDisplayString())
                       : HandleCharacterCasing(this.Provider.ToString(falsefalse));
        }
 
        private void Debug(string name)
        {
            System.Diagnostics.Debug.WriteLine(name + ": Textbox:  " + AssociatedObject.Text);
            System.Diagnostics.Debug.WriteLine(name + ": Provider: " + Provider.ToDisplayString());
        }
    }

12 Kommentare:

  1. Hugh's code has a small problem when I tested it--if you are on the last character and hit backspace, it deletes the second to last character. Not a huge deal but worth noting.

    AntwortenLöschen
  2. (My previous comment got cut off)

    Here is how I use the control in XAML:


    <ctrl:MaskedTextBox x:Name="PrimaryPhoneInput" Width="100" InputMask="(000) 000-0000" PromptChar="_"
    UnmaskedText="{Binding PrimaryPhone, Mode=TwoWay, UpdateSourceTrigger=LostFocus, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" />

    AntwortenLöschen
  3. @Hugh
    i think using a behavior or creating a custom control its a kind of personally preference and i like behaviors more, because you are a way more independent.
    btw, i handle the umasked text property with a converter :)

    AntwortenLöschen
  4. Christoph Dreßler16. September 2010 um 12:33

    Hallo blindmeis,

    eine gute Lösung, vielen Dank!

    Ein Problem habe ich: Ich habe die MaskedTextBox an einer Liste von UI-Objekten hängen. Für das erste Element der Liste ist die Textbox leer, obwohl das gebundene Property gefüllt ist. Die Folgeelemente der Collection werden richtig angezeigt.
    Es scheint hier also irgend ein Init-Problem zu geben.
    Hättest du eine Idee?

    -christoph

    AntwortenLöschen
  5. Christoph Dreßler17. September 2010 um 12:26

    Habs gefunden:

    in
    MaskedTextBox_Loaded
    stört diese Zeile:
    Text = this.Provider.ToDisplayString();

    -christoph

    AntwortenLöschen
  6. Falls dich das interessiert: http://huydinhpham.blogspot.com/search?updated-min=2010-01-01T00:00:00-08:00&updated-max=2011-01-01T00:00:00-08:00&max-results=3

    ansonsten hat er noch nette wpf tuts ;-)

    AntwortenLöschen
  7. BlindMeis - Thank you very much for great code. It is a great help!

    AntwortenLöschen
  8. Great code, but you cannot use "IsReadOnly" on masked textbox :(

    AntwortenLöschen
  9. Great solution, thank you. How it is possible to fix the bug in the first Key.Back variant from Hugh (the behavior, not the usercontrol)

    AntwortenLöschen
  10. Hiho. Schönes Beispiel (I'm going to continue in English, so that maybe others can use my information).
    I found a memory-leak:

    //seems the only way that the text is formatted correct, when source is updated
    var textProp = DependencyPropertyDescriptor.FromProperty(TextBox.TextProperty, typeof(TextBox));
    if (textProp != null)
    {
    text

    This reference is never dropped and therefore whatever you attach the behavior to is piling up and staying in memory.

    I solved this by also hooking up AssociatedObject.Unloaded += AssociatedObjectUnloaded; in OnAttached() and retaining references to the DependencyPropertyDescriptor and the used EventHandler. You can then call

    .RemoveValueChanged(AssociatedObject,); during AssociatedObjectUnloaded finally, everything gets garbage-collected as it should.

    Hope this is useful.

    Greetings, Christian.

    AntwortenLöschen
  11. hi Christain, check out my last version of the behavior on the end of the blog entry. i changed the subscribing to a weak subscription - so no more memoryleak :)

    AntwortenLöschen