Handling keyboard events in xamarin

Forms are the lynchpin of all mobile interactions. It stands in-between the user and what they are looking for. Forms are just a mean to an end, and the user must be able to complete them without any confusion.

The most important UI element which helps us fill a form is the keyboard and it is really important to provide the user with a keyboard which assists them to fill the form without any hassle. To achieve this it's really essential to handle the keyboard events.

The keyboard enter key provides convenience to the user when filling a form.It can either dismiss the keyboard or move the cursor to the next field which needs to be filled .

In this blogs we will be looking at ways to handle keyboard key events in a Xamarin.Forms application. In the sample we have considered the back button action.

For iOS  :

Step 1 : Create a custom entry class and create a delegate to handle the back button press

public class CustomEntry: Entry
{
    public delegate void BackButtonPressEventHandler(object sender, EventArgs e);

    public event BackButtonPressEventHandler OnBackButton;

    public CustomEntry() { }

    public void OnBackButtonPress() 
    {
        if (OnBackButton!= null)
        {
            OnBackButton(null, null);
        }
    }
}

Step 2 :Within the custom renderer namespace , create a custom text field class.

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace Origination.iOS.Renderers
{
    public class CustomTextField: UITextField
    {
    }
}

Step 3: Within the custom text field, create a event and delegate to handle the delete button click.

public class CustomTextField: UITextField
    {
        // A delegate type for hooking up change notifications.
        public delegate void DeleteBackwardKeyEventHandler(object sender, EventArgs e);

        // An event that clients can use to be notified whenever the
        // elements of the list change.
        public event DeleteBackwardKeyEventHandler OnDeleteBackwardKey;


        public void OnDeleteBackwardKeyPressed()
        {
            if (OnDeleteBackwardKey != null)
            {
                OnDeleteBackwardKey(null, null);
            }
        }

        public override void DeleteBackward()
        {
            base.DeleteBackward();
            OnDeleteBackwardKeyPressed();
        }
}

Step 4 :Within the custom renderer name space, Create custom renderer class.

 public class CustomEntryRenderer: EntryRenderer, IUITextFieldDelegate
 {
 }

Step 5:Within the custom renderer's OnElementChanged method create a text field of the custom text field type.

Step 6: Handle the custom text field delete event by passing it to the custom entry back button event handler.

Step 7: Assign the custom text field object to native control.

protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
            {
                if (Element == null) 
                {
                    return;
                }

                var entry = (CustomEntry)Element;
                var textField = new CustomTextField();

               textField.EditingChanged += OnEditingChanged;
                textField.OnDeleteBackwardKey += (sender, a) =>
                {
                    entry.OnBackButtonPress();
                };

                SetNativeControl(textField);

                base.OnElementChanged(e);
            }

Step 8 : Add the editing changed handler

IElementController ElementController => Element as IElementController;

 void OnEditingChanged(object sender, EventArgs eventArgs)
        {
            ElementController.SetValueFromRenderer(Entry.TextProperty, Control.Text);
        }

For Android:

In the custom renderer you can handle the key press event and look for the Keycode.Back.In android customising the text fields are not required.

((EditText)this.Control).KeyPress += (object sender, View.KeyEventArgs even) => { 
        even.Handled = false; 
       if (even.Event.Action == KeyEventActions.Down && even.KeyCode == Keycode.Back) 
       { 
          //your logic here even.Handled = true;
        }