Masked Input Overview

• Sep 21, 2018
• 3 minutes to read

DevExpress Universal Editors allow you to use masks during editing. Masks provide restricted data input as well as formatted data output.

Using masks in editors is useful when an entered string needs to match a specific format. For instance, a text editor should accept date/time values in a 24-hour format or numeric values. Another example is entering a phone number within an editor (an end-user needs to enter only digits, while hyphens should automatically be skipped while editing). To support these and many other data input formats, a masked mode can be used.

The following mask types are supported.

• Numeric

  This mask type is the best choice when you need to restrict input to numeric values. The mask is specified using simple .NET Framework format strings. If you need to restrict input to currency values, you can simply specify the one-character “c” mask. No literal characters will be allowed, and the mask will not allow more than two digits after the decimal point. End-users will be able to navigate through digits and increase or decrease their values using the UP and DOWN arrows or the mouse wheel.

• Date-Time

  This mask type has a lot in common with the Numeric mask and is used for date-time values. You can also specify the mask using .NET Framework format strings because the same end-user capabilities are available. These include navigation between value sections (days, months, years, hours, etc.) and incremental value modifications using the keyboard and the mouse wheel.

• Simple Masks

  This mask type is the best when you need to enter strings of limited length, such as phone numbers, zip codes, social security numbers, etc. The mask is specified using a sequence of characters. Some characters serve as placeholders for digits or letters, while others are literals used to separate value sections. An example of such literals is parentheses for the area code in a phone number.

• Regular Expression Masks

  If the mask types listed above do not meet your business requirements, you can use regular expressions that have no limitations. Any regular expression can be used as a mask.

An editor’s mask settings can be defined using the TextEdit.TextInputSettings property. Masks are usually used in edit mode. When an editor is not in edit mode, its display text can be also formatted using the specified mask if the UseAsDisplayFormat property is set to true. If this property is false, an editor’s display text is composed using the BaseEdit.DisplayFormatString format in display mode.

This example demonstrates the mechanism of data output formatting.

XAML

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Masked_Input"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Editors="using:DevExpress.UI.Xaml.Editors"
    x:Class="Masked_Input.MainPage"
    mc:Ignorable="d">
    <Grid>
        <Editors:DateEdit x:Name="DateInServiceEdit" Width="500" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" 
                          AllowUpdateTwoWayBoundPropertiesOnSynchronization="True" DisplayFormatString="d">
            <Editors:DateEdit.TextInputSettings>
                <Editors:TextInputMaskSettings UseAsDisplayFormat="{Binding ElementName=checkBox, Path=IsChecked}" MaskType="DateTime" Mask="F"></Editors:TextInputMaskSettings>
            </Editors:DateEdit.TextInputSettings>
        </Editors:DateEdit>
        <CheckBox Name="checkBox" HorizontalAlignment="Center" VerticalAlignment="Bottom" Content="UseAsDisplayFormat"/>
    </Grid>
</Page>