How to add custom Password editor in SfDataForm?

SfDataForm allows you to add custom editor by overriding the DataFormEditor class which is used to add custom view in data form.

This article explains adding custom Password editor in SfDataForm.

By passing custom view in DataFormEditor class, you can add the custom editor in data form. You can refer to the data form user guide documentation for creating new custom editor: https://help.syncfusion.com/xamarin/sfdataform/editing#creating-new-custom-editor

Here, Entry is loaded for custom Password editor.

The custom view (Entry) property settings, commit, and data validation can be handled by overriding required methods in the DataFormEditor  class. 

Here, the IsPassword property is set to true to load the Password editor using OnInitializeView override method which is used to change the custom view property settings.

Manually commit the custom DataFormItem editor value by using the OnCommitValue override method of DataFormEditor class on the custom editor TextChanged event which is used to update the custom editor value in the DataObject property of SfDataForm.

Manually validate the custom editor value by using the OnValidateValue override method of DataFormEditor class on the custom editor Unfocused event which is used to validate the custom editor value in data form.

Refer to the following code example for binding the DataObject and adding custom editor using the RegisterEditor method as Password editor in data form.

You can also customize or change the default appearance of loaded custom editor view in custom renderer platform by using the OnElementChanged override method of ViewRenderer. By using the SetNativeControl method, you can set the native platform control for loaded custom editor.

This article explains custom renderer in SfDataForm for Xamarin.Forms.UWP platform alone.

Here, PasswordBox loaded as native control for custom Password editor in Xamarin.Forms.UWP platform, accessed the RevealButton which is the template child of  PasswordBox, and raised the Click event for RevealButton to show the text of the PasswordBox control on RevealButton clicked by setting the PasswordBox property PasswordRevealMode as Visible.

Refer to the following code example to set the native control as PasswordBox in renderer.

The default style of PasswordBox control is overridden to customize the pointer over PlaceholderText and border color by using the GotFocus, LostFocus, PointerEntered, and PointerExited events. The PasswordRevealMode property of PasswordBox control is changed as Peek in the LostFocus event to hide the text visible on focus lost. 

Click here to download the sample.