Freitag, 16. Juli 2010

WPF - Watermark Textbox Behavior

Jeder kennt die schönen Ui's wo  Eingabecontrols mittels  "Wasserzeichen" aufgewertet werden. Wenn man ein wenig googelt findet man auch entsprechende Lösungen im Internet. Ich hab das ganze hier im Blog mal wieder als Behavior implementiert und am Ende sieht es dann so aus.



Alles was man dafür im Xaml schreiben muss, ist folgendes:



Im Label wird der anzuzeigende Text angegeben und im LabelStyle kann man das Aussehen des Wasserzeichens ein wenig gestalten.

Das TextBoxWatermark Behavior gestaltet sich relativ simple. Man benötigt 2 Dependency Properties: Label und LabelStyle:



Ich benutze einen einfachen TextBlockAdorner für die Anzeige des Wasserzeichen (Falls jemand einen besseren Adorner mit mehr Gestaltungsmöglichkeiten bei der Hand hat, lasst es mich wissen :)). Im Behavior wird dann zum einen der Load Event der TextBox benutzt und zum anderen der TextChanged Event.



Im TextChanged Event wird die Prüfung für die Anzeige des Wasserzeichen durchgeführt. Für mich war das irgendwie die einzige Möglichkeit im Behavior zu erkennen, ob z.B. mittels Binding sich die Text Eigenschaft geändert hat. Im Load Event wird der TextBlockAdorner angelegt. Ausserdem wird sich für die Änderung von IsFocused der TextBox registriert, da ja bei jedem Focus Wechsel wieder geprüft werden muss, ob man das Wasserzeichen anzeigen soll oder nicht. In meiner 1ten Version hatte ich dafür folgendes benutzt:



Aber damit holt man sich ein MemoryLeak in den Code. Wer das ganze einmal genauer nachlesen will dem sei folgender Post von Adrew Smith ans Herz gelegt. Ich habe den Code einfach übenommen. Die eigentliche Logik ob das Wasserzeichen angezeigt werden soll oder nicht, sieht dann wie folgt aus:



Sobald das Control den Focus hat oder die Text Eigenschaft gefüllt ist wird das Wasserzeichen nicht mehr angezeigt.

Man kann natürlich das ganze auch für eine Combobox oder PasswordBox machen, dazu muss man lediglich beim Behavior den entsprechenden Typ angeben und ggf andere Events beachten.

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

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());
        }
    }

Mittwoch, 26. Mai 2010

WPF - SelectAll() OnFocus Behavior für TextBox

Einfaches Behavior für die SelectAll() Funktionalität bei Focus für eine TextBox in Wpf.

public class TextBoxSelectAllOnFocusBehavior : Behavior<TextBox>
{
    /// <summary>
    /// SelectAll auch wenn nur leerzeichen in der TextBox stehen
    /// </summary>
    public bool SelectedAllOnWhitespace { getset; }
 
    public TextBoxSelectAllOnFocusBehavior()
    {
        this.SelectedAllOnWhitespace = true;
    }
 
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.GotKeyboardFocus += AssociatedObjectGotKeyboardFocus;
    }
 
    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.GotKeyboardFocus -= AssociatedObjectGotKeyboardFocus;
    }
 
    private void AssociatedObjectGotKeyboardFocus(object sender, System.Windows.Input.KeyboardFocusChangedEventArgs e)
    {
        if (this.SelectedAllOnWhitespace)
            AssociatedObject.SelectAll();
        else
        {
            if (!string.IsNullOrWhiteSpace(AssociatedObject.Text))
                AssociatedObject.SelectAll();
        }
    }
 
}

Im Xaml sieht das ganze dann so aus.