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 solution on the web I created my very own one using MrGestures for the multi platform gesture support. By the way, MrGestures provides a broad range of gestures to handle in your Xamarin.Forms app (for EUR 10 + VAT per APP).

You find the whole source code of my GesturePatternView Version 1 on GitHub. For now the touched gesture points only get a highlight TextColor. There’s no line beeing drawn from point to point or any other animation.


The GesturePatternView

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


Of course you can change both the background and foreground 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.
  • TouchPointFontFamily = The touch point font (Default = FontAwesome).
  • TouchPointText = The touch point text used to draw the touch points on the UI.
  • TouchPointHighlightText = The touch points text to use for touched touch points.
  • TouchPointTextColor = The text color to use for untouched touch points.
  • TouchPointHightlightTextColor = The text color to use for touched touch points.


How to use the GesturePatternView in your APP:

  1. Purchase a MrGestures licence or use the test licence (your APP name must be „GestureSample“ to make this work).
  2. Add the MrGestures NuGet package to your portable and platform projects.
  3. Add the required MrGestures code to the platform projects.
  4. Add the GesturePatternView control to your view.

By default the GesturePatternView uses FontAwesome for the touch points. Feel free to use your favorite icon font but make sure you adjust the platform renderers.

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/XamarinFormsSamples



  1. Apenrpatly this is what the esteemed Willis was talkin‘ ‚bout.

Schreibe einen Kommentar

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