Advanced Masked Input Control for Silverlight & WPF

One of the new advanced input controls introduced in ClientUI 4 is the UXMaskedInput control. The control allows patterned data input entry, such as phone number, social security number, and more.

In this post, I will share a number of useful features in the UXMaskedInput control, and how it can be useful in your Silverlight and WPF business applications.

Introducing UXMaskedInput

In many business scenarios, users are required to entry patterned data such as phone number, customer ID, or social security number. Such scenarios require a specialized data entry control, commonly referred as masked input, in order to validate the inputted data. In the ClientUI 4, Intersoft has provided an advanced masked input control named UXMaskedInput.

Using the common business scenarios mentioned above, for example a phone number entry requires optional country code in parentheses followed by optional area code and the required phone number separated by dash, (062)021-6601234, this could be achieved by using the supported patterns in UXMaskedInput through the EditMask property. Here is a list of the supported pattern:

Character	Description
0	Digit (0 to 9, entry required, plus [+] and minus [–] signs not allowed).
9	Digit or space (entry not required, plus and minus signs not allowed).
#	Digit or space (entry not required; spaces are displayed as blanks while in Edit mode, but blanks are removed when data is saved; plus and minus signs allowed).
L	Letter (A to Z, entry required).
?	Letter (A to Z, entry optional).
A	Letter or digit (entry required).
a	Letter or digit (entry optional).
$	Any character or a space (entry required).
C	Any character or a space (entry optional).
<	Causes all characters to be converted to lowercase.
>	Causes all characters to be converted to uppercase.
	Causes the character that follows to be displayed as the literal character (for example, A is displayed as just A).
*Other characters as considered as literal. By default the EditMask is set to aaaaa.

By using the patterned list, the phone number will have EditMask (###)999-0000000.

The Value of the UXMaskedInput is determined by the IsSaveLiteral and IsSaveMask property. These properties modify the Value by keeping the literal pattern or the mask character. For example, the UXMaskInput with EditMask set to “(999)000-0000”, the possible value with combination of these properties are shown in the next table.

IsSaveLiteral	IsSaveMask	Value
True	True	(___)555-1234
True	False	(   )555-1234
False	True	___5551234
False	False	5551234

UXMaskedInput also allows null value which is controlled by the AllowNull property. By default this property value is set to False, hence null value is not allowed by default.

If the value is null, the UXMaskedInput shows an empty string during edit mode and display mode. By deleting the whole edit text (Ctrl + A, Del) in UXMaskedInput the value is automatically set to null, if permissible.

If you prefer, you can also customize how UXMaskedInput displays its text initially. There are two options available, EditMask or Value, which can be set through the DisplayMode property. The EditMask option displays the edit text, while the Value option displays the Value as detailed in the previous paragraph.

With the EditMask set to “(999)000-0000” and Value set to “5551234” the possible displayed text is illustrated in the following table.

DisplayMode	Displayed Text
Snippet Code
EditMask	(___)555-1234
1 2 3 <Intersoft:UXMaskedInput EditMask="(999)000-0000" Value="5551234" DisplayMode="EditMask"/>
Value	5551234 Assuming IsSaveLiteral and IsSaveMask is set to False
1 2 3 4 <Intersoft:UXMaskedInput EditMask="(999)000-0000"   Value="5551234"   DisplayMode="Value"   IsSaveLiteral="False" IsSaveMask="False"/>

Custom Mask Character

By default the mask character in the UXMaskedInput is an underscore character “_”. However, you can customize the mask character through the provided MaskCharacter property.

UXMaskedInput with custom mask character ..

Editing Behavior

Although the UXMaskedInput is derived from UXTextBox, the editing behavior is significantly different since UXMaskedInput expected patterned data entry. The behavior differences also mean that there is default TextBox operation which is considered invalid and will be ignored in the UXMaskedInput such as the paste action. In this case, the paste action is valid only when all the text is selected.

UXMaskedInput implements sophisticated editing experiences that allow end users to input data more intuitively. In the following table, I will highlight some of the unique editing behaviors implemented in the control. Let’s take an example of the masked input control with EditMask set to “999-???-000”.

EditText	Action	Result
Description
|___-___-___	Input an “A” character	___-A|__-___
The “A” character is inserted in the optional letter section since the digit section is optional. If the digit section is not optional, the “A” character is rejected.
123-|ABC-___	Pressing BackSpace	123|-ABC-___
Caret position is moved no character is deleted since literal could not be deleted.
123-A|BC-___	Pressing BackSpace	123-|_BC-___
Caret position is moved, the character A deleted, and replaced by the MaskCharacter.
12|3-AB|C-___	Pressing BackSpace	12|_-__C-___
Inputted character is replaced by the MaskCharacter while Literal is unchanged. Caret is set on the first highlight position.
|123-ABC-456|	Pressing BackSpace	[AllowNull=True] |  [AllowNull=False] |___-___-___
Deleting all the text behavior depends on the AllowNull property. If the UXMaskedInput allow null, the result is empty UXMaskedInput, otherwise all the character is replaced by the MaskCharacter except Literal.
|123-ABC-456|	Pasting text 789-DEF-456	|789-DEF-456
If the text is a valid value (literal is allowed) the pasted text is accepted. 789DEF456 or 456 is also accepted.

Conclusion

In this post, you have now learned the key features of UXMaskedInput. You can play around with the UXMaskedInput features through the properties, or try some readily designed samples here. To see all available features, please see UXMaskedInput Overview.

You will need the latest 2010 R2 bits which you can download it here. If you have questions or feedback about UXMaskedInput or other ClientUI controls, feel free to post them to our community forum.

Regards,

Glenn Layaar