Automatic expandable editor
CHMember ✭✭
Basically I want an input field, which expands whenever the user puts too much text in it. There are several approaches out there trying to achieve this. The problem exists in web developement too and it's pretty basic (as seen by an user).
I went with the most logical (well, for me) approach I found. Extend the Changed-event.
private void OnTextChanged_Grow(object inSender, TextChangedEventArgs inEventArgs)
{
InvalidateMeasure();
}
But this heavily affects the performance! The power needed to invalidate the view each time the user presses a key is just too much.
Is there any other clean way to do it? Maybe even a change to the design / architecture?
Thanks in advance.
Best Answer
-
ionixjunior
USMember ✭✭✭
@DevJ hmm, ok. I found a possible solution in this discussion https://forums.xamarin.com/discussion/38172/how-to-autosize-editor-height
I tested and works. Lets go:
You can create a custom control called ExpandableEditorusing Xamarin.Forms; namespace Core { public class ExpandableEditor : Editor { public ExpandableEditor() { TextChanged += OnTextChanged; } ~ExpandableEditor() { TextChanged -= OnTextChanged; } private void OnTextChanged(object sender, TextChangedEventArgs e) { InvalidateMeasure(); } } }I know that this solution is similar you tried, but pay attention in destructor of class to prevent memory leaks...
In constructor, assign TextChanged event for rebuild editor measure. Is important you remove this event in class destructor to prevent possible memory leaks.
For iOS, create a custom renderer for disable scroll inside control. This will permit editor expands.
using Core; using Core.iOS; using Xamarin.Forms; using Xamarin.Forms.Platform.iOS; [assembly: ExportRenderer(typeof(ExpandableEditor), typeof(ExpandableEditorRenderer))] namespace Core.iOS { public class ExpandableEditorRenderer : EditorRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Editor> e) { base.OnElementChanged(e); if (Control != null) Control.ScrollEnabled = false; } } }For Android no custom renderer is need.
For use your custom control, you only need add your namespace and use your class.
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Core" x:Class="Core.CorePage" Title="Home" BackgroundColor="Silver" > <ContentPage.Content> <ScrollView Padding="10"> <StackLayout> <Label Text="Enter text" /> <local:ExpandableEditor TextColor="White" BackgroundColor="Red" /> </StackLayout> </ScrollView> </ContentPage.Content> </ContentPage>I added some colors to easily see editor expanding.
I hope this help you.
10
Answers
Hi @DevJ, try use a ScrollView and inside an Editor with VerticalOptions="Fill"
<ScrollView> <Editor Text="" VerticalOptions="Fill" </ScrollView>@ionixjunior I already have a ScrollView as my root layout and the documentation does not recommend nested ScrollViews ..
@ionixjunior I already have a ScrollView as my root layout. The documentation does not recommend nested ScrollViews..
@DevJ hmm, ok. I found a possible solution in this discussion https://forums.xamarin.com/discussion/38172/how-to-autosize-editor-height
I tested and works. Lets go:
You can create a custom control called ExpandableEditor
using Xamarin.Forms; namespace Core { public class ExpandableEditor : Editor { public ExpandableEditor() { TextChanged += OnTextChanged; } ~ExpandableEditor() { TextChanged -= OnTextChanged; } private void OnTextChanged(object sender, TextChangedEventArgs e) { InvalidateMeasure(); } } }I know that this solution is similar you tried, but pay attention in destructor of class to prevent memory leaks...
In constructor, assign TextChanged event for rebuild editor measure. Is important you remove this event in class destructor to prevent possible memory leaks.
For iOS, create a custom renderer for disable scroll inside control. This will permit editor expands.
using Core; using Core.iOS; using Xamarin.Forms; using Xamarin.Forms.Platform.iOS; [assembly: ExportRenderer(typeof(ExpandableEditor), typeof(ExpandableEditorRenderer))] namespace Core.iOS { public class ExpandableEditorRenderer : EditorRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Editor> e) { base.OnElementChanged(e); if (Control != null) Control.ScrollEnabled = false; } } }For Android no custom renderer is need.
For use your custom control, you only need add your namespace and use your class.
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Core" x:Class="Core.CorePage" Title="Home" BackgroundColor="Silver" > <ContentPage.Content> <ScrollView Padding="10"> <StackLayout> <Label Text="Enter text" /> <local:ExpandableEditor TextColor="White" BackgroundColor="Red" /> </StackLayout> </ScrollView> </ContentPage.Content> </ContentPage>I added some colors to easily see editor expanding.
I hope this help you.
@ionixjunior It works nicely. Still some minor laggs but acceptable. I have to test this on an older device as well..
@ionixjunior Thanks. But It has some lags on iOS.
How do you fix it?
This is my demo iPhone 6 (iOS 10.3)
Hi,
Do you have a working solution for UWP as well?
I tried your solutions but this is what I get:
The Editor is not expanded enough for some reason.
Hi @thanhtong, I dont realize lags on iOS. Maybe my example project is very simple.
You tried tested this feature in a real device compiling in release mode? Performance tests in debug mode can be a pitfall.
See my demo running in iPhone SE 10.3
@JackPot1995 I don't tested yet this solution in UWP. I will test it ASAP.
Hi @ionixjunior,
I tried tested on my iPhone 5C (iOS 10.2) in release mode. It has the same problem.
it is still lags. Could you have any solutions for fixing?
@ionixjunior , did you test it?
@JackPot1995 not yet. I will test in this week
@ionixjunior I found out problem about layout.
My xaml is:
ScrollView -> Stacklayout -> AbsoluteLayout -> ExpandableEditor (AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All") -> Label (AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All")Because my ExpandableEditor inside a AbsoluteLayout. AbsoluteLayout make ExpandableEditor can not extend height correctly.
@thanhtong hmm it make sense. Generally I do not use AbsoluteLayout, so I did not find this problem.
Hello @ionixjunior thanks for your code, it works very well in Android, how to do for remove underline in Editor?
Could you fix it ? I have the same problem with AbsoluteLayout.
I changed layout and not use AbsoluteLayout to avoid this problem.
So I have had this implemented now for sometime in a project I have, but I just upgraded to XF 2.4 (sr-6). Now I get a
NullReferenceExceptioncoming out of Xamarin.Forms.Core.GridCalc.cs when theInvalidateMeasure()fires:Its not working for me.
But my editor is inside the Frame layout .Is that the reason??
Nowadays can use AutoSize="TextChanges" in Editor control