Редактор идет за клавиатурой, когда он изменяет размер с помощью Wordwrap в Xamarin.Forms (iOS)?

Question

Я продолжаю работу и создаю новый тикет, поскольку он сильно отличается от этой проблемы Как запретить Редактору идти за клавиатурой в Xamarin.Forms?

У меня есть страница чата и редактор авторазмера. Когда пользователь вводит более 1-2 строк, редактор расширяется правильно, но он идет за клавиатурой.

Однако, если пользователь добавляет несколько строк, используя «return», он работает правильно. Я думаю, что мне не хватает чего-то на странице Xaml, чтобы поиграть с Editor и StackLayout.

Пожалуйста, предложите

Обратите внимание, что я не использую Xam.Plugins.Forms.KeyboardOverlap. Чтобы управлять раскладкой на видимости клавиатуры, я использую пользовательскую раскладку стека WrapperStackLayoutRenderer, которая устанавливает нижние отступы при появлении и исчезновении клавиатуры.

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

Вы должны добавить RowDefinition Height="auto" во второй Grid, тогда редактор автоматически сгруппирует введенный вами текст:

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

Полный код должен быть:

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

Я загрузил свой тестовый образец здесь, и вы можете проверить его: editor-xamarin.forms

Кстати, есть пример в github, который вы можете сослаться на: ChatUIXForms , вы можете использовать редактор и пользовательский код рендерера в своем проекте.Есть также блоги автор написал, что вы можете прочитать.