Xamarin Forms Editor Control – How to Change the Height Dynamically ?

When I was trying to create a UI with a multi-line editor control in Xamarin Forms, I got an issue that It does not extend its height when I was adding multiple lines like in Android message app, Whatsapp etc..

His is my first XAML code which I tried before solve the issue.

Image 1 : Project Structure

Image 2 : With Default Editor control

In this UI, you can see that is does not extend its height when enter multiple lines.

Here is the code before customizing the editor.

Then I looked for a solution for how to do it..

Solution

The solution is adding a custom render. Inside the custom render, we have to call InvalidateMeasure() method inside the TextChanged event to invalidate the layout of this Xamarin.Forms.VisualElement.

Image 3 : InvalidateMeasure method definition

Thanks @JulianPasquefor the solution.

How to add the custom render for the Editor in the app.

First I’ll create a class EditorXF inside the CustomRenderer folder. and inherit Xamarin.Forms.Editor class to the EditorXF.

Then create a constructor for  EditorXF and create an event for TextChanged and call InvalidateMeasure() inside the event.

Image 4 : Editor Custom Render

Then what we have to do is, call the customized render in the XAML code of the View.

First we have to add the namespace of the EditorXF render in the XAML Vew.

Image 5 : Add XML namespace  of the Custom Render

Then Change the replace the Editor control by EditorXF render control using local:EditorXF tag.

Image 6 : Call Customized Editor in Vew

Then run the app and we will be able to add multiple lines and extend the height of the editor control dynamically.

Image 7 : Extended Editor

You can Have the full solution here @GitHub ..

https://github.com/kgbuddhima/DynamicEditorXF

Enjoy !!!!   

References

https://developer.xamarin.com/guides/xamarin-forms/user-interface/text/editor/

https://forums.xamarin.com/discussion/36068/example-custom-renderer-for-editor-widget

https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/src/Forms/XLabs.Forms.Droid/Controls/ExtendedEditor/ExtendedEditorRenderer.cs

https://forums.xamarin.com/discussion/99124/how-to-show-multiple-lines-in-an-editor