Mask A Phone Number In Xamarin.Forms Using Behaviors

Introduction

This article demonstrates how to mask phone number field like XXX-XXX-XXXX using the Xamarin Forms Behaviors concept.

Prerequisites

• Windows or Mac machine
• Visual Studio has to be installed in it
• A virtual device or real device for both Android and iOS platforms to run and observe the application

The flow of the article

• How to create a Xamarin Forms Project
• What is Behavior?
• How to create Behavior?
• How to mask phone number using Behavior?

How to create a Xamarin Forms Project?

• On the Start screen, launch Visual Studio. This opens the start page.
  
  
  

• In Visual Studio, click "Create new project..." to create a new project.
  
  

• In the New project window, click Cross-Platform from the left pane, select the Mobile App (Xamarin.Forms) template, set the Name and Solution name to PhoneNumberMask, choose a suitable location for the project, and click the OK button.
  
  
  

• In the New Cross-Platform App dialog, click Blank App, select .NET Standard as the Code Sharing Strategy, and click the OK button.
  
  
  

• In Solution Explorer, the PhoneNumberMask project will be displayed like below.
  
  
  

What is Behavior?

• Behaviors allow us to add functionality to User Interface controls without creating the subclass for it. Instead, the functionality is implemented in behavior class and attached to the control.
• Behaviors are written in the code and added to controls in XAML or code in the code behind page.

How to create Behavior?

The process of creating a Xamarin.Forms Behavior is as follows.

• Create a class that inherits from the Behavior or Behavior<T> class, where T is the type of the control to which the behavior should apply.
• Override the OnAttachedTo method to perform any required setup.
• Override the OnDetachingFrom method to perform any required cleanup.
• Implement the core functionality of the behavior.

Now, we will start creating a behavior for phone number masking.

• Right-click on PCL/NET Standard (PhoneNumberMask) project and select Add and then click on Class, as shown in the below diagram.
  
  
  

• Then, the "Add New Item" window will open like below.
  
  
  

In the above window, I have named a class “PhoneNumberMaskBehavior” and then clicked on Add button.

• The class will be created as shown below.
  
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Text;
  5. namespace PhoneNumberMask
  6. {
  7. class PhoneNumberMaskBehavior
  8. {
  9. }
  10. }

Replace the above class with the following code.

• Similarly, create one more behavior to set Maximum length for phone number as below.
  
  1. using Xamarin.Forms;
  3. namespace PhoneNumberMask
  4. {
  5. public class EntryLengthValidator : Behavior<Entry>
  6. {
  7. public int MaxLength { get; set; }
  8. public int MinLength { get; set; } = 0;
  10. protected override void OnAttachedTo(Entry bindable)
  11. {
  12. base.OnAttachedTo(bindable);
  13. bindable.TextChanged += OnEntryTextChanged;
  14. }
  16. protected override void OnDetachingFrom(Entry bindable)
  17. {
  18. base.OnDetachingFrom(bindable);
  19. bindable.TextChanged -= OnEntryTextChanged;
  20. }
  22. void OnEntryTextChanged(object sender, TextChangedEventArgs e)
  23. {
  24. var entry = (Entry)sender;
  26. // if Entry text is longer than valid length
  27. if (entry.Text.Length > this.MaxLength)
  28. {
  29. string entryText = entry.Text;
  31. entryText = entryText.Remove(entryText.Length - 1); // remove last char
  33. entry.Text = entryText;
  34. }
  36. if (MinLength > 0)
  37. if (entry.Text.Length < this.MinLength)
  38. {
  39. ((Entry)sender).TextColor = Color.Red;
  40. }
  41. else
  42. ((Entry)sender).TextColor = Color.Black;
  43. }
  44. }
  45. }
• Open mainPage.xaml and paste the following code in it.
  
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. xmlns:behavior="clr-namespace:PhoneNumberMask"
  5. x:Class="PhoneNumberMask.MainPage">
  7. <StackLayout HorizontalOptions="Fill"
  8. VerticalOptions="Fill"
  9. Padding="5,20,5,5">
  10. <Label Text="Phone Number Formatting"
  11. FontAttributes="Bold"
  12. FontSize="Medium"></Label>
  13. <Entry Text="{Binding Phone}" Keyboard="Telephone">
  14. <Entry.Behaviors>
  15. <behavior:PhoneNumberMaskBehavior x:Name="PhoneMask" />
  16. <behavior:EntryLengthValidator MaxLength="12"/>
  17. </Entry.Behaviors>
  18. </Entry>
  19. </StackLayout>
  20. </ContentPage>

• Now, set either Android or iOS project as start-up project and run the application. You will see the output like below.
  
  
  
  
  When I try to enter the phone number in Entry box shown in above screen, it has displayed like below.
  
  
  

To view the full source code, please click here.

Summary

To display the phone number in XXX-XXX-XXXX format, I have used two behaviors for the Entry control defined in MainPage.xaml.

They are,

• EntryLengthValidator
  To allow a maximum number of characters.
  
  
• PhoneNumberMaskBehavior
  To mask the phone number in XXX-XXX-XXXX format