Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

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

Hi,

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

Answers

  • lucornlucorn Member ✭✭
    edited December 2019

    I am using IQKeyboardManager and I still have the issue with the keyboard ending up hiding parts of the Editor when displaying multiple lines.

    The XAML is something like this:

        <Grid RowSpacing="0 Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
    
            <ListView Grid.Row="0" />
    
            <Grid Grid.Row="1" Margin="5,0,5,5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="3" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="70" />
                </Grid.ColumnDefinitions>
    
                <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HeightRequest="2" Color="LightGray" />
    
                <Editor Grid.Row="1" Grid.Column="0" Text="{Binding NewText, Mode=TwoWay}"
                        AutoSize="TextChanges" VerticalOptions="CenterAndExpand" />
    
                <Button Grid.Row="1" Grid.Column="1" Text="Send" Command="{Binding DoSendText}" />
            </Grid>
        </Grid>
    
Sign In or Register to comment.