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
            }
        });
    }
}

Jack Hua Jack Hua · Accepted Answer · 2019-06-13T03:19:09

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.

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

1 Answers