The requested page is not available for the requested platform. You are viewing the content for Default platform.

Lesson 2 - Enabling the Masked Input for a TextEdit

  • 2 min 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).

    New_Project

  3. Open the Visual Studio toolbox, locate the "DX.18.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.

    <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.

    <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.

    <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.

    Masked_TextEdit_Example