Home

Awesome

PIN keyboard for Xamarin.Forms

<pre><code><img src="ios.mov.gif" height="auto" width="220px"> <img src="android.mov.gif" height="auto" width="220px"></code></pre>

Usage

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

    OR

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

  2. 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();
 }

  3. 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" />

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

PropertyTypeDescriptionDefaultRequired
ValidatorFunc<IList<char>, bool>Function to check entered PINnullYes
PinLengthintThe PIN length4No
SuccessCommandICommandInvoked when the correct PIN is enterednullNo
ErrorCommandICommandInvoked when an incorrect PIN is enterednullNo
ClearAfterSuccessboolIndicates whether the entered PIN should be cleaned or not after it was confirmed as correcttrueNo
BorderColorColorView tint color.GrayNo
ColorColorView basic color.BlackNo
RippleColorColorView touch-effect color.GrayNo

TODO

Changelog

2.1.0-pre1

2.0.0

2.0.0-pre1

1.1.1

1.1.1-pre1

1.1.0

1.0.1

1.0.0

License

BSD 2-Clause.