syncfusionexamples/mask-credit-card-number-dataform-xamarin

This repository contains a sample on How to mask credit card number in the Syncfusion Xamarin.Forms DataForm (SfDataForm)?

How to mask credit card number in Xamarin.Forms DataForm (SfDataForm)

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

C#

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