How to mask credit card number in the .NET MAUI DataForm (SfDataForm)?

The Syncfusion® .NET MAUI DataForm (SfDataForm) allows you to mask credit card numbers. Below is a demonstration of how to achieve this.

C#:

Prepare a model class with required fields.

public class DataFormModel
{
   public DataFormModel()
   {
       this.CardNumber = string.Empty;
   }
   
   [Display(ShortName = "Card Number")]
   [DataType(DataType.PhoneNumber)]
   public string CardNumber { get; set; }
}

C#:

Initialiize the DataFormModel in the DataFormViewModel class.

public class DataFormViewModel
{
   public DataFormModel DataFormModel { get; set; }

   public DataFormViewModel()
   {
       this.DataFormModel = new DataFormModel();
   }
}

XAML:

Create a dataform and bind the DataFormModel as its DataObject.

<dataForm:SfDataForm x:Name="dataForm"
                    DataObject="{Binding DataFormModel}" >
   <dataForm:SfDataForm.BindingContext>
       <local:DataFormViewModel/>
   </dataForm:SfDataForm.BindingContext>
</dataForm:SfDataForm>

C#:

You can customize the CardNumber field by setting the DataFormItem as DataFormMaskedTextItem using the GenerateDataFormItem event handler.

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
   if (e.DataFormItem != null)
   {
       if (e.DataFormItem.FieldName == "CardNumber")
       {
           var maskedItem = e.DataFormItem as DataFormMaskedTextItem;
           maskedItem.Mask = "0000-0000-0000-0000";
           maskedItem.PromptChar = 'X';
           maskedItem.Keyboard = Keyboard.Numeric;
       }
   }
}

Download the complete sample from GitHub.

Output:

Conclusion:

I hope you enjoyed learning how to mask credit card numbers in the .NET MAUI DataForm (SfDataForm).

Refer to our .NET MAUI DataForm feature tour page for its other groundbreaking feature representations. You can also explore our .NET MAUI DataForm documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads age. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI DataForm and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!