CODEWITHSUNDEEP
xamarin.formsheighteditor
Sreejith Sree
Sreejith Sree

Reputation: 3681

Xamarin forms: Increase the editor height based on the character count

I have an editor like below in my xamarin forms project.

enter image description here

When I type a message on it I need to increase the height of the editor based on the number of characters.

Here is my complete code of bottom part, I added a frame layout for making the entry corners are round:

<StackLayout
                HorizontalOptions="FillAndExpand"
                x:Name="tweetBox"
                VerticalOptions="End"
                Margin="0,0,0,10"
                BackgroundColor="#f2f2f2"
                Orientation="Horizontal">

                <Image 
                     WidthRequest="25"
                     HeightRequest="25"
                     VerticalOptions="Center"
                     Source="ic_add_blue_xx.png"
                     Margin="10,5,-5,5">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer
                            Tapped="ShowPicureOptions"
                            NumberOfTapsRequired="1" />
                    </Image.GestureRecognizers> 
                </Image>

                <Frame
                    Padding="0"
                    Margin="5,5,0,5"
                    HorizontalOptions="FillAndExpand"
                    CornerRadius="10">

                    <Editor 
                        x:Name="tweetText"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="Center"
                        FontFamily="Bold"
                        BackgroundColor="White"
                        TextColor="#959595"
                        AutoSize="TextChanges"
                        PlaceholderColor="#959595"
                        Placeholder="  Enter Message..."/> 
                </Frame>

                <Image 
                    VerticalOptions="Center"
                    WidthRequest="25"
                    Margin="5,5,10,5"
                    HeightRequest="25"
                    HorizontalOptions="End"
                    Source="ic_send_xx.png"> 
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer
                            Tapped="SendTweet_Icon_Clicked"
                            NumberOfTapsRequired="1" /> 
                    </Image.GestureRecognizers>
                </Image>
            </StackLayout>

Upvotes: 3

Views: 3427

Answers (2)

Volodymyr Lymar
Volodymyr Lymar

Reputation: 404

I had a similar problem on Android and was able to resolve that by setting the IsSingleLine property to false in a custom renderer.

Here is a gist of the renderer:

    protected override void OnElementChanged (ElementChangedEventArgs<Editor> e)
    {
        base.OnElementChanged (e);
        if (Control != null)
        {
            Control.SetSingleLine(false);
        }
    }

It is weird that the official Xamarin.Forms documentation states that

The Editor control is used to accept multi-line input.

However, its default settings on Android do not allow multiple lines.

Upvotes: 0

Gerald Versluis
Gerald Versluis

Reputation: 34003

It is built-in to Xamarin.Forms now. Simply use the Editor control and set the AutoSize property to TextChanges. Note that the auto sizing will not work when you set a HeightRequest.

More information here: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/editor

Update: from the comments we resolved that replacing the StackLayout with a Grid helps you achieve the result. This is because a StackLayout just takes up the space that is (initially) taken up by its children. A Grid is able to grow dynamically.

Upvotes: 10

Related Questions