Xamarin.Forms which is included in the 3.1.0 version of the ReturnType property for the Entry control, offers us a lot of different options and opportunities, which we can learn more about in this post. Xamarin.Forms presents a complete multiplatform user interface toolkit for .NET developers.

This property, for example, helps us to define the type of button that will appear on the mobile keyboard when we focus on the entry. Offering the following possibilities:

Therefore, if we apply the Search option to an Entry, we will be left with the following result in iOS:

 

 

 

 

 

 

And Android:

 

 

 

 

 

 

 

Although this offers many advantages to us, in our opinion, two things are missing.

So, whats missing?

  • When we are in a form, the focus automatically changes to the next Entry when the Next button is pressed on the keyboard.
  • If this is also the last Entry to the form (whose case the button would have ReturnType = “Done”), the form’s save command can be executed when the keyboard button is pressed.

In todays blog post, we will see how to add this functionality to an Entry by developing a custom control with its corresponding iOS and Android Renderers.

We will start by creating our CustomControl and adding a BindableProperty called NextEntryName, which we will use to indicate the next Entry with to which the focus should move to when the user presses the Next button on the keyboard:

In addition, we will create an event, with a method to invoke it from the renderers of iOS and Android later on, as well as the implementation of the event:

In the implementation, check the type of button that the Entry has. If this is of type ReturnType.Done, then it will execute the command of the Entry ReturnCommand. We do not need this for iOS, since the command is executed as soon as the Completed event is reached. However, Android does not do the same, so we will have to add the following lines:

If it is of type ReturnType.Next, then it will focus on the next Entry obtaining it through our property NextEntryName.

With this, we have our control ready.

 On to our next step! 

Let’s now develop the Renderer for iOS. Here we simply need to subscribe to the ShouldReturn event that is invoked when the user presses the button on the keyboard.

It consists of exactly the same in Android Renderer:

And finally!

We only need to use it in our view:

With x: Name we assign a name to our Entry, which will be assigned to the NextEntryName property of the previous Entry. With that name, our control will be able to locate it and focus on it. And at the last Entry we will assign the command to execute in the ReturnCommand property.

And with this, we will have our control ready to use in our developments! Success!

Want to know more? 

Intrigued? Take a look at our other mobile based blog posts right here.