Mask Text Box in WPF

Introduction

This blog introduces how to make a mask text box in wpf. To build a Mask text box in WPF I have taken a simple class and inherited that from TextBox.

To develop a mask text box in WPF take a simple class and inherit all the property from textbox class.

Declare one more property name Nullvalue to display water mark text when textbox not contains any text

Declare enum named MaskType and write the following options there

Code

   public enum MaskType

    {

        Default = 0,

        String = 1,

        Numeric = 2

    }

    public string _NullText = "Enter Value";

    public string NullText

    {

        get

        {

            return _NullText;

        }

        set

        {

            _NullText = value;

        }

    }

 
Declare a attached property named Mask having type MaskType enum in the developed class for mask text box.

public MaskType Mask { get; set; }

In the constructure add the following event with your custome controls class

Code

public MaskTextBox()

{

this.Mask = MaskType.Default;

this.GotFocus += new RoutedEventHandler(MaskTextBox_GotFocus);

this.LostFocus += new RoutedEventHandler(MaskTextBox_LostFocus);

//this.TextChanged += new TextChangedEventHandler(MaskTextBox_TextChanged);

this.Initialized += new EventHandler(MaskTextBox_Initialized);

this.KeyDown +=new System.Windows.Input.KeyEventHandler(MaskTextBox_KeyDown);

this.KeyUp += new KeyEventHandler(MaskTextBox_KeyUp);

}

In the initialized event set the font color to gray and text to NullText if the textbox contains only nulltext, if not contains set the font color to black.

Code
 

void MaskTextBox_Initialized(object sender, EventArgs e)

{

    if (string.IsNullOrEmpty(this.Text))

    {

        this.Text = NullText;

        this.Foreground = Brushes.LightGray;

    }

}

In the Gotfocuse event clear the text of text box if it contains text same as nulltext and set the fore color to gray, if not fore color will be black. See the following code written bellow:

Code

private void MaskTextBox_GotFocus(object sender, RoutedEventArgs e)

{

    if (this.Text == NullText)

    {

        this.Clear();

        this.Foreground = Brushes.LightGray;

    }

    else

        this.Foreground = Brushes.Black;

}

 
Set the fore color to gray if the text box text is equals to nulltextand if the text is equal to empty than the text is equal to empty than seth text to null text other wise set the color to blaxk in the lost focuse event.

Code

 

private void MaskTextBox_LostFocus(object sender, RoutedEventArgs e)

{

this.Text = (this.Text == string.Empty ? NullText : this.Text);

if (this.Text != NullText)

{

this.Foreground = Brushes.Black;

}

else

this.Foreground = Brushes.LightGray;

}

 

In the Key Up event write the following code fore clear tex and set the text fore coler to gray if the text equals to nullvalue or to black.

 

Code

 

void MaskTextBox_KeyUp(object sender, KeyEventArgs e)

{

if (string.IsNullOrEmpty(this.Text))

{

this.Text = NullText;

this.Foreground = Brushes.LightGray;

}

else

this.Foreground = Brushes.Black;

}

clear the text of textbox if the text contains nulltext and check the condition for restricting numeric or string if it is mask type string or if numeric

in this key down event check the mask type if it is Numeric restrict the key from a to z and specia character if string restrict the key key beetween 0 10 and special character also

Code
 

    void MaskTextBox_KeyDown(object sender, KeyEventArgs e)

    {

        if (this.Text.Contains(this.NullText))

            this.Clear();

        if (this.Mask == MaskType.Numeric)

        {

            if ((e.Key >= Key.D0 && e.Key <= Key.D9) || (e.Key == Key.NumPad0 && e.Key == Key.NumPad9))

                e.Handled = false;

            else

                e.Handled = true;

        }

        if (this.Mask == MaskType.String)

        {

            if (e.Key >= Key.A && e.Key <= Key.Z || e.Key == Key.Space)

                e.Handled = false;

            else

                e.Handled = true;

        }

    }

Full Code
 

using System;

System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows.Controls;

using System.Windows;

using System.Windows.Media;

using System.Windows.Input;

 

namespace TestCostumeControls

{

class MaskTextBox : TextBox

{

public string _NullText = "Enter Value";

 

public string NullText

{

get

{

return _NullText;

}

set

{

_NullText = value;

}

}

public MaskType Mask { get; set; }

 

public MaskTextBox()

{

this.Mask = MaskType.Default;

this.GotFocus += new RoutedEventHandler(MaskTextBox_GotFocus);

this.LostFocus += new RoutedEventHandler(MaskTextBox_LostFocus);

//this.TextChanged += new TextChangedEventHandler(MaskTextBox_TextChanged);

this.Initialized += new EventHandler(MaskTextBox_Initialized);

this.KeyDown +=new System.Windows.Input.KeyEventHandler(MaskTextBox_KeyDown);

this.KeyUp += new KeyEventHandler(MaskTextBox_KeyUp);

}

 

void MaskTextBox_KeyUp(object sender, KeyEventArgs e)

{

if (string.IsNullOrEmpty(this.Text))

{

this.Text = NullText;

this.Foreground = Brushes.LightGray;

}

else

this.Foreground = Brushes.Black;

}

void MaskTextBox_Initialized(object sender, EventArgs e)

{

if (string.IsNullOrEmpty(this.Text))

{

this.Text = NullText;

this.Foreground = Brushes.LightGray;

}

}

void MaskTextBox_KeyDown(object sender, KeyEventArgs e)

{

if (this.Text.Contains(this.NullText))

this.Clear();

if (this.Mask == MaskType.Numeric)

{

if ((e.Key >= Key.D0 && e.Key <= Key.D9) ||(e.Key==Key.NumPad0 && e.Key==Key.NumPad9))

e.Handled = false;

else

e.Handled = true;

}

if (this.Mask == MaskType.String)

{

if (e.Key >= Key.A && e.Key <= Key.Z ||e.Key == Key.Space )

e.Handled = false;

else

e.Handled = true;

}

}

void MaskTextBox_TextChanged(object sender, TextChangedEventArgs e)

{

if (this.Text != NullText)

{

this.Foreground = Brushes.Black;

}

e.Handled = true;

}

private void MaskTextBox_GotFocus(object sender, RoutedEventArgs e)

{

if (this.Text == NullText)

{

this.Clear();

this.Foreground = Brushes.LightGray;

}

else

this.Foreground = Brushes.Black;

}

private void MaskTextBox_LostFocus(object sender, RoutedEventArgs e)

{

this.Text = (this.Text == string.Empty ? NullText : this.Text);

if (this.Text != NullText)

{

this.Foreground = Brushes.Black;

}

else

this.Foreground = Brushes.LightGray;

}

}

public enum MaskType

{

Default = 0,

String = 1,

Numeric = 2

}

}

Next Recommended Reading Colored Label Text Using WPF