Siticone Logo
Siticone UI
DOCS
v2025.12.15
Review Videos Contact Pricing
Docs Quick Start

Quick Start Tutorial

The Siticone UI components are built to accelerate your development workflow by providing rich features, performance optimizations, and comprehensive event data right out of the box. This tutorial illustrates a core Siticone development pattern: accessing data and controlling flow directly through specialized event arguments (the e variable).

Designer Tip: Super Fast Theming

The integrated Smart Tag menu (the small arrow icon next to the component in the designer) is the fastest way to customize Siticone controls. It offers two major time-saving features:

🎨
Theme Presets

Apply a full, pre-designed palette (colors, radius, shadows, and animations) in a single click using the Standard or Premium Themes sections of the Smart Tag.

📋
Copy & Paste Settings

This feature is crucial for maintaining consistency. Right-click a component to Copy Settings, then right-click another component of the same type to Paste Settings, instantly sharing all visual configurations.

Step 1: Configure Core Properties

After dragging your components onto the form, configure their essential states, such as text, colors, and specific functionality.

C# - Initial Configuration 
using SiticoneNetFrameworkUI;
using System.Drawing;

public void InitializeControls()
{
                // --- 1. SiticoneTextBoxAdvanced Setup (Email Validation) ---
    siticoneTextBox1.PlaceholderText = "Enter Email Address";
    siticoneTextBox1.InputType = AdvancedTextBoxInputType.Email; 
    siticoneTextBox1.ValidationEnabled = true; // Turn on automatic validation
    siticoneTextBox1.BorderWidth = 2;
    siticoneTextBox1.FocusBorderColor = Color.FromArgb(20, 140, 255);
    siticoneTextBox1.ErrorColor = Color.Red; // Color used when validation fails

                // --- 2. SiticoneButton Setup (Login Button) ---
    siticoneButton1.Text = "LOGIN";
    siticoneButton1.ButtonBackColor = Color.FromArgb(0, 170, 100);
    siticoneButton1.TextColor = Color.White;
    siticoneButton1.CornerRadiusTopLeft = 8;
    siticoneButton1.CornerRadiusTopRight = 8;
    siticoneButton1.EnableRippleEffect = true; 
    siticoneButton1.CanShake = true; // Enable shaking for error feedback
}

Step 2: Control Flow with Event Data

The Siticone pattern is to control component logic using the data carried by the event arguments (e). This is a single, clean source of truth, eliminating the need for repeated property checks on the control itself.

💡 Key Concept

Event arguments in Siticone are self-contained and carry all necessary payload data. This design pattern provides a clean, predictable way to handle component interactions without checking multiple control properties.

A. TextBox Validation Data Access

We use the ValidationChangedEnhanced event to monitor the textbox's status and automatically set the button's IsReadOnly state, blocking submission until the input is valid.

Data Field (e.Property) Type Purpose
e.HasValidationError bool True if any validation rule is broken. Direct control flag.
e.ValidationErrors List<string> List of human-readable error messages (e.g., "Invalid email format").
e.Text string The current content of the textbox when the event fired.
C# - TextBox Validation & Button Control 
private void SiticoneTextBox1_ValidationChangedEnhanced(object sender, EnhancedValidationEventArgs e)
{
                // 1. Flow Control: Set button state directly using event data
                // If validation failed (e.HasValidationError is true), block the button click.
    siticoneButton1.IsReadOnly = e.HasValidationError;

                // 2. Debugging/Feedback: Read the specific error messages
                if (e.HasValidationError)
    {
                // e.ValidationErrors provides the exact reason for failure
        lblStatus.Text = "Error: " + string.Join(", ", e.ValidationErrors);
        lblStatus.ForeColor = e.ErrorColor;
    }
                else
    {
        lblStatus.Text = "Email looks great!";
        lblStatus.ForeColor = Color.Gray;
    }
}

B. Button Interaction Data Access

We handle the button's ReadOnlyInteraction event to intercept clicks while the button is blocked, providing precise error feedback and visual haptics (like a subtle shake).

Data Field (e.Property) Type Purpose
e.Type InteractionType Identifies the action: Click, LongPress, etc.
e.WasHandled bool Set to true to prevent the default button feedback (shake, beep).
e.InteractionLocation Point The mouse coordinates relative to the button where the action occurred.
C# - Button Interaction & Error Handling 
private void SiticoneButton1_ReadOnlyInteraction(object sender, ReadOnlyInteractionEventArgs e)
{
                // Only handle left clicks
                if (e.Button == MouseButtons.Left)
    {
                // Manually show a detailed error based on the Textbox state
                MessageBox.Show("Cannot log in. Please fix the input error.");
        
                // Optional: Manually start the button shake animation for visual feedback
        siticoneButton1.StartShaking();

                // Set WasHandled to TRUE to prevent the default shake/beep feedback 
        e.WasHandled = true;
    }
}

private void SiticoneButton1_Click(object sender, EventArgs e)
{
                // This logic ONLY runs if the button is NOT IsReadOnly (i.e., the email is valid).
                PerformLogin(siticoneTextBox1.TextContent);
}

Summary & Full Setup

The final step is to ensure your events are wired in the form's constructor and that you force an initial validation check on load to set the initial state.

C# - Full Wiring and Initialization 
public partial class LoginForm : SiticoneForm // Assuming you use SiticoneForm
{
                public LoginForm()
    {
                InitializeComponent();
        
                // Initialize styles and properties
                InitializeControls(); 
        
                // --- Wire Up Events for Control Flow ---
        siticoneTextBox1.ValidationChangedEnhanced += SiticoneTextBox1_ValidationChangedEnhanced;
        siticoneButton1.ReadOnlyInteraction += SiticoneButton1_ReadOnlyInteraction;
        siticoneButton1.Click += SiticoneButton1_Click;

                // IMPORTANT: Force initial validation check on load to set the button state correctly.
        siticoneTextBox1.ValidateInput();
    }
    
                // [InitializeControls and event handlers from Steps 1 and 2 go here]
                // ...
}

Quick Reference: Event Data Cheat Sheet

The core philosophy of Siticone events is that the event arguments are self-contained and carry all necessary payload data.

Event Argument Data Access 
// Accessing Validation Arguments (e.g., EnhancedValidationEventArgs e)
if (e.IsValid) { ... }
string currentText = e.Text; // Gets the text content
foreach (string error in e.ValidationErrors) { // Iterate through specific errors }

// Accessing Text Change Arguments (e.g., EnhancedTextEventArgs e)
string old = e.OldText;
string newText = e.NewText;
int length = e.TextLength;
bool hasError = e.HasValidationError; // Carries validation status with it!

// Accessing ReadOnly Interaction Arguments (e.g., ReadOnlyInteractionEventArgs e)
Point location = e.InteractionLocation; // Where the user clicked
if (e.Button == MouseButtons.Right) { ... }
e.WasHandled = true; // Stop default animation/sound