Siticone Credit Card UI
The SiticoneCreditCardUI is a visually stunning, high-fidelity control designed to simulate a real physical credit card.
It features 3D flip animations (front/back), glassmorphism effects, embedded EMV chips, magnetic stripes, and a comprehensive validation state system (Error, Warning, Danger) to provide immediate visual feedback during data entry.
Core Data & Input
Properties for binding the card's textual data. Updates to these properties are rendered in real-time.
| Property | Type | Description & Usage Example |
|---|---|---|
CardNumber |
string | card.CardNumber = "4532 1234 5678 9010"; The main 16-digit card number displayed prominently on the front. |
CardholderName |
string | card.CardholderName = "JANE DOE"; The name of the card owner. Typically displayed in uppercase. |
ExpirationDate |
string | card.ExpirationDate = "12/28"; The expiry date (MM/YY) shown on the front. |
CVV |
string | card.CVV = "123"; The 3 or 4 digit security code displayed on the back of the card within the signature strip. |
Type |
CreditCardType |
card.Type = SiticoneCreditCardType.Visa;
Determines the logo displayed (Visa, MasterCard, Amex, etc.). Set to Generic if unknown.
|
Visual Styling
Customize the aesthetic feel of the card, including gradients, glass effects, and logos.
| Property | Type | Description |
|---|---|---|
CardStartColor |
Color | The starting color for the background gradient. |
CardEndColor |
Color | The ending color for the background gradient. |
GradientMode |
LinearGradientMode | The direction of the background gradient (e.g., ForwardDiagonal). |
ShowGlassEffect |
bool | Overlays a semi-transparent glossy highlight to simulate plastic/glass material. |
ShowReflection |
bool | Adds a subtle horizon reflection line for added depth. |
ShowCardChip |
bool | Toggles the rendering of the gold EMV chip on the front. |
CornerRadius |
int | Controls the roundness of the card corners (default: 14). |
UltraHighPerformance |
bool | Disables complex effects (gradients, glass, shadows) for maximum rendering speed. |
State & Validation
The card includes built-in states for validating user input visually.
| State | Method | Visual Effect |
|---|---|---|
| Error | TriggerError(msg) |
Flashes a red overlay and displays the error message. Used for critical validation failures (e.g., invalid checksum). |
| Warning | TriggerWarning(ms, msg) |
Fades in an orange overlay. Useful for non-critical alerts (e.g., card expiring soon). |
| Danger | TriggerDanger(ms, msg) |
Fades in a solid red overlay. Useful for serious alerts (e.g., stolen card reported). |
| Inactive | IsActive = false |
Darkens the entire card and overlays customizable "INACTIVE" text. |
Animation & Interaction
Dynamic behaviors that bring the card to life.
| Feature | Property/Method | Description |
|---|---|---|
| Flip 3D | FlipCard() |
Triggers a 3D rotation animation to reveal the back (CVV/Signature) or front.
Controlled via the View property (Front/Back).
|
| Color Cycle | CycleColors |
Automatically transitions the card background through a list of colors defined in ColorCollection.
Adjust speed with ColorCycleSpeed.
|
| Shake | CanShake |
If enabled, the card shakes horizontally when a user attempts to interact with it while IsReadOnly is true.
|
Layout & Positioning
Granular control over where elements appear on the card face using percentage-based positioning.
| Property | Description |
|---|---|
CardNumberPositionY |
Vertical position of the card number (0.0 to 1.0). Default ~0.5 (Center). |
CardInfoPositionY |
Vertical position of the Name/Exp/Labels row. Default ~0.72. |
NamePositionPercent |
Horizontal start position of the Name field. Default 0.0 (Left). |
ExpDatePositionPercent |
Horizontal start position of the Expiration Date. Default ~0.6. |
CVVPositionPercent |
Horizontal start position of the CVV label (on front, if applicable). Default ~0.85. |
Public Methods
// Flips the card from Front to Back or vice-versa.
// Useful when the user focuses the CVV input field.
creditCard1.FlipCard(true);
// Triggers a flashing red error state with a message overlay.
// Used when validation fails (e.g., Luhn algorithm check).
creditCard1.TriggerError("Invalid Card Number");
// Manually add colors to the animation cycle
creditCard1.ClearCycleColors();
creditCard1.AddCycleColor(Color.Blue);
creditCard1.AddCycleColor(Color.Purple);
creditCard1.AddCycleColor(Color.Red);
creditCard1.CycleColors = true;
Events
Comprehensive event system for tracking changes.
CardNumberChanged- Fired when the number updates.CardTypeChanged- Fired when the detected card type (Visa/MC) changes.ErrorStateChanged- Fired when the error state begins or ends.CardInfoChanged- Fired when generic info (Name, Date, CVV) changes.
Enumerations
public enum SiticoneCreditCardType
{
Generic, Visa, VisaElectron, MasterCard, AmericanExpress, Discover, JCB, Maestro,
DinersClub, UnionPay, BankCard, Dankort, Elo, Mir, RuPay, Verve, Troy,
InterPayment, InstaPayment, Switch, Solo, Laser, UATP
}
Usage Examples
Example 1: Input Binding & Flipping
Connects text boxes to the card and flips it when the CVV field is focused.
public CheckoutForm()
{
InitializeComponent();
// Bind TextChanged events
txtCardNumber.TextChanged += (s, e) => cardUI.CardNumber = txtCardNumber.Text;
txtName.TextChanged += (s, e) => cardUI.CardholderName = txtName.Text;
txtExp.TextChanged += (s, e) => cardUI.ExpirationDate = txtExp.Text;
txtCVV.TextChanged += (s, e) => cardUI.CVV = txtCVV.Text;
// Auto-Flip logic
txtCVV.GotFocus += (s, e) =>
{
if (cardUI.View == CardSide.Front) cardUI.FlipCard();
};
txtCVV.LostFocus += (s, e) =>
{
if (cardUI.View == CardSide.Back) cardUI.FlipCard();
};
}
Example 2: Validation Feedback
Validates the card number length and triggers visual feedback on the card itself.
private void BtnPay_Click(object sender, EventArgs e)
{
string number = cardUI.CardNumber.Replace(" ", "");
// Basic validation check
if (number.Length < 16)
{
// Visually shake the card (if ReadOnly/Blocked logic applies)
// Or trigger the error state directly
cardUI.TriggerError("Incomplete Number");
return;
}
// Check expiry
if (IsExpired(cardUI.ExpirationDate))
{
cardUI.TriggerWarning(3000, "Card Expired");
return;
}
ProcessPayment();
}
Example 3: Customizing Appearance (Gold Card)
Sets up a premium "Gold" theme using custom colors and gradients.
private void ApplyGoldTheme()
{
cardUI.CardStartColor = Color.Goldenrod;
cardUI.CardEndColor = Color.DarkGoldenrod;
cardUI.TextColor = Color.Black;
cardUI.LabelColor = Color.FromArgb(60, 60, 60);
cardUI.ShowGlassEffect = true;
cardUI.GlassOpacity = 0.4f;
cardUI.ShowReflection = true;
cardUI.CornerRadius = 18;
}