Articles in this section
Category / Section

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

1 min read

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. 

 

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

Gif

View Sample in GitHub

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied