Editor goes behind the keyboard when it resized using Wordwrap in Xamarin.Forms (iOS)?

Question

I am proceeding further and generating new ticket as it is quite different from this issue How to prevent Editor to go behind the keyboard in Xamarin.Forms?

I have chat page and autosize editor. When user type more than 1-2 lines, Editor expand correctly but it goes behind the keyboard.

However, if user add multiple lines using "return" it works correctly. I think I am missing something in Xaml page to play with Editor and StackLayout.

Please suggest

Please note that I don't use Xam.Plugins.Forms.KeyboardOverlap . To manage layout on keyboard visibility, I use custom stacklayout WrapperStackLayoutRenderer which set bottom padding on appear and disappear of keyboard.

Page Xaml

<ContentPage.Content>
    <local1:WrapperStackLayout>
        <Grid Margin="0" Padding="0" RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>

            <ListView x:Name="MessagesListView" 
                ItemTemplate="{StaticResource MessageTemplateSelector}"
                ItemsSource="{Binding Conversations}" 
                HasUnevenRows="True" 
                Margin="0" 
                Grid.Row="0"
                SeparatorVisibility="None"/>

            <Grid RowSpacing="1" ColumnSpacing="2" Padding="5" Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="auto" />
                </Grid.ColumnDefinitions>
                <local1:EditorWithAutoSize x:Name="txtMessage" Text="{Binding SendingText}" TextChanged="EnableSend"/>
                <Frame x:Name="SendButton" Grid.Column="1" Margin= "0" Padding="0" HasShadow="false" HeightRequest="25"
            BackgroundColor="Transparent" HorizontalOptions="FillAndExpand">
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer Tapped="SendMessage_Click" NumberOfTapsRequired="1" />
                    </Frame.GestureRecognizers>
                    <Label Text="Send" x:Name="sendButton" HeightRequest="20"
                HorizontalOptions="Center" VerticalOptions="Center"/>
                </Frame>
            </Grid>
        </Grid>
    </local1:WrapperStackLayout>
</ContentPage.Content>

EditorWithAutoSize

public class EditorWithAutoSize : Editor
{
    public EditorWithAutoSize()
    {
        this.TextChanged += (sender, e) => {
            this.InvalidateMeasure();
        };
    }
}

WrapperStackLayout

public class WrapperStackLayout : StackLayout
{
}

WrapperStackLayoutRenderer

public class WrapperStackLayoutRenderer : VisualElementRenderer<StackLayout>
{
    public WrapperStackLayoutRenderer()
    {
        UIKeyboard.Notifications.ObserveWillShow((sender, args) =>
        {
            if (Element != null)
            {
               Element.Margin = new Thickness(0, 0, 0, (args.FrameEnd.Height));
            }
        });

        UIKeyboard.Notifications.ObserveWillHide((sender, args) =>
        {
            if (Element != null)
            {
                Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
            }
        });
    }
}

Answer 1

You have to add RowDefinition Height="auto" in your second Grid , then the editor will auto group with the text you entered:

 <Grid.RowDefinitions>
    <RowDefinition Height="auto"/>
 </Grid.RowDefinitions>

The complete code should be:

    <Grid RowSpacing="1" ColumnSpacing="2" Padding="5" Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <local:EditorWithAutoSize x:Name="txtMessage" Text="Binding SendingText" />
        <Frame x:Name="SendButton" Grid.Column="1" Margin= "0" Padding="0" HasShadow="false" HeightRequest="25"
    BackgroundColor="Transparent" HorizontalOptions="FillAndExpand">

            <Label Text="Send" x:Name="sendButton" HeightRequest="20"
        HorizontalOptions="Center" VerticalOptions="Center"/>
        </Frame>
     </Grid>

I uploaded my test sample here and you can check it: editor-xamarin.forms

BTW, there is a sample in github that you can refer: ChatUIXForms , you can use the editor and custom renderer code in his project. There are also blogs the author wrote you can read.