Numeric keyboard with "Done" button on iOS Xamarin.Forms

‘Done’ button on Numeric keyboard on iOS is a very popular clients request, but it does not appear out of the box. Luckily the solution is very easy (as usual), all we have to do is to extend ‘Entry’ control and to add a custom renderer:
 
using Xamarin.Forms;
namespace YourNamespace.Controls
{
public class ExtendedEntry : Entry { }
}
view raw ExtendedEntry.cs hosted with ❤ by GitHub
/*
Based on example from: https://forums.xamarin.com/discussion/18346/add-done-button-to-keyboard-on-ios
*/
using System.Drawing;
using YourNamespace.Controls;
using YourNamespace.iOS.Renderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(ExtendedEntry), typeof(ExtendedEntryRenderer))]
namespace YourNamespace.iOS.Renderers
{
public class ExtendedEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Element == null)
return;
// Check only for Numeric keyboard
if (this.Element.Keyboard == Keyboard.Numeric)
this.AddDoneButton();
}
/// <summary>
/// <para>Add toolbar with Done button</para>
/// </summary>
protected void AddDoneButton()
{
var toolbar = new UIToolbar(new RectangleF(0.0f, 0.0f, 50.0f, 44.0f));
var doneButton = new UIBarButtonItem(UIBarButtonSystemItem.Done, delegate
{
this.Control.ResignFirstResponder();
var baseEntry = this.Element.GetType();
((IEntryController)Element).SendCompleted();
});
toolbar.Items = new UIBarButtonItem[] {
new UIBarButtonItem (UIBarButtonSystemItem.FlexibleSpace),
doneButton
};
this.Control.InputAccessoryView = toolbar;
}
}
}
As you can see all the ‘magic’ is happing in AddDoneButton() method. We create a toolbar and add a ‘Done’ UIBarButtonItem which will hide the keyboard and send a ‘Completed’ event back.
The solution is based on this thread and available as a gist on github.

One thought on “Numeric keyboard with "Done" button on iOS Xamarin.Forms

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s