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

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

Editor

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.

Project Structure

Image 1 : Project Structure

Screenshot_20180224-214652

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.

first code

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.

invalidate mesasure

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.

dynamicEditor render

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.

renderer xaml

Image 5 : Add XML namespace  of the Custom Render

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

XFEditor

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.

Screenshot_20180224-233221

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