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
Join the conversation! Your thoughts help the community grow.