Quick Start: Display a MaskedEntry Control

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
• Step 2: Run the Project

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

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

   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.

   <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

   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.

        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.

        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.

        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.