Masked Entry in Xamarin.Forms

A mask on an entry field is way to format the input into something more human readable. For example, a phone number may look like +61 400 555 555, or (555) 555-555. There are many ways to implement a mask. For maximum configurability, you would use Regex, however for most simple cases, we can implement something much easier.


The easiest way to implement a mask, is through a Behavior. This code will set the char positions that each mask character is meant to be located at. For example, in this code, we will choose X as our special character. Hence a mask of (XXX) XXX-XXX, will mean that spaces, brackets and dashes will all be included as part of the non-user typed entry.

public class MaskedBehavior : Behavior<Entry>
    private string _mask = "";
    public string Mask
        get => _mask;
            _mask = value;

    protected override void OnAttachedTo(Entry entry)
        entry.TextChanged += OnEntryTextChanged;

    protected override void OnDetachingFrom(Entry entry)
         entry.TextChanged -= OnEntryTextChanged;

    IDictionary<int, char> _positions;

    void SetPositions()
        if (string.IsNullOrEmpty(Mask))
            _positions = null;

        var list = new Dictionary<int, char>();
        for (var i = 0; i < Mask.Length; i++)
            if (Mask[i] != 'X')
                list.Add(i, Mask[i]);

        _positions = list;

    private void OnEntryTextChanged(object sender, TextChangedEventArgs args)
        var entry = sender as Entry;

        var text = entry.Text;

        if (string.IsNullOrWhiteSpace(text) || _positions == null)

        if (text.Length > _mask.Length)
            entry.Text = text.Remove(text.Length - 1);

        foreach (var position in _positions)
            if (text.Length >= position.Key + 1)
                var value = position.Value.ToString();
                if (text.Substring(position.Key, 1) != value)
                    text = text.Insert(position.Key, value);

        if (entry.Text != text)
            entry.Text = text;

This code, will also limit the amount of text you can enter, up to the mask.

Apply Mask

Now you want to apply your mask to an Entry element. Here I have added the MaskedBehavior, and added a mask of (XXX) XXX-XXX.

<ContentPage xmlns=""
        <StackLayout VerticalOptions="Center">
            <Entry Keyboard="Numeric">
                    <behavior:MaskedBehavior Mask="(XXX) XXX-XXX" />

The mask can be anything you want, with the X as the character that the user types in.


Here you can see the entry of a phone number, and it automatically applies the mask, as they type.


To be a truly generic masked behavior, we would need to implement regex. Regex, while powerful can be difficult to understand, for many programmers perspectives, hence I like this masked behavior, to clearly indicate what you want. You can easily expand this behavior to include additional checks such as if it is a digit.


    1. Adam

      I wasn’t aware of a memory leak with behaviors in Xamarin.Forms. But check the issues tab on GitHub to see if its still there. If there is a memory leak, they will normally fix them as higher priorities.