xamarin forms numeric entry

xamarin forms numeric entry

Hi everyone, here is the second part of my Xamarin Tips series. Just as a reminder. The posts I’ll make for this series will have as case study a simple app. It will be about how I used features available in Xamarin Forms to produce unique UI for the app.

The app’s name is : My Expenditures. It is available on Play store and Microsoft store. It provides you a smart way to manage you expenses and income. And very detailed stats about how you spend or make money. You can download and use it. You will also find in the app all the features I talk about here. Let’s not waste time and dive into the numeric entry recipes.

Xamarin Forms Numeric Entry Recipes

What we will be doing here is adding a feature to an entry which will make it take only numbers. And we will also add a feature to precise the range of numbers which should be input in our numeric entry.

Numbers only

The first step will be to make our entry accept only numbers. We will implement this with Behaviors, though it could also be done using triggers. Lets create a class with the name PlainNumericEntryBehavior

  • First, set your entry to use a numeric keyboard. This is essential first before adding additional code.

  • When we attach the behavior, subscribe to the TextChanged Event.

  • In the method to handle this event, if the new text entered is null or empty, we wet the entry’s value to 0. Else, we check if the new value is a number. If it is, we do nothing. If it is not, we make the entry’s text to be = old text.

Limiting the value of the numbers entered

In case you have an entry in which you want users to enter numbers which are not above a specific value. For example, entering percentage or age. To perform this, we will leverage the first behavior we created above.

  • Add a property to the first behavior. This property will be an Action.

  •  Create a new behavior which inherits from the previous one.
  •  In the PlainNumericEntryBehavior the method to handle text changes, modify it to be as shown below.

  • Add a maximum value property to the new behavior. This value could be set in XAML or directly in the behavior with a default value
  • Define the AdditionalCheck action. This will check if the new value of the entry is greater the desired maximum value, and perform the appropriate action.

Here is the complete code for the first behavior :

The code for the second behavior is shown below.

Uisng it in your xaml code is easy, you can do it as follows

Conclusion

In case you wanted to restrict user input to numbers only, and to particular amounts precisely, there you have the code for it. As I mentioned above, this is part of the simple app I built. You can download and use it, and you will find the implemented features on it. Play store and Microsoft store. Open Directly on the store app available on your windows 10 device.

If this post was useful to you, follow me on Twitter,  Github, Linkedinor like my Facebook page to stay updated.

Follow me on social media and stay updated Follow me on social media and stay updated
%d bloggers like this: