PINView.MAUI 1.0.3

dotnet add package PINView.MAUI --version 1.0.3                
NuGet\Install-Package PINView.MAUI -Version 1.0.3                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="PINView.MAUI" Version="1.0.3" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add PINView.MAUI --version 1.0.3                
#r "nuget: PINView.MAUI, 1.0.3"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install PINView.MAUI as a Cake Addin
#addin nuget:?package=PINView.MAUI&version=1.0.3

// Install PINView.MAUI as a Cake Tool
#tool nuget:?package=PINView.MAUI&version=1.0.3                

PINView.Maui (.NET Maui UI control)

PINView is .NET Maui cross platform UI control to facilitate UI for mobile PIN (MPIN), OTP or Verification Code entry. This control can be used for Login using PIN, Creting New PIN, Change PIN, Entering secure OTP screens in your mobile application.

alternate text is missing from this package README image

<kbd> <img src="https://github.com/MGohil/PINView.Maui/blob/master/arts/Preview-Graphic.png" width="800"> </kbd>

<br><br> If you are happy using this control and feeling generous, consider buying me a Coffee. 😀

Donate

Nuget Package

NuGet

NuGet Downloads

Platforms Supported

  • iOS
  • MacCatalyst
  • Android
  • Windows

Steps

  1. Search for PINView.Maui nuget package and install it in your .NET Maui project.
  2. In your Page, add reference to this package: xmlns:pinview="clr-namespace:PINView.Maui;assembly=PINView.Maui"
  3. Use the control like below:
<pinview:PINView
    BoxBackgroundColor="#FEDBD0"
    BoxShape="Circle"
    PINLength="5"
    PINValue="{Binding PIN}"
    Color="#442C2E" />

Properties Definitions

Property Type Default Description
AutoDismissKeyboard Boolean False Decides whether to dismiss the keyboard automatically when all characters entered
BoxBackgroundColor Color Transparent Defines the BackgroundColor of each PIN Box
BoxBorderColor Color Color Property Value Defines the Border Color of each PIN Box
BoxCornerRadius double 10.0 Defines the Corner Radius of each PIN box.
BoxFocusAnimation Enum None Animates the Box when it receives the Focus. Enum values [ None, ZoomInOut, ScaleUp ]
BoxFocusColor Color Black Defines the Focus Indicator Border Color when PIN Box is Focused
BoxShape Enum Circle Defines the shape of PIN Box from Enum values [ Square, RoundCorner, Circle ]
BoxSize Double 50 Defines the Width and Height of each PIN Box
BoxSpacing Double 5 Defines the space among each PIN Box
BoxStrokeDashArray DoubleCollection null Sets the Stroke (Border) as Dashed line
BoxStrokeDashOffset double 1.0 Defines the distance within the dash pattern where a dash begins
BoxStrokeThickness double 1.0 Sets the Thickness of Stroke (Border) of each PinBoxes
Color Color Accent Defines the Color of PIN Box (Border and Dot)
DotSize double 20.0 Sets the Dot size of each Dots in PINBoxes
FontAttributes FontAttributes None Sets the FontAttributes of the Char label in each box. Applicable when IsPassword = False
FontFamily string System Font Sets the FontFamily of the Char label in each box. Applicable when IsPassword = False
FontSize double 20.0 Sets the Font size of each char Label in PinBoxes
IsPassword Boolean False Defines whether to show actual input character or hide / secure via Dot
PINInputType Enum Numeric Defines the Input Type from Enum [ Numeric, AlphaNumeric, AlphaNumericUppercase ]
PINLength Integer 4 Defines the Length (No. of Characters) of the PIN
PINValue String Empty Bind this to string Property in your ViewModel, to get value of the Entered PIN

Commands / Events Definitions

Command / Event Type Description
PINEntryCompletedCommand Command A Bindable Command, which gets invoked on completion of the PIN entry (All characters are entered) You can execute your code through this command
PINEntryCompleted Event Invokes on completion of the PIN entry (when all characters are entered).

Accessibility

Property Type Default Description
AutomationId string null This control uses Hidden Entry behind the scene to hold PIN input value. To work with Automation, you have to set AutomationId of this PINView control, and it will internally set the AutomationId of this hidden Entry. If you set AutomationId of PINView control as 'ConfirmPIN' then AutomationId of hidden Entry will be 'ConfirmPIN_PINView_Entry'. You can get the hidden Entry's AutomationId using HiddenEntryAutomationId property.
Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-android34.0 is compatible.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-ios18.0 is compatible.  net8.0-maccatalyst was computed.  net8.0-maccatalyst18.0 is compatible.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net8.0-windows10.0.19041 is compatible. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • net8.0

    • No dependencies.
  • net8.0-android34.0

    • No dependencies.
  • net8.0-ios18.0

    • No dependencies.
  • net8.0-maccatalyst18.0

    • No dependencies.
  • net8.0-windows10.0.19041

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories (2)

Showing the top 2 popular GitHub repositories that depend on PINView.MAUI:

Repository Stars
simpleidserver/SimpleIdServer
OpenID, OAuth 2.0, SCIM2.0, UMA2.0, FAPI, CIBA & OPENBANKING Framework for ASP.NET Core
exendahal/ecommerce_maui
E-commerce design using .NET MAUI (.NET 8)
Version Downloads Last updated
1.0.3 97 12/28/2024
1.0.2 5,813 7/7/2024
1.0.1 7,569 7/8/2023
1.0.0 1,478 10/30/2022