Forum Xamarin.Forms

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

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.

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    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.

Sign In or Register to comment.