Masked entry control Xamarin.forms

Question

Masked entry control for Xamarin.forms. I would like to have a entry field which will only allow to add values in format: xx:xx eg: 01:00, 25:98 etc. I tried setting keyboard property to numeric, but it doesn't help as it does not contain :

How can I do that. I am targeting all the platforms so should work for all.

Answer 1

Do you want a special keyboard with only those controls or would an Entry that only showed those characters no matter what characters you typed work? If the latter would be ok, I would suggest attaching a behavior to your entry.

The below code will allow the user to type anything they want, but if what they type is not a number or a colon, then it will not show up in the entry, you could also display an error message of some kind if you wanted.

/// <summary>
/// Will validate that the text entered into an Entry is a valid number string (allowing: numbers and colons).
/// </summary>
public class IntColonValidationBehavior : Behavior<Entry> {

    public static IntColonValidationBehavior Instance = new IntColonValidationBehavior();

    /// <summary>
    /// Attaches when the page is first created.
    /// </summary>
    protected override void OnAttachedTo(Entry entry) {
        entry.TextChanged += OnEntryTextChanged;
        base.OnAttachedTo(entry);
    }

    /// <summary>
    /// Detaches when the page is destroyed.
    /// </summary>
    protected override void OnDetachingFrom(Entry entry) {
        entry.TextChanged -= OnEntryTextChanged;
        base.OnDetachingFrom(entry);
    }

    private void OnEntryTextChanged(object sender, TextChangedEventArgs args) {

        if(!string.IsNullOrWhiteSpace(args.NewTextValue)) {
            int  result;
            string valueWithoutColon = args.NewTextValue.Replace(":", string.Empty);
            bool isValid = int.TryParse(valueWithoutColon, out result);

            ((Entry)sender).Text = isValid ? args.NewTextValue : args.NewTextValue.Remove(args.NewTextValue.Length - 1);
        }
    }
}

Then your Entry will look like so:

<Entry Placeholder="Enter an int or a colon">
    <Entry.Behaviors>
        <local:IntColonValidationBehavior.Instance />
    </Entry.Behaviors>
</Entry>

-OR-

Entry entry = new Entry { Placeholder = "Enter an int or a colon" };
entry.Behaviors.Add (IntColonValidationBehavior.Instance);

*Edit:

Maybe replace the string.IsNullOrEmpty if statement with this (have not actually tested but you could tweak this to make it work for you):

        if(!string.IsNullOrWhiteSpace(args.NewTextValue)) {
            int  result;
            string[] splitValue = args.NewTextValue.Split(new [] { ":" }, StringSplitOptions.RemoveEmptyEntries);

            foreach(string value in splitValue) {
                if(value.Length > 2) {
                    ((Entry)sender).Text = args.NewTextValue.Remove(args.NewTextValue.Length - 1);
                    return;
                }

                bool isValid = int.TryParse(args.NewTextValue, out result);

                if(!isValid) {
                    ((Entry)sender).Text = args.NewTextValue.Remove(args.NewTextValue.Length - 1);
                    return;
                }
            }


            ((Entry)sender).Text = args.NewTextValue;
        }