Search code examples
xamarin.formsheighteditor

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>
Solution

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