How To Mask Credit Card Number In Xamarin.Forms Dataform (Sfdataform)

Updated on Feb 15, 2024

You can mask the credit card number in Xamarin.Forms SfDataForm by using MaskedEditText editor.

Refer to the online user guide documentation for customize the editor in DataForm using AutoGeneratingDataFormItem event.

You can also refer the following article.

https://www.syncfusion.com/kb/11542/how-to-mask-credit-card-number-in-xamarin-forms-dataform-sfdataform

Customize the Mask text of DataFormMaskedEditTextItem in AutoGeneratingDataFormItem.

public class DataFormBehavior : Behavior<ContentPage>
{
    SfDataForm dataForm;
    protected override void OnAttachedTo(ContentPage bindable)
    {
        base.OnAttachedTo(bindable);
        dataForm = bindable.FindByName<SfDataForm>("dataForm");
        dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;
    }
    private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
    {
        if (e.DataFormItem != null)
        {
            if (e.DataFormItem.Name == "CardNumber")
            {
                var maskedItem = e.DataFormItem as DataFormMaskedEditTextItem;
                maskedItem.Mask = "0000-0000-0000-0000";
                maskedItem.PromptChar = 'X';
                maskedItem.KeyBoard = Keyboard.Numeric;
            }
        }
    }
    protected override void OnDetachingFrom(ContentPage bindable)
    {
        base.OnDetachingFrom(bindable);
        dataForm.AutoGeneratingDataFormItem -= DataForm_AutoGeneratingDataFormItem;
    }
}

Output

CreditCardNumberMask