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 floating label text editor in DataForm Xamarin.Forms?

Platform: Xamarin.Forms |
Control: SfDataForm |
Published Date: December 21, 2018 |
Last Revised Date: December 21, 2018

DataForm allows you to add custom editor by inheriting DataFormEditor class which is used to add custom editor by passing custom view in it.

 

This article explains adding custom text editor with floating label support in data form.

Here Name property is used as custom editor.

 

 

 

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 floating label text editor in dataForm. The custom view (Entry) property settings, commit, and data validation can be handled by overriding required methods in the DataFormEditor class.

 

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

 

 

And customized each platform renderer to show the floating label text layout as native control for custom editor(CustomEntry).

 

In Android Renderer:

 

Here, TextInputLayout is loaded as native control which wraps an EditText to show a floating label in editor.

 

Hint property of EditText handled to display the floating label (PlaceholderText) while entering the text, also customized the EditText view in renderer.

 

 

In iOS Renderer:

 

Here, UITextField control is loaded as native control. And by using LayoutSubviews override method added the sub views (UILabel) to display the floating label in editor.

 

In UWP Renderer:

 

Here TextBox control loaded as native control .

 

To display the floating label in editor, TextBox control Header property value set as PlaceholderText when control get focused to enter the text and control unfocused reset the Header property value to empty to remove the floating label in editor .

 

Also overridden the default style of TextBox is to customize the border style on loading and customized the PlaceholderText, header text color and border color on pointer over.

 

 

To download the sample, click FloatingLabelTextEditor

 

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