Articles in this section
Category / Section

How to customize the input direction of custom text editor in platform renderer?

2 mins read

For data type string, text editor will be created, and Entry control will be loaded in Xamarin DataForm and you can customize the data form text editor in each platform renderer by registering custom text editor to change the appearance or default style of native control. This article demonstrates the customizing the input direction of text editor in SfDataForm.

 

Please refer the more details about custom Entry renderer support in Xamarin.Forms.

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/entry

 

Please refer the below link for more details about renderer and native control customization support in Xamarin.Forms platform.

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/renderers

 

First of all, you should register the custom editor in SfDataForm as follows using DataFormEditor calss which is used to add new editor in SfDataForm. Here `Entry` will be loaded as custom editor.

 

Code example in Xamarin.Forms project.

 
        public MainPage() 
        { 
            InitializeComponent(); 
            var expenseInfo = new ExpenseInfo(); 
            // CustomEditor Registration 
            dataForm.RegisterEditor("CustomTextEditor ", new CustomEditor(dataForm)); 
 
            dataForm.RegisterEditor("Name", " CustomTextEditor ");             
            dataForm.DataObject = expenseInfo;             
        }         
 
    public class CustomEditor : DataFormEditor<CustomEntry>
    {
        public CustomEditor(SfDataForm dataForm) : base(dataForm)
        {
 
        }
 
        protected override void OnInitializeView(DataFormItem dataFormItem, CustomEntry view)
        {
            view.Text = "CustomTextEditor";
        }
        protected override CustomEntry OnCreateEditorView()
        {
            return new CustomEntry();
        }
    } 
  public class CustomEntry : Entry
    {
        public CustomEntry()
        {
 
        }
    }
 } 

 

You can customize the `Entry` Editor loaded in SfDataForm by using EntryRenderer class.

And EntryRenderer allows you to customize the default native rendering by using `OnElementChanged` override method which is used to renders the native controls or customized control with their own platform specific appearance.

 

On Android platform, `EntryRenderer` class instantiates an EditText control and changed its Gravity value as Right in order to change the default input flow direction in text editor of SfDataForm.

 

Code example in Xamarin.Forms.Android project.

 

 
using Xamarin.Forms; 
using Xamarin.Forms.Platform.Android; 
[assembly: ExportRenderer(typeof(MyEntry), typeof(CustomEntryRenderer))] 
namespace GettingStarted 
{        
    public class CustomEntryRenderer : EntryRenderer 
    { 
 
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) 
        { 
            base.OnElementChanged(e); 
            if (e.NewElement != null && this.Control != null) 
            { 
                this.Control.Gravity = Android.Views.GravityFlags.Right;                    
            } 
        } 
    }    
} 
 

 

On iOS platform, `EntryRenderer` class instantiates an UITextField control and changed its TextAlignment value as Right in order to change the default input flow direction in text editor.

 

Code example in Xamarin.Forms.iOS project.

 

 
using Xamarin.Forms.Platform.iOS; 
[assembly: ExportRenderer(typeof(MyEntry), typeof(CustomEntryRenderer))] 
 
namespace GettingStarted 
{ 
    public class CustomEntryRenderer : EntryRenderer 
    { 
 
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) 
        { 
            base.OnElementChanged(e); 
            if (e.NewElement != null && this.Control != null) 
            { 
                this.Control.TextAlignment = UITextAlignment.Right;                 
            } 
        } 
    } 
 
} 
 
 

 

 

Like for UWP platform, `EntryRenderer` class instantiates an TextBox control and changed its FlowDirection value as RightToLeft to change the default input flow direction in text editor.

 

Code example in Xamarin.Forms.UWP project.

 
using Xamarin.Forms.Platform.UWP; 
[assembly: ExportRenderer(typeof(MyEntry), typeof(CustomEntryRenderer))] 
 
namespace GettingStarted 
{ 
    public class CustomEntryRenderer : EntryRenderer 
    { 
 
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) 
        { 
            base.OnElementChanged(e); 
            if (e.NewElement != null && this.Control != null) 
                this.Control.FlowDirection = Windows.UI.Xaml.FlowDirection.RightToLeft; 
        } 
    } 
} 
 

 

 

Please download the sample from below link.

CustomTextEditor

 

 

Conclusion

I hope you enjoyed learning about how to customize the input direction of custom text editor in platform renderer.

You can refer to our Xamarin DataForm’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin DataForm documentation to understand how to present and manipulate data.

For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Xamarin DataForms and other Xamarin components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied