Keypad

iOS	Android	UWP

API Reference

IntelliAbb.Xamarin.Controls.Keypad extends Xamarin.Forms.Grid with Xamarin.Forms.Button as keys. It has the following additional bindable properties and events,

Bindable Properties

Property	Description
Mode	Sets the IntelliAbb.Xamarin.Controls.Mode for the keypad. Included modes are Default, Currency, Dialpad, Calculator. Keypad layout can be further customized. Optional Note: Since the Keypad is a Grid, you can add any view as its children at any index.
KeyStyle	Sets the style for each key. Optional
BackspaceText	Set the text for the backspace key. Optional

Usage

XAML

Bring in the namespace,

xmlns:ia="clr-namespace:IntelliAbb.Xamarin.Controls;assembly=IntelliAbb.Xamarin.Controls"

use the control,

<ia:Keypad KeyPressed="Handle_KeyPressed"/>
<ia:Keypad KeyPressed="Handle_KeyPressed" BackspaceText="DEL" />
<ia:Keypad KeyPressed="Handle_KeyPressed" Mode="Currency" KeyStyle="{StaticResource Currency}" />
<ia:Keypad KeyPressed="Handle_KeyPressed" Mode="Dialpad" KeyStyle="{StaticResource Dialpad}" />

C#

var keypad = new Keypad { 
    Mode = Mode.Currency, 
    KeyStyle = (Style)Resources["Currency"], 
    BackspaceText = "DEL" };
keypad.KeyPressed += Handle_KeyPressed;

Style Away

Here are some styles to play with,

Note: Keys are Button types, so you can style the buttons based on that.

<Style x:Key="Currency" TargetType="Button">
    <Setter Property="TextColor" Value="Blue"/>
    <Setter Property="BackgroundColor" Value="#fefefe"/>
    <Setter Property="FontSize" Value="20"/>
</Style>

<Style x:Key="Calculator" TargetType="Button">
    <Setter Property="TextColor" Value="White"/>
    <Setter Property="BackgroundColor" Value="#2e2e2e"/>
    <Setter Property="FontSize" Value="28"/>
    <Setter Property="CornerRadius" Value="10"/>
</Style>

implicit styles work too,

<Style TargetType="Button">
    <Setter Property="TextColor" Value="Red"/>
    <Setter Property="BackgroundColor" Value="Silver"/>
    <Setter Property="FontSize" Value="20"/>
</Style>

How about some circle keys,

<Style x:Key="CircleKeys" TargetType="Button">
    <Setter Property="TextColor" Value="White"/>
    <Setter Property="BackgroundColor" Value="Blue"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="WidthRequest" Value="70"/>
    <Setter Property="HeightRequest" Value="70"/>
    <Setter Property="CornerRadius" Value="35"/>
    <Setter Property="BorderWidth" Value="2"/>
    <Setter Property="HorizontalOptions" Value="Center"/>
    <Setter Property="BorderColor" Value="Blue"/>
</Style>