How to place controls (Entry and images) on custom keypad ?

Sudheer_469 · February 23

I want to show some options on the top of the keyboard can you please give me a suggestions about this i am unable to find any reference please find below image.

jezh · February 24

For this, you can try to position the control's UI over the keyboard.

Please refer to the following code:

1.Create your UI in XAML using Grid

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:KeyboardOptionsSample" 
             x:Class="KeyboardOptionsSample.MainPage" 
             xmlns:controls="clr-namespace:KeyboardOptionsSample;assembly=KeyboardOptionsSample">
    <controls:KeyboardView VerticalOptions="FillAndExpand"
                           Padding="0,25,0,0"
                           x:Name="mainLayout">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="60"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="60"/>
                <RowDefinition Height="120"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

               <Image Source="ic_send"
                      Margin="0,0,20,0"
                      HorizontalOptions="EndAndExpand"
                      HeightRequest="30"
                      WidthRequest="30"
                      Grid.Row="0"
                      Grid.Column="2">
                     <Image.Triggers>
                            <DataTrigger TargetType="Image"
                                         Binding="{Binding Source={x:Reference editor},
                                                           Path=Text.Length}"
                                         Value="0">
                                <Setter Property="Opacity" Value="0.5" />
                                <Setter Property="IsEnabled" Value="False" />
                            </DataTrigger>
                        </Image.Triggers>
            </Image>

            <Label Text="To:" 
                   FontSize="17"
                   FontAttributes="Bold"
                   VerticalOptions="Center"
                   TextColor="Gray"
                   Grid.Column="0"
                   Grid.Row="1"
                   Margin="20,0,0,0"/>

             <Label Text="Rendy Del Rosario"
                    FontSize="17"
                    VerticalOptions="Center"
                    Grid.Column="1"
                    Grid.Row="1" 
                    Grid.ColumnSpan="2"/>

            <controls:ExtendedEditor Placeholder="Enter Message"
                                     PlaceholderColor="LightGray"
                                     Grid.Column="0"
                                     Grid.Row="2" 
                                     Grid.ColumnSpan="3"
                                     x:Name="editor" 
                                     HeightRequest="120"
                                     Margin="20,0"
                                     Text=""/>

           <Image HorizontalOptions="Start"
                  VerticalOptions="Start"
                  Aspect="AspectFill"
                  HeightRequest="150"
                  WidthRequest="150"
                  x:Name="imageView" 
                  Grid.Column="0"
                  Grid.Row="3" 
                  Grid.ColumnSpan="2"
                  Margin="20,0"/>


        <!--Layout placed over the keyboard-->
            <StackLayout x:Name="layout" 
                               Grid.Column="0"
                               Grid.Row="4" 
                               Grid.ColumnSpan="3"
                               Spacing="0" 
                               Padding="0"
                               BackgroundColor="White">

                       <BoxView Color="LightGray" 
                                HorizontalOptions="FillAndExpand" 
                                HeightRequest="1"/>

                       <StackLayout Orientation="Horizontal" 
                                    MinimumHeightRequest="35"
                                    Margin="0,10"  
                                    BackgroundColor="White"
                                    VerticalOptions="EndAndExpand">
                         <Image WidthRequest="25" 
                                Margin="20,0,0,0"
                                Source="ic_gallery">
                               <Image.GestureRecognizers>
                                    <TapGestureRecognizer
                                        Tapped="OnAttachMedia"/>
                             </Image.GestureRecognizers>
                         </Image>
                         <Label Text="Attach Media"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="Center"
                                FontAttributes="Bold"
                                FontSize="16"
                                TextColor="Gray">
                               <Label.GestureRecognizers>
                                <TapGestureRecognizer
                                             Tapped="OnAttachMedia"/>
                            </Label.GestureRecognizers>
                         </Label>

                          <Image WidthRequest="25" 
                                 HorizontalOptions="End"
                                 Source="ic_camera">
                               <Image.GestureRecognizers>
                                    <TapGestureRecognizer
                                        Tapped="OnTakePhoto" />
                             </Image.GestureRecognizers>
                         </Image>
                         <Label Text="Take Photo"
                                Margin="0,0,20,0"
                                VerticalOptions="Center"
                                FontAttributes="Bold"
                                FontSize="16"
                                TextColor="Gray">
                              <Label.GestureRecognizers>
                                <TapGestureRecognizer
                                            Tapped="OnTakePhoto" />
                             </Label.GestureRecognizers>
                         </Label>
                </StackLayout>
           </StackLayout>
          </controls:KeyboardView>
</ContentPage>

2.MainPage.xaml.cs

 public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
        protected async override void OnAppearing()
        {
            base.OnAppearing();
            editor.Focus();
        }
}

3.Create an extended Entry Renderer to raise the keyboard on iOS

[assembly: ExportRenderer(typeof(KeyboardView), typeof(KeyboardViewRenderer))]
namespace KeyboardOptionsSample.iOS
{
    public class KeyboardViewRenderer : ViewRenderer
    {
        NSObject _keyboardShowObserver;
        NSObject _keyboardHideObserver;
        protected override void OnElementChanged(ElementChangedEventArgs<View> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                RegisterForKeyboardNotifications();
            }

            if (e.OldElement != null)
            {
                UnregisterForKeyboardNotifications();
            }
        }

        void RegisterForKeyboardNotifications()
        {
            if (_keyboardShowObserver == null)
                _keyboardShowObserver = UIKeyboard.Notifications.ObserveWillShow(OnKeyboardShow);
            if (_keyboardHideObserver == null)
                _keyboardHideObserver = UIKeyboard.Notifications.ObserveWillHide(OnKeyboardHide);
        }

        void OnKeyboardShow(object sender, UIKeyboardEventArgs args)
        {

            NSValue result = (NSValue)args.Notification.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey));
            CGSize keyboardSize = result.RectangleFValue.Size;
            if (Element != null)
            {
                Element.Margin = new Thickness(0, 0, 0, keyboardSize.Height); //push the entry up to keyboard height when keyboard is activated

            }
        }

        void OnKeyboardHide(object sender, UIKeyboardEventArgs args)
        {
            if (Element != null)
            {
                Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
            }

        }


        void UnregisterForKeyboardNotifications()
        {
            if (_keyboardShowObserver != null)
            {
                _keyboardShowObserver.Dispose();
                _keyboardShowObserver = null;
            }

            if (_keyboardHideObserver != null)
            {
                _keyboardHideObserver.Dispose();
                _keyboardHideObserver = null;
            }
        }
    }
}

4.Add platform specific WindowSoftInputModeAdjust to App.xaml file with Resize value In android platform.

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="KeyboardOptionsSample.App"
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
             android:Application.WindowSoftInputModeAdjust="Resize">
    <Application.Resources>
    </Application.Resources>
</Application>

The result is:

Refer : https://www.xamboy.com/2019/02/05/showing-keyboard-options-in-xamarin-forms/

Xamarin forums are migrating to a new home on Microsoft Q&A!
We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
For more information, please refer to this sticky post.

Xamarin

Quick Links

How to place controls (Entry and images) on custom keypad ?

Answers