Automatic expandable editor

DevJDevJ 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.

Tagged:

Best Answer

Answers

  • ionixjuniorionixjunior USMember ✭✭✭

    Hi @DevJ, try use a ScrollView and inside an Editor with VerticalOptions="Fill"

    <ScrollView>
        <Editor 
            Text=""
            VerticalOptions="Fill"
        ></Editor>
    </ScrollView>
    
  • DevJDevJ CHMember ✭✭
    edited April 2017

    @ionixjunior I already have a ScrollView as my root layout and the documentation does not recommend nested ScrollViews ..

  • DevJDevJ CHMember ✭✭

    @ionixjunior I already have a ScrollView as my root layout. The documentation does not recommend nested ScrollViews..

  • DevJDevJ CHMember ✭✭

    @ionixjunior It works nicely. Still some minor laggs but acceptable. I have to test this on an older device as well..

  • thanhtongthanhtong VNMember ✭✭

    @ionixjunior Thanks. But It has some lags on iOS.
    How do you fix it?
    This is my demo iPhone 6 (iOS 10.3)

  • JackPot1995JackPot1995 ILMember ✭✭
    edited August 2017

    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.

  • ionixjuniorionixjunior USMember ✭✭✭

    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

    image

    @JackPot1995 I don't tested yet this solution in UWP. I will test it ASAP.

  • thanhtongthanhtong VNMember ✭✭

    Hi @ionixjunior,

    You tried tested this feature in a real device compiling in release mode? Performance tests in debug mode can be a pitfall.

    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?

  • JackPot1995JackPot1995 ILMember ✭✭

    @ionixjunior , did you test it?

  • ionixjuniorionixjunior USMember ✭✭✭

    @JackPot1995 not yet. I will test in this week ;)

  • thanhtongthanhtong VNMember ✭✭
    edited August 2017

    @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.

  • ionixjuniorionixjunior USMember ✭✭✭

    @thanhtong hmm it make sense. Generally I do not use AbsoluteLayout, so I did not find this problem.

  • Angelru9Angelru9 ESMember ✭✭✭
    edited September 2017

    Hello @ionixjunior thanks for your code, it works very well in Android, how to do for remove underline in Editor?

  • Angelru9Angelru9 ESMember ✭✭✭

    @thanhtong said:
    @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.

    Could you fix it ? I have the same problem with AbsoluteLayout.

  • thanhtongthanhtong VNMember ✭✭

    @Angelru9 said:

    @thanhtong said:
    @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.

    Could you fix it ? I have the same problem with AbsoluteLayout.

    I changed layout and not use AbsoluteLayout to avoid this problem.

  • Britton_BeckhamBritton_Beckham USMember ✭✭

    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 NullReferenceException coming out of Xamarin.Forms.Core.GridCalc.cs when the InvalidateMeasure() fires:

    System.NullReferenceException: Object reference not set to an instance of an object
    
    2017-12-06 09:32:34.267 Prepify.iOS[1165:993661] Unhandled managed exception:
    Object reference not set to an instance of an object (System.NullReferenceException)
      at Xamarin.Forms.Grid.MeasuredStarredColumns () [0x00179] in D:\agent\_work\1\s\Xamarin.Forms.Core\GridCalc.cs:434 
      at Xamarin.Forms.Grid.MeasureAndContractStarredColumns (System.Double width, System.Double height, System.Double totalStarsWidth) [0x00000] in D:\agent\_work\1\s\Xamarin.Forms.Core\GridCalc.cs:375 
      at Xamarin.Forms.Grid.MeasureGrid (System.Double width, System.Double height, System.Boolean requestSize) [0x0010e] in D:\agent\_work\1\s\Xamarin.Forms.Core\GridCalc.cs:509 
      at Xamarin.Forms.Grid.OnSizeRequest (System.Double widthConstraint, System.Double heightConstraint) [0x0002a] in D:\agent\_work\1\s\Xamarin.Forms.Core\GridCalc.cs:58 
      at Xamarin.Forms.VisualElement.OnMeasure (System.Double widthConstraint, System.Double heightConstraint) [0x00000] in D:\agent\_work\1\s\Xamarin.Forms.Core\VisualElement.cs:601 
      at Xamarin.Forms.VisualElement.GetSizeRequest (System.Double widthConstraint, System.Double heightConstraint) [0x00053] in D:\agent\_work\1\s\Xamarin.Forms.Core\VisualElement.cs:477 
      at Xamarin.Forms.Layout.GetSizeRequest (System.Double widthConstraint, System.Double heightConstraint) [0x00000] in D:\agent\_work\1\s\Xamarin.Forms.Core\Layout.cs:121 
      at Xamarin.Forms.VisualElement.Measure (System.Double widthConstraint, System.Double heightConstraint, Xamarin.Forms.MeasureFlags flags) [0x00054] in D:\agent\_work\1\s\Xamarin.Forms.Core\VisualElement.cs:535 
      at Xamarin.Forms.TemplatedView.OnSizeRequest (System.Double widthConstraint, System.Double heightConstraint) [0x0003c] in D:\agent\_work\1\s\Xamarin.Forms.Core\TemplatedView.cs:39 
      at Xamarin.Forms.VisualElement.OnMeasure (System.Double widthConstraint, System.Double heightConstraint) [0x00000] in D:\agent\_work\1\s\Xamarin.Forms.Core\VisualElement.cs:601 
      at Xamarin.Forms.VisualElement.GetSizeRequest (System.Double widthConstraint, System.Double heightConstraint) [0x00053] in D:\agent\_work\1\s\Xamarin.Forms.Core\VisualElement.cs:477 
      at Xamarin.Forms.Layout.GetSizeRequest (System.Double widthConstraint, System.Double heightConstraint) [0x00000] in D:\agent\_work\1\s\Xamarin.Forms.Core\Layout.cs:121 at Xamarin.Forms.VisualElement.Measure (System.Double widthConstraint, System.Double heightConstraint, Xamarin.Forms.MeasureFlags flags) [0x00054] in D:\agent\_work\1\s\Xamarin.Forms.Core\VisualElement.cs:535 
      at Xamarin.Forms.ScrollView.LayoutChildren (System.Double x, System.Double y, System.Double width, System.Double height) [0x0006d] in D:\agent\_work\1\s\Xamarin.Forms.Core\ScrollView.cs:183 
      at Xamarin.Forms.Layout.UpdateChildrenLayout () [0x000c7] in D:\agent\_work\1\s\Xamarin.Forms.Core\Layout.cs:240 
      at Xamarin.Forms.Layout.OnSizeAllocated (System.Double width, System.Double height) [0x0000f] in D:\agent\_work\1\s\Xamarin.Forms.Core\Layout.cs:205 at Xamarin.Forms.VisualElement.SizeAllocated (System.Double width, System.Double height) [0x00000] in D:\agent\_work\1\s\Xamarin.Forms.Core\VisualElement.cs:637 
      at Xamarin.Forms.Layout+<>c.<OnChildMeasureInvalidated>b__40_0 () [0x00080] in D:\agent\_work\1\s\Xamarin.Forms.Core\Layout.cs:343 
      at Foundation.NSAsyncActionDispatcher.Apply () [0x00000] in /Users/builder/data/lanes/5489/c4240f3f/source/xamarin-macios/src/Foundation/NSAction.cs:163 
      at (wrapper managed-to-native) UIKit.UIApplication:UIApplicationMain (int,string[],intptr,intptr)
      at UIKit.UIApplication.Main (System.String[] args, System.IntPtr principal, System.IntPtr delegate) [0x00005] in /Users/builder/data/lanes/5489/c4240f3f/source/xamarin-macios/src/UIKit/UIApplication.cs:79 
      at UIKit.UIApplication.Main (System.String[] args, System.String principalClassName, System.String delegateClassName) [0x00038] in /Users/builder/data/lanes/5489/c4240f3f/source/xamarin-macios/src/UIKit/UIApplication.cs:63 
      at Prepify.iOS.Application.Main (System.String[] args) [0x00001] in C:\GIT\prepify-app\Prepify.iOS\Main.cs:12 
    
  • sucharithasucharitha Member ✭✭

    Its not working for me.
    But my editor is inside the Frame layout .Is that the reason??

Sign In or Register to comment.