Skip to content

FreakyPinCodeControl

Jump to bottom
Gulam Ali H edited this page May 24, 2024 · 3 revisions

FreakyPinCodeControl

Public Properties

CodeValue

  • Description: Gets or sets the current code entered in the control.
  • Type: string
  • Default Value: string.Empty
  • Binding Mode: TwoWay

CodeLength

  • Description: Gets or sets the length of the code to be entered.
  • Type: int
  • Default Value: CodeView.DefaultCodeLength
  • Binding Mode: OneWay

CodeEntryCompletedCommand

  • Description: Gets or sets the command to be executed when code entry is completed.
  • Type: ICommand
  • Default Value: null
  • Binding Mode: OneWay

IsPassword

  • Description: Gets or sets a value indicating whether the code entry should be masked.
  • Type: bool
  • Default Value: true
  • Binding Mode: OneWay

Color

  • Description: Gets or sets the color of the code entry text.
  • Type: Color
  • Default Value: Colors.Black
  • Binding Mode: OneWay

ItemSpacing

  • Description: Gets or sets the spacing between code entry items.
  • Type: double
  • Default Value: CodeView.DefaultItemSpacing
  • Binding Mode: OneWay

ItemSize

  • Description: Gets or sets the size of each code entry item.
  • Type: double
  • Default Value: CodeView.DefaultItemSize
  • Binding Mode: OneWay

ItemShape

  • Description: Gets or sets the shape of the code entry items.
  • Type: ItemShape
  • Default Value: ItemShape.Circle
  • Binding Mode: OneWay

ItemFocusColor

  • Description: Gets or sets the color of the focused code entry item.
  • Type: Color
  • Default Value: Colors.Black
  • Binding Mode: OneWay

ItemFocusAnimation

  • Description: Gets or sets the animation for the focused code entry item.
  • Type: FocusAnimation
  • Default Value: default(FocusAnimation)
  • Binding Mode: OneWay

ItemBorderColor

  • Description: Gets or sets the border color of the code entry items.
  • Type: Color
  • Default Value: Colors.Black
  • Binding Mode: OneWay

ItemBackgroundColor

  • Description: Gets or sets the background color of the code entry items.
  • Type: Color
  • Default Value: default(Color)
  • Binding Mode: OneWay

ItemBorderWidth

  • Description: Gets or sets the border width of the code entry items.
  • Type: double
  • Default Value: 5.0
  • Binding Mode: OneWay

FontSize

  • Description: Gets or sets the font size of the code entry text.
  • Type: double
  • Default Value: FreakyCodeView.FontSizeProperty.DefaultValue
  • Binding Mode: OneWay

FontFamily

  • Description: Gets or sets the font family of the code entry text.
  • Type: string

BackspaceButtonSource

  • Description: Gets or sets the source of the backspace button image.
  • Type: ImageSource

KeyboardBackgroundColor

  • Description: Gets or sets the background color of the numeric keypad.
  • Type: Color
  • Default Value: Colors.White

CancelBackgroundColor

  • Description: Gets or sets the background color of the cancel button.
  • Type: Color
  • Default Value: Colors.White

BackspaceBackgroundColor

  • Description: Gets or sets the background color of the backspace button.
  • Type: Color
  • Default Value: Colors.White

KeyboardTextColor

  • Description: Gets or sets the text color of the numeric keypad buttons.
  • Type: Color
  • Default Value: Colors.Black

KeyboardButtonSizeRequest (Deprecated)

  • Description: Gets or sets the size request of the numeric keypad buttons. (Deprecated; use KeyboardButtonHeightRequest and KeyboardButtonWidthRequest instead)
  • Type: double
  • Default Value: 100.0

KeyboardButtonHeightRequest

  • Description: Gets or sets the height request of the numeric keypad buttons.
  • Type: double

KeyboardButtonWidthRequest

  • Description: Gets or sets the width request of the numeric keypad buttons.
  • Type: double

KeyboardButtonCornerRadius

  • Description: Gets or sets the corner radius of the numeric keypad buttons.
  • Type: int
  • Default Value: 10

CancelButtonPadding

  • Description: Gets or sets the padding of the cancel button.
  • Type: Thickness
  • Default Value: new Thickness(20)

CancelButtonText

  • Description: Gets or sets the text of the cancel button.
  • Type: string
  • Default Value: "Cancel"

KeyboardSpacing

  • Description: Gets or sets the spacing between numeric keypad buttons.
  • Type: double
  • Default Value: 10.0

Public Events

CodeEntryCompleted

  • Description: Event raised when code entry is completed.
  • Type: EventHandler<FreakyCodeCompletedEventArgs>

KeyboardClicked

  • Description: Event raised when a numeric keypad button is clicked.
  • Type: EventHandler<FreakySelectedPinEventArgs>

CancelClicked

  • Description: Event raised when the cancel button is clicked.
  • Type: EventHandler<EventArgs>

BackSpaceClicked

  • Description: Event raised when the backspace button is clicked.
  • Type: EventHandler<EventArgs>

Remarks

  • The FreakyPinCodeControl provides a highly customizable PIN code entry experience, allowing you to configure various aspects such as appearance, behavior, and event handling.

  • You can specify the number of code digits, and input type, and customize the appearance of the code entry items.

  • The control also supports events, such as CodeEntryCompleted, which is triggered when the user completes the code entry.

  • Customize the appearance of the virtual keyboard and buttons with properties like KeyboardBackgroundColor, KeyboardButtonSizeRequest, and more.

  • Use event handlers like Keyboard_Clicked to update the code value when virtual keyboard buttons are pressed.

  • The CancelButtonPadding property defines the padding for the cancel button (if used), providing additional customization.

Example

// Create a FreakyPinCodeControl instance
var pinCodeControl = new FreakyPinCodeControl
{
    CodeLength = 4,
    CodeInputType = KeyboardType.Numeric,
    CodeEntryCompletedCommand = new Command(() => HandleCodeEntryCompleted()),
    BackspaceButtonSource = ImageSource.FromFile("backspace.png"),
    // Customize other properties as needed
};

// Handle the CodeEntryCompleted event
pinCodeControl.CodeEntryCompleted += (sender, e) =>
{
    var enteredCode = e.Code;
    // Handle the completed PIN code entry
};

// Add pinCodeControl to your MAUI layout
Clone this wiki locally