# Quick Start: Display a MaskedEntry Control

## Content



This section describes adding a MaskedEntry control to your portable or shared application and specifying four input fields, namely Social Security No., Date of Birth, Phone and State. The Social Security No. input field accepts a nine-digit number separated by hyphens, the Date of Birth field accepts a date in mm/dd/yyyy format, the Phone field accepts a 10-digit number with area code, and the State field accepts the abbreviated postal codes of a state.

Complete the following steps to initialize four input fields using MaskedEntry control.

*   [Step 1: Add MaskedEntry controls to display four input fields](/componentone/docs/xamarin/online-forms/controls/input/MaskedEntry/QuickStart#step-1-add-maskedentry-controls-to-display-four-input-fields)
*   [Step 2: Run the Project](/componentone/docs/xamarin/online-forms/controls/input/MaskedEntry/QuickStart#step-2-run-the-project)

The following image shows the input fields configured after completing the above steps.

![Input fields set using MaskedTextField control](https://cdn.mescius.io/document-site-files/images/fb6b46a2-eac0-487c-84c3-5e1b4c7b1348/images/maskedentry_quickstart.png)

### Step 1: Add MaskedEntry controls to display four input fields

Complete the following steps to initialize a MaskedEntry control in XAML.

1.  Create a new portable or shared Xamarin.Forms application (Refer [Creating a New Xamarin.Forms App](/componentone/docs/xamarin/online-forms/overview/CreatingaNewProject) for detailed instructions).
2.  Add a new Content Page (say Page1.xaml) to your application.
3.  Edit the \<ContentPage> tag to include the following reference.
    
    ```xml
    xmlns:c1="clr-namespace:C1.Xamarin.Forms.Input;assembly=C1.Xamarin.Forms.Input"
    ```
    
4.  Initialize four MaskedEntry controls along with corresponding labels within the \<StackLayout> tags to display four input fields, and set the **Mask** property for all the masked entry controls.
    
    ```xml
    <StackLayout>
        <Grid VerticalOptions="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Label Text="ID:" VerticalOptions="Center" />
            <c1:C1MaskedEntry x:Name="c1MaskedTextBox1" Mask="000-00-0000" Grid.Column="1"  />
            <Label Text="Date Of Birth:"  VerticalOptions="Center"  Grid.Row="1" />
            <c1:C1MaskedEntry x:Name="c1MaskedTextBox2" Keyboard="Numeric" Mask="90/90/0000"
                Grid.Row="1" Grid.Column="1" />
            <Label Text="Phone:"  VerticalOptions="Center"  Grid.Row="2"  />
            <c1:C1MaskedEntry x:Name="c1MaskedTextBox3" Mask="(999) 000-0000" Keyboard="Telephone"
                Grid.Row="2" Grid.Column="1"   />
            <Label Text="State:" VerticalOptions="Center" Grid.Row="3" />
            <c1:C1MaskedEntry x:Name="c1MaskedTextBox4" Mask="LL" Grid.Row="3" Grid.Column="1"   />
        </Grid>
    </StackLayout>
    ```
    

### Step 2: Run the Project

1.  In the Solution Explorer, double-click **App.cs** file to open it.
2.  To return a Content Page, set the MainPage to Page1 in the constructor App() as illustrated in the given code
    
    ```csharp
    public App()
    {
        // The root page of your application
        MainPage = new Page1();
    }
    ```
    
3.  Some additional steps are required to run iOS and UWP apps:
    *   **iOS App**:
        1.  In the Solution Explorer, double click AppDelegate.cs inside YourAppName.iOS project to open it.
        2.  Add the following code to the FinishedLaunching() method.
            
            ```csharp
            C1.Xamarin.Forms.Input.Platform.iOS.C1InputRenderer.Init();
            ```
            
    *   **UWP App**:
        1.  In the Solution Explorer, expand the MainPage.xaml inside YouAppName.UWP project.
        2.  Double click the MainPage.xaml.cs to open it and add the following code to the class constructor.
            
            ```csharp
            C1.Xamarin.Forms.Input.Platform.UWP.C1InputRenderer.Init();
            ```
            
        3.  (Optional) In case you compile your UWP application in **Release** mode, you need to explicitly add the following code to the **OnLaunched** method in your **App.xaml.cs** to include the correct assemblies with your application.
            
            ```csharp
            var assembliesToInclude = new List<Assembly>();
            assembliesToInclude.Add(typeof(C1.Xamarin.Forms.Input.Platform.UWP.C1InputRenderer)
            .GetTypeInfo().Assembly);
            assembliesToInclude.Add(typeof(C1.UWP.Input.C1InputRenderer).GetTypeInfo().Assembly);
            Xamarin.Forms.Forms.Init(e, assembliesToInclude);
            ```
            
4.  Press **F5** to run the project.