PIN keyboard for Xamarin.Forms

October 8, 2018 · View on GitHub

Usage

Add the following NuGet package: https://www.nuget.org/packages/FormsPinView/

OR

add FormsPinView.Core, FormsPinView.iOS, and FormsPinView.Droid to your solution.

Initialize iOS and Android renderers:

 // iOS:
 public override bool FinishedLaunching(UIApplication app, NSDictionary options)
 {
     ...
     global::Xamarin.Forms.Forms.Init();
     PinItemViewRenderer.Init();
 }
 
 // Android:
 protected override void OnCreate(Bundle bundle)
 {
     ...
     global::Xamarin.Forms.Forms.Init(this, bundle);
     PinItemViewRenderer.Init();
 }

Add PinView to your page:

 ...
 xmlns:local="clr-namespace:FormsPinView.Core;assembly=FormsPinView.Core"
 ...
     <local:PinView
         HorizontalOptions="CenterAndExpand"
         VerticalOptions="CenterAndExpand"
         TargetPinLength="4"
         Validator="{Binding ValidatorFunc}"
         Success="Handle_Success" />

PinView is MVVM-ready, so you can bind the following properties:

Property	Type	Description	Default	Required
`Validator`	`Func<IList<char>, bool>`	Function to check entered PIN	`null`	Yes
`PinLength`	`int`	The PIN length	4	No
`SuccessCommand`	`ICommand`	Invoked when the correct PIN is entered	`null`	No
`ErrorCommand`	`ICommand`	Invoked when an incorrect PIN is entered	`null`	No
`ClearAfterSuccess`	`bool`	Indicates whether the entered PIN should be cleaned or not after it was confirmed as correct	true	No
`BorderColor`	`Color`	View tint color.	Gray	No
`Color`	`Color`	View basic color.	Black	No
`RippleColor`	`Color`	View touch-effect color.	Gray	No