Lesson 2 - Enabling the Masked Input for a TextEdit

• Aug 03, 2020
• 2 minutes to read

This document demonstrates how to create a TextEdit control and specify a phone mask.

Follow these steps.

1. Run MS Visual Studio 2015.

2. Create a new Windows Universal Application project. Choose New Project on the File menu or press Ctrl+Shift+N, choose the Windows Universal template category, and then choose Blank App (XAML).

   

3. Open the Visual Studio toolbox, locate the “DX.19.2: Common Controls” tab, choose the TextEdit toolbox item and drop it onto the window.

   Note

   Dropping the TextEdit toolbox item on the window will automatically add all the required references (DevExpress.Core and DevExpress.Controls). To add the TextEdit in code, reference these assemblies manually.

4. Press the F4 key to invoke the Properties window. Position the TextEdit in the center of the screen by setting its HorizontalAlignment and VerticalAlignment properties to Center. Set the editor’s Width property to 300.

   XAML

   <Editors:TextEdit HorizontalAlignment="Center" VerticalAlignment="Center" Width="300"/>
   

5. Locate the TextInputSettings property. Press the New button to invoke the Select Object dialog window. Select TextInputMaskSettings and press OK.

   XAML

   <Editors:TextEdit HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" >
       <Editors:TextEdit.TextInputSettings>
           <Editors:TextInputMaskSettings/>
       </Editors:TextEdit.TextInputSettings>
   </Editors:TextEdit>
   

6. Specify the mask. The following code shows how to specify the RegEx type phone mask in XAML.

   XAML

   <Editors:TextEdit HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" >
       <Editors:TextEdit.TextInputSettings>
           <Editors:TextInputMaskSettings MaskType="RegEx" Mask="((\+\d)?\(\d{3}\))?\d{3}-\d\d-\d\d" />
       </Editors:TextEdit.TextInputSettings>
   </Editors:TextEdit>
   

   The image below shows the result.