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
