We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add custom Password editor in SfDataForm?

Platform: Xamarin.Forms |
Control: SfDataForm |
Published Date: October 31, 2018 |
Last Revised Date: November 7, 2018

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.

 

 

    public class CustomPasswordEntry : Entry

    {

        public CustomPasswordEntry()

        {

 

        }

    }

 

 

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.

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile