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 Override Editor Controller. 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

Multiple substitutions specified in non-positional format; did you mean to add the formatted=”false” attribute?

Reason

My Xamarin project uses multiple languages and their translations are stored in Resource/.resx files. When I build the project in VS 2015 the android project not built successfully and it gave me an error…

Error

Multiple substitutions specified in non-positional format;
did you mean to add the formatted=”false” attribute?
Mobility_App.Droid F:\Mobility_App.Droid\Resources\Values-fr\AppResources.xml

1 error

Image 1 : Error

Reason

I search the error and I found the issue occurred because some <string> tags consists of percentage(%) symbol.

2 reason

Image 2 : Reason % symbol

Solution

To fix this error we have to add a attribute “Formatted” to <string> tags which are consists of ‘%’ symbols. and Set “Formatted” attribute’s value to “false”.

3 solution

Image 3 : add <string formatted=”false”>

Now the issue has fixed and to ensure, then rebuild the project and you can see the solution is success.

4 success

Image 4 : Successfully Build

Thanks you !