Applying Mask in Xamarin Forms

When we develop an Application, it’s important to take into consideration every feature possible to ease the user’s experience. Our brain behaves based on patterns, therefore, has the ability to understand certain information faster according to its presentation. For example: Without having to read a lot, we can see that “(809) 222-3333” is a telephone number.

That’s why, in this post, I will tech you how to apply a Mask to an Entry in Xamarin Forms.? In this explanation, we are going to use Behaviors.

First of all… What things do I might need to know

– What is a Behavior?

The Behaviors let you attach a piece of functionality to an element in a view. This feature can be reusable and give us an easy way to do unit testing. If you want learn more about this topics you can enter here.

Let’s start!

As a good a practice is always better to have our code organized in folders that tells us exactly what they hold. In this case, we are going to create the Behaviors folder in our project, inside this, we will be creating every behavior classes that we need.

Let’s start creating the MaskedBehavior class. Learning step by step, what we are doing to get the masked in our entries.

1⃣ . Creating the MaskBehavior class

Create the MaskBehavior class: Inherit from the Behavior class and add the control in which will be applied the Behavior. In this case <Entry>. Beside this, let’s add the string Mask variable, that will be the responsable to get the mask model from the XAML.

Now, let’s create the method that have the power ??: OnEntryTextChanged. In the method, we can see some comments listed. Let’s explain:

1. Adding the MaxLength: When we add a mask, implicitly we are giving the amount of text needed. That’s why, the MaxLength in added “automatically” in the Behavior instead of in the XAML.
2. Evaluating if the user is removing the text: This sentence is just to control that when the user erases Entry text, the mask is not affected.
3. Evaluating mask positions: Here based on the mask model that must be given in the XAML. The Entry add corresponding character.

As we know, to make possible the Behavior you must to override the OnAttachedTo and OnDetachingFrom methods:

2⃣. Adding the MaskBehavior to the XAML

To be able to use it in our XAML, let’s add the namespace that allow to us to access to this folder.

Let’s add the Behavior as I show in the example:

⚠ Important to know

In the example, we can see the variable Mask receiving that Mask model that our Entry will be getting. ( Mask=”(XXX) XXX-XXXX” ). We can change with mask model with whatever mask that we need.