Aplicando Máscaras en Xamarin Forms

Leomaris Reyes
May 19 · 3 min read

A la hora de desarrollar una Aplicación es importante tomar en cuenta aplicar las mayores características/facilidades posibles para hacer más agradable la Experiencia de Usuario. Nuestro cerebro se comporta en base a patrones, por lo tanto, tiene la capacidad de comprender ciertas informaciones más rápido de acuerdo a como sea presentada. Por ejemplo: Sin tener que leer mucho podemos ver que “(809) 222–3333” es un número de teléfono.

Es por eso que en esta publicación, explicaré cómo aplicar una Máscara a un control Entry en Xamarin Forms.😎


En primer lugar … ¿Qué cosas necesito saber?

  • ¿Qué es un Behavior?

Los Behaviors permiten agregar una funcionalidad a un control en una vista. Esta característica puede ser reutilizable y nos brinda una manera fácil de hacer pruebas de unidad. Si deseas obtener más información sobre este tema puedes ingresar .


¡Empecemos!

Como buena práctica es recomendable tener nuestro código organizado en carpetas que nos indique exactamente lo que contienen. En este caso, vamos a crear la carpeta Behaviors en nuestro proyecto, dentro de ella crearemos todos los que necesitemos.

Vamos a empezar a crear la clase MaskedBehavior. Aprenderemos paso a paso como enmascarar nuestros Entries.

1⃣. Creando la clase MaskBehavior

Creamos la clase MaskBehavior: Hereda de la clase Behavior y se debe agregar el control al cual se le aplicará el Behavior. En este caso <Entry>. Además de esto, agreguemos la variable de tipo string "Mask" que será la responsable de obtener el modelo de máscara desde el XAML.

Ahora vamos a crear el método que tiene el Power 💪😎: OnEntryTextChanged. En este método, podemos ver algunos comentarios enumerados los cuales explicaré a continuación.

  1. Agregando MaxLength: Cuando agregamos una máscara, implícitamente estamos dando la cantidad de texto necesario. Por eso, se añadió “automáticamente” en el Behavior en lugar de hacerlo en el XAML.
  2. Evaluando si el usuario está eliminando el texto: Controla que cuando el usuario borra el texto del Entry la máscara no sea afectada.
  3. Evaluando las posiciones de máscara: Basado en el modelo de máscara que se debe dar en el XAML evaluán los caracteres correspondiente para cada posición.

Como sabemos, para hacer posible el Behavior debemos reemplazar los métodos OnAttachedTo y OnDetachingFrom:


2⃣. Añadiendo el MaskBehavior al XAML

Para poder usarlo en nuestro XAML, agreguemos el namespace que nos permite acceder a esta carpeta.

Agreguemos el Behavior como muestro en el ejemplo:

⚠ Importante!

En el ejemplo podemos ver que la variable Mask recibe el modelo de máscara que tomará nuestro control Entry. (Mask = ”(XXX) XXX-XXXX”). Podemos cambiar dicho modelo / formato por cualquier otro que necesitemos.

Por ejemplo, quiero obtener una máscara de una identificación dominicana. (Mask = “XXX-XXXXXXX-X”).

¡¡¡Y voilá!!! 🎉


Buena suerte con tu implementación!

Haga click para ver un ejemplo en mi .

Artículo en inglés:

Gracias por leer mi artículo!!! 💚

Leomaris Reyes

Written by

I'm Leomaris Reyes from the Dominican Republic, with more than 5 years of experience in Software Development. I really love learning new things!!! ❤