** Update : there is now also a new property ClearText that will show what you entered if needed
Most apps will have some kind of login feature, passing in credentials. Often this will be done with an Entry control set IsPassword to true.
But for a project we are working on, we needed a pin code entry… In other words, let the user see how many digits he has to enter and only allow numeric values.
So something like this:
To accomplish this, we created our own control. It’s a grid that will draw columns for the amount you’ve assigned to the PinLength property and it will add small dots and big dots. The big dots will become visible when the user enters digits.
Some other nice properties, you are able to hook up a Command that will be fired when the user has entered all required digits, this can be used to verify the pin.
The value of the pin is available in through the Input property.
There is also a Reset method to clear the input and redraw all small dots.
Example XAML usage:
|
1 2 3 4 |
<controls:PinEntry x:Name="Pin" PinLength="6" Input="{Binding PinEntry, Mode=TwoWay}}" Command="{Binding ValidatePinCommand}" /> |
For now I’ve only added the iOS implementation, this because there is currently no easy way to auto show the keyboard on Android. But a work around is to draw your own keyboard on screen and hook up the Input property of the Pin control.
All code and sample page can be found on my GitHub here…
Anyhow, hope this can be of any use!
Can you please provide whatever Android implementation you have? As I have tried using this on Android with no luck. The control doesn’t take input. Works fine on iOS
Taha,
Maybe best look for alternatives, never had time to edit the android version.
An example : https://github.com/lassana/XamarinFormsPinView
Thanks for the great control! FYI, changing “IsVisible=false” to “IsVisible=true” and adding “Opacity=0” when instantiating the _pinEntry control results in it working on both iOS and Android.
You could probably also remove the IsVisible declaration. I’m pretty sure its default value is true, however I didn’t test that.
Hope this helps!
I forgot to mention I was also able to remove the height and width request property assignments with opacity set to zero.