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 rawExtendedEntry.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;
	}
	}
	}

view rawExtendedEntryRenderer.cs hosted with  by GitHub

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.

More