Is there a way to partially mask an entry field in xamarin?

saleryansaleryan USMember
edited October 2015 in Xamarin.Forms

I would like to partially mask a username field to this format ta*********@company.com. I tried using a converter but it doesn't work. What is the best way to achieve this in xamarin.
<Entryx:Name="Email" Text="{Binding Model.Email , Converter={StaticResource maskedEmailConverter}}" />

public class MaskedEmailConverter : IValueConverter
    {

        private string _value;
        public object Convert(object value, Type targetType,
                              object parameter, CultureInfo culture)
        {

            var str = (value ??"").ToString();
            _value = str;
            var maskedStr = "";
            if (!string.IsNullOrEmpty(str) && str.Length>2)
            {
                var domainStr = str.IndexOf('@');
                var lengthOfMask = domainStr - 2;

                maskedStr = str.Substring(0, 2) + new string('*', lengthOfMask) + str.Substring(domainStr);
            }
            return maskedStr;
        }

        public object ConvertBack(object value, Type targetType,
                                  object parameter, CultureInfo culture)
        {
            return value;
        }
    }

Best Answers

Answers

  • adamkempadamkemp USInsider, Developer Group Leader mod

    Using a lossy converter isn't a good idea for a two-way binding. Plus, as the user types he probably doesn't expect to see asterisks replace what he types. Instead you should do the masking after the user has finished editing (like when the control loses focus).

  • saleryansaleryan USMember
    edited October 2015

    If I format the text after user loses focus the data will be lost as well and the data that is sent back to the service will have asterisks,. I want to be able to get the unmasked version of the text to my service but show the masked version to the user after the text box loses focus. What is the best way to do this when I'm binding just one property- Model.Email

    <Entryx:Name="Email" Text="{Binding Model.Email}" />

  • saleryansaleryan USMember

    This works thanks

  • saleryansaleryan USMember
    edited October 2015

    Hi I'd like to change this a bit so that the mask only gets applied if I already have the username saved. So, the first time the page launches if the user has logged in before the username field will be automatically populated and mask applied but when the user enters or changes the username no mask should be applied. How do I only apply the mask if the Model.username has an initial value?

  • adamkempadamkemp USInsider, Developer Group Leader mod

    For that you would want to pass more information to the converter so that it can do the right thing. For instance, maybe instead of passing in just the email to the converter you could pass the entire model. Then it basically becomes a ModelToMaskedEmailConverter, and it could use the state of whether the email is saved to decide whether to mask or not.

    Alternatively you could just decide that this converter is becoming too tricky to deal with and switch to using events and custom logic in your view code-behind to handle the masking.

Sign In or Register to comment.