Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Expressive Toggle Switch

Siticone Expressive Toggle Switch

The SiticoneExpressiveToggleSwitch is a high-fidelity replacement for the standard checkbox or toggle switch. It features Physics-Based Animation (elastic thumb stretching, squeezing), fluid color transitions, and a robust state management system. It also supports a visually distinct Read-Only Mode with tactile feedback (Shake/Beep) to indicate locked states without disabling the control entirely.

Toggle State & Behavior

Core properties for managing the active state and user interaction rules.

Property Type Description & Usage Example
IsChecked bool switch.IsChecked = true; Gets or sets the ON/OFF state. Changing this triggers the smooth slide animation.
IsReadonly bool switch.IsReadonly = true; When true, the switch enters a "Locked" visual state and rejects user input. Clicking it triggers the shake animation if enabled.
CanShake bool switch.CanShake = true; If true, the control shakes horizontally when clicked while in ReadOnly mode to indicate access denied.
CanBeep bool switch.CanBeep = true; If true, plays a system beep when clicked while in ReadOnly mode.

Appearance & Colors

Customize the look for Checked (On), Unchecked (Off), and ReadOnly (Locked) states.

Property Type Description & Usage Example
CheckedFillColor Color switch.CheckedFillColor = Color.Purple; Track background color when ON.
CheckedThumbColor Color switch.CheckedThumbColor = Color.White; Thumb (circle) color when ON.
UncheckedFillColor Color switch.UncheckedFillColor = Color.Gray; Track background color when OFF.
ReadonlyFillColor Color switch.ReadonlyFillColor = Color.LightGray; Track background color when IsReadonly is true.
ThumbSize int switch.ThumbSize = 15; Diameter of the sliding circle in pixels.
BorderThickness int switch.BorderThickness = 2; Width of the track border outline.

Animation Physics

Fine-tune the "Expressive" feel of the switch movement.

Property Type Description & Usage Example
AnimationSpeed float switch.AnimationSpeed = 3.0f; Multiplier for the slide speed. Higher is faster.
ThumbStretchScale float switch.ThumbStretchScale = 20.0f; Controls how much the thumb "stretches" (elongates) while moving, simulating velocity.
SqueezeDepth int switch.SqueezeDepth = 4; How much the track "squeezes" inward when the switch is pressed down.

Public Methods

Programmatic Control
// Flips the state (On -> Off or Off -> On) with animation.
toggleSwitch.Toggle();

// Forces the state to ON (checked).
toggleSwitch.ToggleOn();

// Forces the state to OFF (unchecked).
toggleSwitch.ToggleOff();

// Simulates a full mouse click (Press down -> Wait -> Release -> Toggle).
toggleSwitch.PerformClick();

Events

Handling Changes
// 1. CheckedChanged
// Standard event fired after the state has flipped.
toggleSwitch.CheckedChanged += (s, e) => 
{
                Console.WriteLine($"New Value: {toggleSwitch.IsChecked}");
};

// 2. BeforeToggle (Cancellable)
// Fired before the state changes. Allows you to intercept and cancel the toggle.
toggleSwitch.BeforeToggle += (s, e) => 
{
                if (UserHasUnsavedChanges())
    {
                MessageBox.Show("Please save first.");
        e.Cancel = true; // Prevents the switch from toggling
    }
};

// 3. ToggleChanged (Detailed)
// Provides extended info like PreviousState and TriggerSource.
toggleSwitch.ToggleChanged += (s, e) => 
{
                Debug.WriteLine($"Switched to {e.IsChecked} via {e.TriggerSource}");
};

Detailed Usage Examples

Example 1: Basic Settings Switch

A standard usage for enabling/disabling app features.

C# - Settings Switch
public void SetupSwitches()
{
    swNotifications.IsChecked = true;
    swNotifications.CheckedChanged += (s, e) => 
    {
                Properties.Settings.Default.EnableNotifications = swNotifications.IsChecked;
                Properties.Settings.Default.Save();
    };
}

Example 2: Locked/Premium Feature

Demonstrating the ReadOnly mode with visual feedback.

C# - Locked Feature
public void ConfigureProFeatures(bool hasProLicense)
{
    swAdvancedMode.IsReadonly = !hasProLicense;
    swAdvancedMode.CanShake = true; // Shake if clicked without license
    
                if (!hasProLicense)
    {
                // Optional: Show upgrade prompt if user tries to click
                // Since ReadOnly swallows clicks, we can use MouseDown or similar wrapper logic
                // But the visual Shake is handled automatically by the control.
        swAdvancedMode.ReadonlyFillColor = Color.LightGray;
    }
}

Example 3: Custom Theme Application

Applying a custom "iOS Green" look using the properties.

C# - iOS Style
public void ApplyIOSTheme()
{
    toggleSwitch.Size = new Size(50, 30);
    toggleSwitch.ThumbSize = 26; // Large thumb filling height
    toggleSwitch.BorderThickness = 0;
    
                // Colors
    toggleSwitch.CheckedFillColor = Color.FromArgb(52, 199, 89); // iOS Green
    toggleSwitch.CheckedThumbColor = Color.White;
    
    toggleSwitch.UncheckedFillColor = Color.FromArgb(233, 233, 234);
    toggleSwitch.UncheckedThumbColor = Color.White;
    
                // Smooth Elasticity
    toggleSwitch.ThumbStretchScale = 5.0f; // Subtle stretch
    toggleSwitch.AnimationSpeed = 4.0f;    // Snappy
}