Xamarin.Forms Gesture-Pattern-Login

Currently I’m working on an APP for one of my customers where we need the opportunity to sign in using a gesture-pattern. Since I was not able to find an existing Xamarin.Forms solution to serve all platforms on the web I created my very own one.

You find the whole source code of my Xamarin.Forms GesturePatternView on GitHub. From a design perspective it’s quite Android-like.

 

The GesturePatternView

Here’s how the GesturePatternView looks like on UWP (it also works on iOS and Android too):

GesturePatternView

Of course you can change the background, foreground and all the line and circle colors to adjust your needs.

Each gesture touch point represents a numeric value from 1 to N (depends on the number of created touch points). Feel free to extend it with your value provider.

The GesturePatternView provides the following (bindable) properties:

  • HorizontalTouchPoints = The number of horizontal touch points to create.
  • VerticalTouchPoints = The number of vertical touch points to create.
  • GesturePatternValue = The total value of the touched touch points.
  • TouchPointColor = The color to use for untouched touch points.
  • TouchPointHightlightTextColor = The color to use for touched touch points.
  • LineDrawingColor = The color to use for a drawing line.
  • LineDrawnColorProperty = The color to use for a drawn line.
  • Vibrate = Vibrate when touching a touch point.

 

How to use the GesturePatternView in your APP:

  1. Copy the GesturePatternView class and the GestureTouchPoint class to your project.
  2. Add the required NuGet packages: SkiaSharp.Views.Forms, Xam.Plugin.Vibrate
  3. Add the GesturePatternView control to your view.

To get the pattern value you can bind the property GesturePatternView.GesturePatternValue to your view model or use the event GesturePatternView.GesturePatternCompleted.

 

Find code and sample on GitHub: https://github.com/faulandcc/GesturePatternViewXF

Share

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*