Xamarin Forms: Spacing issue between keyboard and the bottom layout in chat page

Question

I am using a CustomEditorRenderer to solve the spacing issue between keyboard and Editor. I already posted a ticket related to that. Now I have attachment and send icons are in the same place. But when the keyboard appears, only Editor is showing on the UI, the attachment and send icons are not showing.

UI:

My XAML:

<Grid 
x:Name="newcomment_stack"
Margin="2,0,2,10"
IsVisible="false">

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

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="8*" />
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<Image 
Grid.Row="0" 
Grid.Column="0"
VerticalOptions="CenterAndExpand"
x:Name="Attachment_Image"
Source="ic_attachment_xx.png">
    <Image.WidthRequest>
        <OnIdiom x:TypeArguments="x:Double">
            <OnIdiom.Phone>40</OnIdiom.Phone>
            <OnIdiom.Tablet>60</OnIdiom.Tablet>
            <OnIdiom.Desktop>40</OnIdiom.Desktop>
        </OnIdiom>
    </Image.WidthRequest>
    <Image.HeightRequest>
        <OnIdiom x:TypeArguments="x:Double">
            <OnIdiom.Phone>40</OnIdiom.Phone>
            <OnIdiom.Tablet>60</OnIdiom.Tablet>
            <OnIdiom.Desktop>40</OnIdiom.Desktop>
        </OnIdiom>
    </Image.HeightRequest>
</Image>

<renderer:CustomEditor
    Grid.Row="0" 
    Grid.Column="1"
    x:Name="commentbody_entry"
    Placeholder="Add your comment here"
    BackgroundColor="#f1f1f1"
    PlaceholderColor = "#a39ea1"
    TextColor = "#54493b"
    TextChanged="commentbody_entry_TextChanged"
    Style="{StaticResource AddCommentEditorStyle}">
    <renderer:CustomEditor.HeightRequest>
        <OnIdiom x:TypeArguments="x:Double">
            <OnIdiom.Phone>60</OnIdiom.Phone>
            <OnIdiom.Tablet>90</OnIdiom.Tablet>
            <OnIdiom.Desktop>60</OnIdiom.Desktop>
        </OnIdiom>
    </renderer:CustomEditor.HeightRequest>
</renderer:CustomEditor>

<StackLayout 
    x:Name="sendcomment_stack"
    IsEnabled="False"
    VerticalOptions="CenterAndExpand"
    Grid.Row="0" 
    Grid.Column="2">
    <Image 
        x:Name="sendcomment_image"
        Source="ic_gray_sendcomment_xx.png">
        <Image.WidthRequest>
            <OnIdiom x:TypeArguments="x:Double">
                <OnIdiom.Phone>40</OnIdiom.Phone>
                <OnIdiom.Tablet>60</OnIdiom.Tablet>
                <OnIdiom.Desktop>40</OnIdiom.Desktop>
            </OnIdiom>
        </Image.WidthRequest>
        <Image.HeightRequest>
            <OnIdiom x:TypeArguments="x:Double">
                <OnIdiom.Phone>40</OnIdiom.Phone>
                <OnIdiom.Tablet>60</OnIdiom.Tablet>
                <OnIdiom.Desktop>40</OnIdiom.Desktop>
            </OnIdiom>
        </Image.HeightRequest>
    </Image>
    <StackLayout.GestureRecognizers>
        <TapGestureRecognizer
            Tapped="Send_Comment"
            NumberOfTapsRequired="1">
        </TapGestureRecognizer>
    </StackLayout.GestureRecognizers>
</StackLayout>
</Grid>

My CustomEditorRenderer in IOS:

public class CustomEditorRenderer : EditorRenderer
{
    public CustomEditorRenderer()
    {
        UIKeyboard.Notifications.ObserveWillShow((sender, args) =>
        {
            if (Element != null)
            {
                Element.Margin = new Thickness(0, 0, 0, args.FrameEnd.Height); //push the entry up to keyboard height when keyboard is activated
            }
        });

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

    protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            Control.Layer.CornerRadius = 10;
            Control.TextColor = UIColor.Black;
        }
    }
}

Is there any way to pull up the send and attachment icons when the keyboard appears?

Answer 1

When you use Grid, the layout will not move up when you open the keyboard. You just need to put your Grid in the ScrollView of ContentPage. If you use ScrollView, you need to note that the ObserveWillShow and ObserveWillHide methods in your CustomEditorRenderer are not needed.

Like this:

 <ScrollView>
      <StackLayout>
            <Grid Margin="20,600,20,20">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

 
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

               <Image Grid.Row="0"
               Grid.Column="0"
               VerticalOptions="CenterAndExpand"
               Source="Test.png">
               </Image>

               <Editor
                 WidthRequest="100"
                 Grid.Row="0"
                 Grid.Column="1"
                 Placeholder="test"
                 BackgroundColor="#f1f1f1"
                 PlaceholderColor = "#a39ea1"
                 TextColor = "#54493b"/>
               
               <Image Grid.Row="0"
               Grid.Column="2"
               VerticalOptions="CenterAndExpand"
               Source="Test.png">
               </Image>
             </Grid>
          </StackLayout>
        </ScrollView>